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 
}