JavaScript的AJAX请求，而不框架

Question

有谁知道如何使工作跨浏览器，而使用像jQuery等JavaScript框架Ajax请求的功能？

Answer 1

的XMLHttpRequest对象实际上并不是那么复杂使用。为了广泛兼容，您必须玩一些游戏来创建对象，但在此之后，对于简单操作来说相当简单。

微软对MSDN page for XMLHttpRequest例子，包括一种在支持IE的早期版本跨浏览器的方式创建该对象的功能。下面是他们的榜样：

function getXMLHttpRequest() 
{ 
    if (window.XMLHttpRequest) { 
     return new window.XMLHttpRequest; 
    } 
    else { 
     try { 
      return new ActiveXObject("MSXML2.XMLHTTP.3.0"); 
     } 
     catch(ex) { 
      return null; 
     } 
    } 
} 

function handler() 
{ 
    if (oReq.readyState == 4 /* complete */) { 
     if (oReq.status == 200) { 
      alert(oReq.responseText); 
     } 
    } 
} 

var oReq = getXMLHttpRequest(); 

if (oReq != null) { 
    oReq.open("GET", "http://localhost/test.xml", true); 
    oReq.onreadystatechange = handler; 
    oReq.send(); 
} 
else { 
    window.alert("AJAX (XMLHTTP) not supported."); 
} 

我并不是说上述例证了最佳实践（微软似乎也有自己的MSDN例子很大程度上是由非常，非常缺乏经验的工程师写的），但它给你一个起点。例如，在上述要求的响应状态是200成功，其中当然HTTP规范清楚的是任何内容200 < = N < = 299范围是“成功”。

Answer 2

我经常使用的现代浏览器中发送和接收只JSON这种方法（不老IE的）

function aj(method, url, data, cb){ 

    var xhr = new XMLHttpRequest(); 
    xhr.onreadystatechange = readystatechange; 
    xhr.open(method, url); 
    xhr.setRequestHeader('Content-Type', 'application/json'); 
    xhr.send(data && JSON.stringify(data)); 

    function readystatechange(){ 
     if(this.readyState === this.DONE) { 

      switch(this.status){ 
       case 200: 
       if(this.getResponseHeader('Content-Type').split(';')[0] !== 'application/json'){ 
        return cb("unexpected Content-Type: '" + this.getResponseHeader('Content-Type') + "'", null); 
       } 
       return cb(null, JSON.parse(this.response)); 

       case 401: 
       location.href = '/authentication/login'; 
       return; 

       default: 
       return cb("unexpected status: " + this.status + "", null); 
      } 
     } 
    }//readystatechange 
}