Cách thực hiện yêu cầu AJAX để đăng dữ liệu JSON và xử lý phản hồi

Question

Tôi cần đăng dữ liệu JSON vào URL và xử lý phản hồi cũng là dữ liệu JSON. Làm cách nào tôi có thể thực hiện việc này bằng javascript vani, tức là không có thư viện của bên thứ ba? Tôi cũng cần đặt tiêu đề yêu cầu. Xin vui lòng ai đó có thể cho tôi một ví dụ về cách làm điều này?

Answer 1

OK Sau đây là cách để làm cho cả hai GET và POST yêu cầu trong vani javascript, tức là không có thư viện của bên thứ ba như jQuery, bao gồm cách thiết lập theo yêu cầu tiêu đề:

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

}; 

Sử dụng nó như thế này:

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