Come effettuare una richiesta AJAX per postare dati JSON ed elaborare la risposta

Question

Ho bisogno di postare dati JSON in un URL ed elaborare la risposta che è anche dati JSON. Come posso farlo usando vanilla javascript, cioè senza librerie di terze parti? Devo anche impostare le intestazioni delle richieste. Per favore qualcuno potrebbe darmi un esempio su come farlo?

Answer 1

OK Ecco come fare sia richieste GET e POST in vaniglia javascript, cioè non librerie di terze parti, come jQuery, inclusa la configurazione intestazioni di richiesta:

// 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; 

}; 

usare in questo modo:

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);