如何使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);