Cómo hacer una solicitud AJAX para publicar datos JSON y procesar la respuesta

Question

Necesito publicar datos JSON en una URL y procesar la respuesta que también es información JSON. ¿Cómo puedo hacer esto usando vainilla javascript, es decir, sin bibliotecas de terceros? También necesito configurar encabezados de solicitud. ¿Podría alguien darme un ejemplo sobre cómo hacer esto?

Answer 1

OK Aquí es cómo hacer tanto GET y POST peticiones de JavaScript básico, es decir, no hay bibliotecas de terceros como jQuery, incluyendo cómo configurar encabezados de la solicitud:

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

}; 

utilizar de esta manera:

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