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

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

解决方法

好以下是如何在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",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);