对原生ajax的理解

$.ajax({
    url:'',//请求文件路径
    type:'',//请求方式GET POST
    data:{},//要发给服务器的数据参数
    dataType:'',//希望接口返回的数据格式json,string等等
    success:function(){
        // 请求成功的回调
    },
    error:function(){
        // 请求失败的回调
    }
})

一个ajax的请求可以形象的比喻为一次打电话的过程：

//1 拿出手机        创建XMLHttpRequest对象
//2 拨号            连接到服务器
//3 说话            发送请求
//4 等待对方回应     服务器响应请求

//1 拿出手机        创建XMLHttpRequest对象
if(window.XMLHttpRequest){
    var OAjax = new XMLHttpRequest()
}else{
    // 兼容ie6及以下写法
    var OAjax = new ActiveXObject("Misrcsoft.XMLHTTP")
}

//2 拨号            连接到服务器
OAjax.open('GET','a.html?t="new Date().getTime()"','true');//请求方式，请求路径,t为了消除
缓存，是否异步

//3 说话            发送请求
OAjax.send();

//4 等待对方回应     服务器响应请求
//4 等待对方回应     服务器响应请求
OAjax.onreadystatechange = function(){
    //OAjax.readyState,监听浏览器和服务器之间的交互到哪一步了
        // 0->未初始化，还没有调用open方法
        // 1->载入，已调用send()方法，正在发送请求
        // 2->载入完成，send()方法已完成，已收到全部响应内容
        // 3->解析，解析响应的内容
        // 4->完成，相应内容解析完成，可以在客户端调用
    if(OAjax.readyState == 4){
        if(OAjax.status == 200){
            // 请求a.html成功，responseText为服务器响应的内容
            console.log('ajax请求成功',OAjax.responseText);
            
        }else{
            // 状态不为200
            console.log('ajax请求失败');
            
        }
    }
}

原生ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的
某部分进行更新。

ajax原生版，兼容所有浏览器：

function loadXMLDoc(url){
    xmlhttp=null;
    if (window.XMLHttpRequest){
        // code for Firefox, Opera, IE7, etc.
        xmlhttp=new XMLHttpRequest();
    }
    else if (window.ActiveXObject){
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (xmlhttp!=null){
        xmlhttp.onreadystatechange=state_Change;
        xmlhttp.open("GET",url,true);//method：请求的类型；GET 或 POST。
async：true（异步）或 false（同步）
        xmlhttp.send(null);//string：仅用于 POST 请求
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//添加请求头。
    }
    else{
        alert("Your browser does not support XMLHTTP.");
    }
}

function state_Change(){
    if (xmlhttp.readyState==4){
        // 4 = "loaded"
        if (xmlhttp.status==200){
            // 200 = "OK"
            document.getElementById('T1').innerHTML=xmlhttp.responseText;
        }
        else{
            alert("Problem retrieving data:" + xmlhttp.statusText);
        }
    }
}

1.responseText 获得字符串形式的响应数据。

2.responseXML 获得 XML 形式的响应数据。

3.onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

4.readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

5.status

200: "OK"
404: 未找到页面

简化ajax模版，便于工作中调用：

function loadAjax(url,box){
    // code for IE7+, Firefox, Chrome, Opera, Safari || code for IE6, IE5
    var req = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP");
    req.open("GET",url,true); //post 中文路径会报错。
    req.send();
    req.onreadystatechange = function(){
        if(req.readyState==4&&req.status==200){
            box.innerHTML=req.responseText;
        }
    }
}

注：没有readyState和status错误提示。

原生ajax请求

(1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象.
(2)创建一个新的`HTTP`请求,并指定该`HTTP`请求的方法、`URL`及验证信息.
(3)设置响应`HTTP`请求状态变化的函数. 
(4)发送`HTTP`请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.

var  XMLHttp = new XMLHttpRequest ()
XMLHttp.open = ("请求的方法（get\post）" ,"URL" , "async(ture异步/false同步)")
xmlHttp.send()
xmlhttp.onreadystatechange=function () {//接收到服务端响应时触发  
if(xmlhttp.readyState==4&&xmlhttp.status==200){  
        
}  

xmlhttp.readyState一共有5中请求状态，从0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

xmlhttp.status

200: "OK"
300    这些状态码用来重定向
401    当前请求需要用户验证
403   （禁止） 服务器拒绝请求。
404   （未找到） 服务器找不到请求的网页。
408  （请求超时） 服务器等候请求时发生超时。
500   （服务器内部错误）  服务器遇到错误，无法完成请求。

原生ajax

原生ajax的工作流程是怎么样的？

要发一个ajax请求首先要创建XMLHttp对象

var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : 
new ActiveXObject("Microsoft.XMLHTTP")

其中，new ActiveXObject("Microsoft.XMLHTTP")是为了兼容ie5/6的对象

然后调用对象的open方法来规定请求的类型、URL 以及是否异步处理请求

xmlhttp.open("GET","localhost:3000/package.json",true)

如果你async字段写的true，也就是发起的是异步请求，那么要写onreadystatechange事件来监听请求的
状态，每当 readyState 属性改变时，就会调用该函数

onreadystatechange函数实例，主要就是根据readyState和status的判断来处理返回的responseText

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

最后调用send将请求发给服务器

如果是get请求，参数是在url后面直接添加的

如果想自定义header的字段，可以在发送之前用setRequestHeader(header,value)向请求添加http头