javascript 如何发出 AJAX 请求以发布 JSON 数据并处理响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5350377/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make an AJAX request to post JSON data and process the response
提问by goutham
I need to post JSON data to an URL and process the response which is also JSON data. How can I do this using vanilla javascript, i.e with no third-party libraries? I also need to set request headers. Please could someone give me an example on how to do this?
我需要将 JSON 数据发布到 URL 并处理也是 JSON 数据的响应。我怎样才能使用 vanilla javascript 做到这一点，即没有第三方库？我还需要设置请求标头。请有人能给我一个关于如何做到这一点的例子吗？
回答by Richard H
OK Here is how to make both GET and POST requests in vanilla javascript, i.e no third-party libraries like jQuery, including how to set request headers:
好的 这是如何在 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;
};
Use it like this:
像这样使用它：
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);
