ajax小结

最新推荐文章于 2022-08-02 18:27:34 发布

原创最新推荐文章于 2022-08-02 18:27:34 发布 · 157 阅读

CC 4.0 BY-SA版权

本文详细介绍了原生Ajax的实现过程，包括创建XMLHttpRequest对象、设置回调函数及发送请求等步骤，并对比了jQuery封装的Ajax方法，展示了更简洁易用的请求方式。

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8">
      <title>原生ajax请求</title>
      <script type="text/javascript">
         //第一步 创建XMLHttpRequest
         var xhr = new XMLHttpRequest();
         //第二设置回调函数
         xhr.onreadystatechange = function() {
            //readyState是请求的对象状态
            //status服务器返回http状态码
            if(xhr.readyState === 4 && xhr.status === 200) {
               var jo = xhr.responseText;
//             xhr.responseText返回的是一个字符串
               console.log(typeof(jo));
               res = JSON.parse(jo);
               if (res.data!=null && res.data.length > 0) {
                   console.log(res)
                  console.log(res.code)
                  console.log(typeof(res.code))
                  document.write("请求成功")
               } else{
                  document.write("网页出错了")
                  
               }
            }
         }

         // 第三步 get  post  put  delete
         //打开连接 xhr初始化参数
         /**
          * 参数说明true
          * method string 请求方式
          * url    string 请求的服务器地址
          * async   boolean
          */

         xhr.open('GET', 'https://www.apiopen.top/meituApi?page=1', async = true)

         //第四步 发送请求
         xhr.send()
      </script>
   </head>
   <body>
   </body>
</html>

以上为老师写的js的ajax,有几点要注意:

1.我们所有讨论的都跟xhr(New XHttpRequest)这个对象有关,包括三个

readyState是请求的对象状态(这个状态码3和4都可以)

status服务器返回http状态码

以及onreadystatechange事件

2. 每当 readyState 改变时，就会触发 onreadystatechange 事件,执行onreadystatechange 事件绑定的函数(回调函数)。

var jo = xhr.responseText(获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性);

res = JSON.parse(jo);字符串变为json对象;

3.jQuery封装的ajax,如下(还有 jqXHR（在jQuery 1.4.x的中，XMLHttpRequest）对象)

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8">
      <title></title>
      <script src="js/jquery-3.1.1.js" type="text/javascript">
      </script>
      <script type="text/javascript">
         //两种方式一样的
         //       $(document).ready(function () {

         //       })
         $(function() {
            var url = 'http://gank.io/api/data/%E7%A6%8F%E5%88%A9/10/1';
            var settings = {
               url: url,
               type: 'GET',
//             data:post请求中,必须为键值对或者类似的字符串
//             dataType: 指定服务器返回的数据类型
//             error :请求错误执行的函数
               success: function(result,textStatus,jqXHR) {
                  console.log(textStatus)
                  console.log(result)
                  console.log(jqXHR)
                  console.log(jqXHR.responseJSON)
               },
            };
            $.ajax(url,settings)
         })

         //result为json字符串转化后的对象
      </script>
   </head>

   <body>
      <div id="imgs">

      </div>
   </body>

</html>