ajax-原生写法步骤

1. Ajax

　   ：含义：简单的意思就是用一些内置的Js中的方法从后台在浏览器和服务器之间传输数据。

　　：使用XMLHttpRequest发送http请求并接收响应。

　　：AJAX=异步JavaScript+XML； 

　　：ajax是一种无需重新加载整个网页情况下能够更新部分网页的技术。

2. 分为———六个步骤

第一步：创建该对象（注意浏览器的兼容问题）

var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");//兼容性，前者为大部分主流浏览器，后者为IE浏览器。

第二步：创建一个新的HTTP请求，并指定改HTTP请求的方法、URL以及验证信息； 

xhr.open(method,URL,flag,name,password);

•   method：该参数指定HTTP的请求方法，有get、post、head、put、delete。
•   URL：该参数用于指定HTTP请求的URL地址，可以是绝对URL，也可以是相对URL。
•   flag：可选参数，参数值为布尔型。true表示异步方式(默认)、false表示同步方式。
•   name：可选参数，用于输入用户名。如果服务器需要验证，则必须使用该参数。
•   password：可选参数，用于输入密码。如果服务器需要验证，则必须使用该参数。

             注意：post与get对于xhr.open()与xhr.send()的写法有所差别。

//get :

xhr.open(type, url+"需要传递的数据");
xhr.send(null);

//post :

xhr.open(type, url);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("需要传递的数据");

第三步： 设置响应HTTP状态变化的函数 readyState的值0，1，2，3，4；（并要求status ==200   代表数据成功传回来的状态码）

• 0：未初始化状态。在创建完XMLHttpRequest对象时，该对象处于未初始化状态。
• 1：初始化状态。    在创建完XMLHttpRequest对象后使用open()方法创建了HTTP请求时，该对象处于初始化状态。。
• 2：发送数据状态。在初始化XMLHttpRequest对象后，使用send()方法发送数据时，该对象处于发送数据状。
• 3：接收数据状态。Web服务器接收完数据并进行处理完毕之后，向客户端传送返回的结果。
• 4：完成状态。        XMLHttpRequest对象接收数据完毕后，进入完成状态。此时接收完毕后的数据存入在客户端计算机的内存中，可以使用responseText属性或responseXml属性来获取数据。

第四步：获取异步调用返回的数据

xhttp.onreadystatechange = function(){
    if(xhr.readyState==4 ){
    if(xhr.status==200||(xhr.status==0){
    //状态码为0是本地响应成果，200表示处理的结果是ok的 v
    document.write(xhr.responseText);//使用以下语句将返回结果以字符串形式输出 
    //document.write(xhr.responseXML);//或者使用以下语句将返回结果以XML形式输出 
    }else{ 
        alert("出错状态码："+xhr.status+"出错信息："+xhr.statusText); 
    } 
}

注意：如果HTML文件不是在Web服务器上运行，而是在本地运行，则xhr.status的返回值为0。

第五步：发送HTTP请求

xhr.send();//根据HTTP请求方法来确定xhe.send()中的内容

第六步：局部更新

根据第四步中的xhr.responseText或xhr.responseXML得到的数据来反馈到页面中。

3. 总结：

var ajax = function(param) {
    var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    var type = (param.type || 'get').toUpperCase();//将传来的urlType转换为大写
    var url = param.url; 
    if (!url) {
        return  //若不存在url地址则返回，不在进行下面的操作
    }
    var data = param.data, //获取需要传递的参数
        dataArr = [];  //定义一个数组
    for (var k in data) {
        dataArr.push(k + '=' + data[k]);
    }
    dataArr.push('_=' + Math.random());
    if (type == 'GET') {
        url = url + '?' + dataArr.join('&');
        xhr.open(type, url);
        xhr.send();
    } else {
           xhr.open(type, url);
           xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
           xhr.send(dataArr.join('&'));
         }
    xhr.onload = function() {
       if (xhr.status == 200 || xhr.readyState==4) {
          var res;
          if (param.success && param.success instanceof Function) {
              res = xhr.responseText;
              if (typeof res === 'string') {
                 res = JSON.parse(res);
                 param.success.call(xhr, res);
              }
          }
       }
    };
};