我需要将
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);