如何使AJAX請求發佈JSON數據並處理響應

Question

我需要將JSON數據發佈到URL並處理也是JSON數據的響應。我如何使用香草JavaScript來做到這一點，即沒有第三方庫？我還需要設置請求標題。請有人給我舉例說明如何做到這一點？

Answer 1

確定這裏是如何使GET和香草POST請求的JavaScript，即沒有第三方庫如jQuery，包括如何設置請求頭：

// Just to namespace our functions and avoid collisions 
var _SU3 = _SU3 ? _SU3 : new Object(); 

// Does a get request 
// url: the url to GET 
// callback: the function to call on server response. The callback function takes a 
// single arg, the response text. 
_SU3.ajax = function(url, callback){ 
    var ajaxRequest = _SU3.getAjaxRequest(callback); 
    ajaxRequest.open("GET", url, true); 
    ajaxRequest.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 
    ajaxRequest.send(null); 
}; 

// Does a post request 
// callback: the function to call on server response. The callback function takes a 
// single arg, the response text. 
// url: the url to post to 
// data: the json obj to post 
_SU3.postAjax = function(url, callback, data) { 
    var ajaxRequest = _SU3.getAjaxRequest(callback); 
    ajaxRequest.open("POST", url, true); 
    ajaxRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
    ajaxRequest.setRequestHeader("Connection", "close"); 
    ajaxRequest.send("data=" + encodeURIComponent(data));  
}; 

// Returns an AJAX request obj 
_SU3.getAjaxRequest = function(callback) { 

    var ajaxRequest; 

    try { 
     ajaxRequest = new XMLHttpRequest(); 
    } catch (e) { 
     try { 
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch (e) { 
      try { 
       ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (e){ 
       return null; 
      } 
     } 
    } 

    ajaxRequest.onreadystatechange = function() { 
     if (ajaxRequest.readyState == 4) {  
      // Prob want to do some error or response checking, but for 
      // this example just pass the responseText to our callback function 
      callback(ajaxRequest.responseText); 
     } 
    }; 


    return ajaxRequest; 

}; 

使用方法如下：

function processResponse(responseText) { 
    // Response text is a json: 
    var obj = JSON.parse(responseText)  // won't work all browsers, there are alternatives 
    // Do something with obj 
    .... 
} 

var jsonToPost = ....  // whatever your json is 
var url = ... // the URL to post to 

_SU3.postAjax(url, processResponse, jsonToPost);