我需要将
JSON数据发布到URL并处理响应,这也是JSON数据.如何使用vanilla javascript,即没有第三方库?我还需要设置请求标头.请有人给我一个如何做到这一点的例子?
解决方法@H_404_4@
好以下是如何在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;
};
像这样使用它:@H_301_9@
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);
// 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; };
像这样使用它:@H_301_9@
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);