如何发出AJAX请求来发布JSON数据并处理响应

Question

我需要将JSON数据发布到URL并处理响应，这也是JSON数据。 如何使用vanilla javascript，即没有第三方库？ 我还需要设置请求标头。 请有人给我一个如何做到这一点的例子？

Answer 1

OK以下是如何在vanilla javascript中生成GET和POST请求，即没有像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);