Ajax的原生写法

简介: Ajax的原生写法
function ajax() {
  //创建一个 XHR 对象
  let oAjax = window.XMLHttpRequest ? (new XMLHttpRequest()) : (new window.ActiveXobject('Microsoft.XMLHTTP'));
  //返回一个函数,这是函数柯里化操作,不用每次调用 ajax 都判断浏览器环境
  //但是会占用更多的内存,因为总是会保存外部函数的作用域
  return function(url, fnSucc, fnFaild) {
    //只要 XHR 对象的 readyState 属性的值发生改变,就触发这个事件
    oAjax.onreadystatechange = function() {
      // readyState 属性是 0-4 的值,当为 4 时,表示已经接收到全部响应数据,并可以在客户端使用
      if (oAjax.readyState === 4) {
        //响应的 HTTP 状态
        let s = oAjax.status;
        if (s === 200 || s === 206 || s === 304) {
          //将响应主体被返回的文本作为参数传给这个函数,并执行这个函数
          if (fnSucc) fnSucc(oAjax.responseText);
        } else {
          if (fnFaild) fnFaild(oAjax.status);
        }
      }
    };
    //启动一个请求,准备发送
    oAjax.open('GET', url, true);
    //发送请求
    oAjax.send(null);
  }
}
相关文章
|
5月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
4月前
|
JSON 前端开发 JavaScript
原生 AJAX 详解
原生 AJAX 详解
46 0
|
10月前
|
XML 前端开发 JavaScript
原生ajax
ajax的概念:Ajax即Asynchronous Javascript And XML(异步JavaScript和XML),实际上就是前端js语言与后端交互的手段
|
5月前
|
前端开发 JavaScript API
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本
|
5月前
|
存储 移动开发 JavaScript
【原生】sd.js帮助您简化繁重的获取数据、存储数据(CRUD)骚操作(吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据)
【原生】sd.js帮助您简化繁重的获取数据、存储数据(CRUD)骚操作(吐槽~在安卓9.0以下或者IOS10.X以下手机端H5页面不支持,在这两种情况下的系统只能使用ajax或者原生js请求后台数据)
|
6月前
|
前端开发
一篇,让你会写原生ajax
一篇,让你会写原生ajax
34 0
|
6月前
|
JavaScript 前端开发
原生js实现ajax请求带请求头header
原生js实现ajax请求带请求头header
|
6月前
|
JavaScript 前端开发
js实现原生ajax
js实现原生ajax
195 0
|
6月前
|
JavaScript 前端开发
原生JS实现Ajax下载文件
原生JS实现Ajax下载文件
|
7月前
|
XML JSON 前端开发
你现在还会使用原生的Ajax吗?
你现在还会使用原生的Ajax吗?
55 0