AJAX详细介绍封装原生AJAX

最新推荐文章于 2024-05-14 13:45:43 发布

_聪明勇敢有力气

最新推荐文章于 2024-05-14 13:45:43 发布

阅读量620

点赞数 1

分类专栏： js 文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/weixin_65402230/article/details/127333876

版权

js 专栏收录该内容

73 篇文章 0 订阅

订阅专栏

AJAX

open方法（发送设置）

参数列表
method 请求方式
url 请求发送地址
ansync true异步 false同步

send方法（发送请求）
参数
发送POST请求体数据用 GET不填写
onreadystatechange事件：挂载到XMLHttpRequest对象上的事件
readyState状态：通过XMLHttpRequest对象发送HTTP请求的各个阶段状态码（0-4）
status状态：服务器响应的状态码（200 Ok,404未找到页面）

当readyState变化时将触发onreadyStatechange事件执行其回调函数

0：请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求已完成且响应已就绪

readyState 状态的0是在未发送请求之前 1是在发送请求之后 2,3,4是在onreadystatechange中

注意：readyState仅仅是针对请求的状态码获取资源是否成功取决于status的状态

      var xhr = new XMLHttpRequest();
      console.log(xhr.readyState); //0
      xhr.open('GET','url', true);
      xhr.send();
      console.log(xhr.readyState); //1
      xhr.onreadystatechange = function () {
        console.log(xhr.readyState); //2,3,4
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log('成功');
        }
      };

post请求方式下 send方法参数中的格式：a=1&b=2&c=3

xhr.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”)
post请求方式必须设置这个请求头信息目的是将请求体中的数据转换为键值对这样后端接收到a=1&b=2&c=3这样的数据才知道这是一个
post方式传来的数据

      var xhr = new XMLHttpRequest();
      console.log(xhr.readyState); //0
      xhr.open('POST', 'url', true);
      xhr.send('status=1&flag=1');
      xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      console.log(xhr.readyState); //1
      xhr.onreadystatechange = function () {
        console.log(xhr.readyState); //2,3,4
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log('成功');
        }
      };

AJAX版本

XMLHttpRequest标准又分为Level1于Level2

XMLHttpRequest Level1 缺点
1.无法发送跨域请求
2.不能发纯文本的数据
3.无法获取传输进度

XMLHttpRequest Level 2改进
1.可以发送跨域请求
2.支持获取二进制数据（非纯文本数据）
3.支持上传文件
4.formData对象
5.可以获取传输进度
6.可以设置超时时间

兼容性问题
1.TE8/8Opara Mini不支持xhr 对象
2.IE10/11不支持响应类型为JSON
3.部分浏览器不支持超时设置
4.部分浏览器不支持blob(文件对象的二进制数据)

状态码与状态提示

xhr.status/xhr.statusText 服务器回应的HTTP状态码/服务器发送的状态提示

200.ok 访问正常
301,Moved Permanently 永久移动
302,Move temporarily 暂时移动
304,Not Modified 未修改
307,Temporary Redirect 暂时重定向
401,Unauthorized 未授权
403,Forbidden 禁止访问
404,Not Found 未发现指定网址
500,Internal Server Error 服务器发生错误

五个事件

xhr.onloadstart 绑定HTTP请求发出的监听函数
xhr.onerror 绑定请求失败的监听函数（修改封装的AJAX）
xhr.onload 绑定请求成功完成的监听函数
xhr.onabort 绑定请求终止（调用了abort()方法）的监听函数
xhr.onloadend 绑定请求完成（不管成功与失败）的监听函数

lodastart -> readyState === 4 -> load/error/abort/ -> loadend

请求超时

xhr.timeout 多少毫秒后如果请求仍然没有得到结果就会自动终止如果该属性等于0 就表示没有时间限制

xhr.ontimeout 绑定请求超时一个监听函数如果发生timeout事件就会执行这个监听函数

同步与异步

异步（默认）async = true Ajax异步发送请求时不影响页面的加载用户操作以及AJAX程序后程序执行

同步 async = false AJAX同步发送请求时浏览器必须等到请求完成并响应成功后 AJAX程序后续的程序才会执行

封装原生AJAX

      var $ = (function () {
        function _doAjax(opt) {
          var o = window.XMLHttpRequest
            ? new XMLHttpRequest()
            : new ActiveXObject('Microsoft.XMLHTTP');
          if (!o) {
            throw new Error('您的浏览器不支持起步发起HTTP请求');
          }
          var opt = opt || {},
            type = (opt.type || 'GET').toUpperCase(),
            async = '' + opt.async === 'false' ? false : true,
            url = opt.url,
            dataType = opt.dataType || 'json',
            data = opt.data || null,
            timeout = opt.timeout || 30000,
            error = opr.error || function () {},
            success = opt.success || function () {},
            complete = opt.complete || function () {},
            t = null;

          if (!url) {
            throw new Error('您没有填写URL');
          }

          o.onreadystatechange = function () {
            if (o.readyState === 4) {
              if ((o.status >= 200 && o.status < 300) || o.status === 304) {
                switch (dataType.toUpperCase()) {
                  case 'JSON':
                    success(JSON.parse(o.responseText));
                    break;
                  case 'TEXT':
                    success(o.responseText);
                    break;
                  case 'XML':
                    success(o.responseXML);
                    break;
                  default:
                    success(JSON.parse(o.responseText));
                }
              } else {
                error();
              }
              complete();
              clearTimeout(t);
              t = null;
              o = null;
            }
          };
        }
        o.open(type, url, async);
        type === 'POST' && o.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        o.send(type === 'GET' ? null : formatDatas(data));

        t = setTimeout(function () {
          complete();
          o.about();
          clearTimeout(t);
          t = null;
          o = null;
          throw new Error('This require has been timeout form ' + url);
        }, timeout);
        function formatDatas(opj) {
          var str = '';
          for (var key in obj) {
            str += key + '=' + obj[key] + '&';
          }
          return str.replace(/&$/, '');
        }
        return {
          ajax: function (opt) {
            _doAjax(opt);
          },
          post: function (url, data, dataType, successCB, errorCB, completeCB) {
            _doAjax({
              type: 'POST',
              url: url,
              data: data,
              dataType: dataType,
              success: successCB,
              errorCB: errorCB,
              completeCB: completeCB,
            });
          },
          get: function (url, dataType, successCB, errorCB, completeCB) {
            _doAjax({
              type: 'GET',
              url: url,
              dataType: dataType,
              successCB: successCB,
              errorCB: errorCB,
              completeCB: completeCB,
            });
          },
        };
      })();