AJAX基础知识讲解

红太狼 2021-01-22 15:18 845阅读 0赞

AJAX:

  1. 概念: ASynchronous JavaScript And XML 异步的JavaScript 和 XML

    1. 异步和同步:客户端和服务器端相互通信的基础上

      • 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
      • 客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作。

        Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 [1]
        通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
        传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

        提升用户的体验

    2. 实现方式:

      1. 原生的JS实现方式(了解)

        1. //1.创建核心对象
        2. var xmlhttp;
        3. if (window.XMLHttpRequest)
        4. {// code for IE7+, Firefox, Chrome, Opera, Safari
        5. xmlhttp=new XMLHttpRequest();
        6. }
        7. else
        8. {// code for IE6, IE5
        9. xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        10. }
        11. //2. 建立连接
        12. /*
        13. 参数:
        14. 1. 请求方式:GET、POST
        15. * get方式,请求参数在URL后边拼接。send方法为空参
        16. * post方式,请求参数在send方法中定义
        17. 2. 请求的URL:
        18. 3. 同步或异步请求:true(异步)或 false(同步)
        19. */
        20. xmlhttp.open("GET","ajaxServlet?username=tom",true);
        21. //3.发送请求
        22. xmlhttp.send();
        23. //4.接受并处理来自服务器的响应结果
        24. //获取方式 :xmlhttp.responseText
        25. //什么时候获取?当服务器响应成功后再获取
        26. //当xmlhttp对象的就绪状态改变时,触发事件onreadystatechange。
        27. xmlhttp.onreadystatechange=function()
        28. {
        29. //判断readyState就绪状态是否为4,判断status响应状态码是否为200
        30. if (xmlhttp.readyState==4 && xmlhttp.status==200)
        31. {
        32. //获取服务器的响应结果
        33. var responseText = xmlhttp.responseText;
        34. alert(responseText);
        35. }
        36. }
      2. JQeury实现方式
      3. $.ajax()

        • 语法:$.ajax({键值对});

          1. //使用$.ajax()发送异步请求
          2. $.ajax({
          3. url:"ajaxServlet1111" , // 请求路径
          4. type:"POST" , //请求方式
          5. //data: "username=jack&age=23",//请求参数
          6. data:{"username":"jack","age":23},
          7. success:function (data) {
          8. alert(data);
          9. },//响应成功后的回调函数
          10. error:function () {
          11. alert("出错啦...")
          12. },//表示如果请求响应出现错误,会执行的回调函数
          13. dataType:"text"//设置接受到的响应数据的格式
          14. });
        1. $.get():发送get请求

          • 语法:$.get(url, [data], [callback], [type])
            • 参数:
              • url:请求路径
              • data:请求参数
              • callback:回调函数
              • type:响应结果的类型
        2. $.post():发送post请求

          • 语法:$.post(url, [data], [callback], [type])
            • 参数:
              • url:请求路径
              • data:请求参数
              • callback:回调函数
              • type:响应结果的类型

发表评论

表情:
评论列表 (有 0 条评论,845人围观)

还没有评论,来说两句吧...

相关阅读

    相关 CSS基础知识讲解

    CSS:页面美化和布局控制 概念: Cascading Style Sheets 层叠样式表 层叠:多个样式可以作用在同一个html的元素上,同时生效 好处: 功能强...