关于javascript:手写ajax

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

简易版

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个步骤，接下来开始写代码。

1. var xmlhttp = new XMLHttpRequest();

2. method 是 GET/POST 中的一个
   url 是申请的地址
   第三个参数是 async 一个可选的布尔参数，示意是否异步执行操作，默认为true。

   xmlhttp.open(method,url,true)

3. 须要辨别一下 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));}

4. 监听

5. 解决 都放在一起了

   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);  }}