关于javascript:手写ajax

42次阅读

共计 2095 个字符，预计需要花费 6 分钟才能阅读完成。

据说面试题会被问到这个，搜寻一下拿了个简易版的。

简易版

var request = new XMLHttpRequest();
request.open("GET", "/a/b/c?name=ff", true);
request.onreadystatechange = function () {if (request.readyState === 4 && request.status === 200) {console.log(request.responseText);
  }
};
request.send();

更加精炼的

var request = new XMLHttpRequest();
request.open("GET", "/a/b/c?name=ff", true);
request.onload = () => console.log(request.responseText);
request.send();

秉着我集体不弄懂不难受的性子，我又去看了看详情的版本。
我这里按着我集体写代码的思路总结一下。(低版本的 IE 我不思考了)

graph LR
    A[创立异步对象] -->B
    B[设置申请地址] -->C
    C[发送申请] -->D
    D[监听状态] -->E
    E[处理结果]

5 个步骤，接下来开始写代码。

```
var xmlhttp = new XMLHttpRequest();
```
method 是 GET/POST 中的一个
url 是申请的地址
第三个参数是 async 一个可选的布尔参数，示意是否异步执行操作，默认为 true。
```
xmlhttp.open(method,url,true)
```

须要辨别一下 method 解决形式是不一样的。

if (method.trim().toUpperCase() === "GET") {xmlhttp.send(null);
} else if (method.trim().toUpperCase() === "POST") {
 xmlhttp.setRequestHeader(
   "Content-type",
   "application/x-www-form-urlencoded"
 );
 xmlhttp.send(dataToString(data));
}

监听

解决都放在一起了

xmlhttp.onreadystatechange = function () {clearTimeout(timer);
  if (xmlhttp.readyState === 4) {
     if ((xmlhttp.status >= 200 && xmlhttp.status < 300) ||
       xmlhttp.status === 304
     ) {success(xmlhttp); // 胜利后回调；} else {error(xmlhttp); // 失败后回调；}
  }
}

说实话拆开来看我本人都看的都是一头雾水。。。
上面给个残缺代码。

function myAjax({method, url, data, timeout, success, error} = {}) {
  // 解决 data
  function dataToString(data) {data.t = new Date().getTime();
 var res = [];
 for (var key in data) {// 须要将 key 和 value 转成非中文的模式，因为 url 不能有中文。应用 encodeURIComponent();
   res.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
 }
 return res.join("&");
  }

  // 1. 创建对象。var xmlhttp = new XMLHttpRequest();

  // 2. 设置申请地址
  xmlhttp.open(method, url);

  // 3. 发送申请
  if (method.trim().toUpperCase() === "GET") {xmlhttp.send(null);
  } else if (method.trim().toUpperCase() === "POST") {
 // POST 须要设置 header
 xmlhttp.setRequestHeader(
   "Content-type",
   "application/x-www-form-urlencoded"
 );
 xmlhttp.send(dataToString(data));
  }

  // 4. 监听状态变动的回调函数
  xmlhttp.onreadystatechange = function () {clearTimeout(timer);
 if (xmlhttp.readyState === 4) {
   if ((xmlhttp.status >= 200 && xmlhttp.status < 300) ||
     xmlhttp.status === 304
   ) {
     // 5. 胜利后回调
     success(xmlhttp);
   } else {
     // 5. 失败后回调
     error(xmlhttp);
   }
 }
  };

  // 判断外界是否传入了超时工夫
  if (option.timeout) {timer = setInterval(function () {xmlhttp.abort(); // 中断请求
   clearInterval(timer);
 }, timeout);
  }
}

正文完