在网页开发中，我们总会遇到无刷新更新数据的需求，那么这时候总会想到使用Ajax来进行页面局部的数据更新。如果页面很多的话，每次使用都要去new、open、setRequestHeader、send，不放自己动手封装一个ajax函数吧。

首先我们看下最原始的方法应该怎么做，这里以发送给php为例分别看下post和get请求：

//实例化ajax对象
 var xhr = new XMLHttpRequest();
  
 //post请求
 xhr.open('post', 'ajax.php', true);
 xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 xhr.send('name=' + v);
  
 //get请求
 xhr.open('get', 'ajax.php?name=' . v, true);
 xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 xhr.send(');

可以看出post与get主要区别在于传入open的method不一样，其次就是传参方式不一样，由此我们在封装ajax函数时，就需要分成两个不同的分支。那话不多说，马上开始封装。

为了更方便使用我们将它封装成一个自调用函数的js文件，可以取名为ajax.js，当我们引入这个文件时，一些初始化程序就可以自动完成调用。此时声明一个变量aj（当然用$或是其他的也可以，但要注意是否会和其他js文件（如jquery）产生冲突）,同时也可以封装一个获取元素的函数方便元素操作（类似于jquery，不想封装也可以）。

(function () {
     var aj = function (e) {
         return document.querySelector(e);
     }
 })();

考虑到IE浏览器，做兼容性设计，封装一个兼容性初始化函数，用于获取数据交换对象。

aj.init = function () {
         try {
             var xhr = new XMLHttpRequest();
         } catch (e) {
             var xhr = new ActiveXObject('Microsoft.XMLHttp');
         }
         return xhr;
 }

到这里初始工作基本完成，下面是ajax交互的主体。我们将方法取名为ajaxRequest，将包含以下参数：

     @param1 method string 请求方式get或post
      @param2 url string 请求地址路径
      @param3 callback function 回调函数
      @param4 response string 返回方式text或xml或json，默认text
      @param5 sendArg string post传参，默认空（针对post请求）
      @param6 headerName string 请求头名称默认Content-type
      @param7 headerValue string 请求头值默认application/x-www-form-urlencoded

首先声明变量获取数据请求对象xhr，再将基本ajax请求方式按post和get用if语句进行区分，因为post请求可能涉及文件传输所以要对请求头进行设置。

aj.ajaxRequest = function (method, url, callback, response = 'text', sendArg = '',headerName = "Content-type",headerValue = "application/x-www-form-urlencoded") {
         var xhr = aj.init();
         if (method == 'get') {
  
             }
             xhr.open('get', url);
             xhr.send();
         } else if (method == 'post') {
           
             }
             xhr.open('post', url);
             xhr.setRequestHeader(headerName,headerValue);
             xhr.send(sendArg);
         }
 }

为xhr对象添加当请求状态改变时调用函数，当readyState == 4，请求已完成响应已就绪的时候，我们就要将处理完成的数据作参数传给回调函数，用于后续的使用和处理。返回的数据形式可自行根据使用情况选择text、xml和json。

xhr.onreadystatechange = function () {
     if (xhr.readyState == 4) {
       if (response == 'text') {
         callback(xhr.responseText);
     } else if (response == 'xml') {
       callback(xhr.responseXML);
     } else if(response == 'json'){
         callback(JSON.parse(xhr.responseText));
     }
 }

最后为了能在全局调用我们自己封装的ajax请求，可以将变量作为window对象的属性和方法而存在。将之前所有步骤组装起来，我们就获得了一个完整的ajax请求方法了。

(function () {
     //封装元素获取函数
   var aj = function (e) {
       return document.querySelector(e);
   }
  
   //兼容性初始化
       aj.init = function () {
         try {
           var xhr = new XMLHttpRequest();
       } catch (e) {
         var xhr = new ActiveXObject('Microsoft.XMLHttp');
       }
       return xhr;
     }
  
     //封装ajax请求
   aj.ajaxRequest = function (method, url, callback, response = 'text', sendArg = '',
   headerName = "Content-type",headerValue = "application/x-www-form-urlencoded") {
       var xhr = aj.init();
     if (method == 'get') {
         xhr.onreadystatechange = function () {
           if (xhr.readyState == 4) {
             if (response == 'text') {
               callback(xhr.responseText);
           } else if (response == 'xml') {
             callback(xhr.responseXML);
           } else if(response == 'json'){
                         callback(JSON.parse(xhr.responseText));
           }
         }
       }
       xhr.open('get', url);
       xhr.send();
     } else if (method == 'post') {
             xhr.onreadystatechange = function () {
                 if (xhr.readyState == 4) {
                     if (response == 'text') {
                         callback(xhr.responseText);
                 } else if (response == 'xml') {
                     callback(xhr.responseXML);
                 } else if(response == 'json'){
                     callback(JSON.parse(xhr.responseText));
                 }
             }
       xhr.open('post', url);
       xhr.setRequestHeader(headerName,headerValue);
       xhr.send(sendArg);
         }
     }
  
     //作为window对象的属性和方法
   window.aj = aj;
   
 })();

最后的最后，记得进行代码测试，如果发现跑不起来那就检查一下js文件引入、post请求头设置等及细节问题。如果喜欢的话，可以订阅我的博客，有最新文章将发送到您的邮箱，祝我们终有一日成为大牛。