“ 关注 前端开发社区 ，回复"1"即可加入 前端技术交流群，回复 "2"即可免费领取 500G前端干货！

身为一枚前端，在项目中和后台的交互简直太频繁了。项目中，一直在使用的是jQuery中封装好了的$.ajax()的方法，这个方法大家一定非常熟悉了，具体使用的格式参数等这里不再赘述，今天要详细说的是ajax的创建过程。

ajax：一种客户端向服务器请求数据的方式，不需要去刷新整个页面；

ajax的核心：XMLHttpRequest对象

下面是我简单封装的一个函数：

<script>
 ajax({
  url:'',    //请求地址
  type:"POST",     //请求方式
  data:{name:'linda',age:24},      //请求参数
  dataType:'json',
  success:function(reponse,xml){
   //此处放成功后执行的代码
  },
  fail:function(status){
   //此处放失败后执行的代码
  }
 });

 function ajax(options){
  //第一步，创建一个XHR对象，也即一个异步调用的对象
  function createXHR(){
   var xhr;
   //非IE6
   if(typeof XMLHttpRequest != 'undefined'){
    xhr = new XMLHttpRequest();
   }
   //IE6及以下版本浏览器
   else if(typeof ActiveXObject != 'undefined'){
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
   }
   else{
    xhr = null;
   }
   return xhr;
  }

  var xhr = createXHR();

  //第三步，设置相应HTTP请求的状态变化函数
  xhr.onreadystatechange = function(){
   if(xhr.readyState == 4){
    if(xhr.status>=200 && xhr.status<=300 || xhr.status == 304){
     options.success(xhr.responseText,responseXML);
    }
    else{
     options.fail(xhr.status);
    }
   }
  }

  //第二步，创建一个新的HTTP请求，并设置请求的方式、URL，是否异步。
  //第四步，发送HTTP请求
  if(options.type == 'GET'){
   xhr.open('GET',addURIParams(options.url,options.params),true);
   xhr.send(null);
  }
  else if(options.type == 'POST'){
   xhr.open('POST',url,true);
   xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
   xhr.send(options.params);
  }

  function addURIParams(url,data){
   for(var name in data){
    url += (url.indexOf('?') == -1 ? "?" : "&");
    url += encodeURIComponent(name)+ '=' + encodeURIComponent(data[name]);
   }
   return url;
  }
 }
</script>

1.创建

• 1.1、IE7及其以上版本中支持原生的 XHR 对象，因此可以直接用：

 var oAjax = new XMLHttpRequest();

• 1.2、IE6及其之前的版本中，XHR对象是通过MSXML库中的一个ActiveX对象实现的。有的书中细化了IE中此类对象的三种不同版本，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0 和 MSXML2.XMLHttp.6.0；个人感觉太麻烦，可以直接使用下面的语句创建：

 var oAjax=new ActiveXObject(’Microsoft.XMLHTTP’);

2.连接和发送

• 2.1、open()函数的三个参数：请求方式、请求地址、是否异步请求（同步请求的情况极少，至今还没用到过）；

• 2.2、GET 请求方式是通过URL参数将数据提交到服务器的，POST则是通过将数据作为 send 的参数提交到服务器；

• 2.3、POST 请求中，在发送数据之前，要设置表单提交的内容类型；具体来说是这样的：默认情况下，服务器对POST请求和提交WEB表单的请求并不会一视同仁。因此，服务器必须有程序来读取发送过来的原始数据，并从中解析出有用的部分。不过，我们可以使用XHR来模仿WEB表单提交。首先将Content-Type头部信息设置成：application/x-www-form-urlencoded，也就是表单提交时的内容类型，其次是以适当的格式创建一个字符串，发送HTTP请求。

• 2.4、提交到服务器的参数必须经过 encodeURIComponent() 方法进行编码，实际上在参数列表”key=value”的形式中，key 和 value 都需要进行编码，因为会包含特殊字符。

encodeURI() ：用于整个 URI 的编码，不会对本身属于 URI 的特殊字符进行编码，如冒号、正斜杠、问号和井号；其对应的解码函数 decodeURI()；

encodeURIComponent() ：用于对 URI 中的某一部分进行编码，会对它发现的任何非标准字符进行编码；其对应的解码函数 decodeURIComponent()；

3.接收

• 3.1、接收到响应后，响应的数据会自动填充XHR对象，相关属性如下

responseText：响应返回的主体内容，为字符串类型；

responseXML：如果响应的内容类型是 “text/xml” 或 “application/xml”，这个属性中将保存着相应的xml 数据，是 XML 对应的 document 类型；

status：响应的HTTP状态码；

statusText：HTTP状态的说明；

• 3.2、XHR对象的readyState属性表示请求/响应过程的当前活动阶段，这个属性的值如下

=0 -未初始化，尚未调用open()方法；

1 -启动，调用了open()方法，未调用send()方法；

2 -发送，已经调用了send()方法，未接收到响应；

3 -接收，已经接收到部分响应数据；

4 -完成，已经接收到全部响应数据；

只要 readyState 的值变化，就会调用 readystatechange 事件，(其实为了逻辑上通顺，可以把readystatechange放到send之后，因为send时请求服务器，会进行网络通信，需要时间，在send之后指定readystatechange事件处理程序也是可以的，但为了规范和跨浏览器兼容性，还是在open之前进行指定吧)。

• 3.3、在readystatechange事件中，先判断响应是否接收完成，然后判断服务器是否成功处理请求，xhr.status 是状态码，状态码以2开头的都是成功，304表示从缓存中获取。

4.ajax请求是不能跨域的！

上述是我参考了《javascript高级程序设计》以及网上多方资料总结出来的，如果有错误，欢迎大家指正~~~

最近几天会陆续更新的~~，觉得总结的可以的话，麻烦给小编点一个  在看, 谢谢！

往期：

JS基础知识总结（六）：只知道ajax？你已经out了

JS基础知识总结（五）：防抖和节流

JS基础知识总结（四）：作用域与闭包

JS基础知识总结（三）：原型、原型链

JS基础知识总结（二）:浅拷贝与深拷贝

JS基础知识总结（一）

请各位帅哥美女多多支持帅编，回复“1”即可加入前端技术交流群，回复"2"即可领取 500G 前端干货