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