XMLHttpRequest将数据发送到哪里？

Question

I tried it like this but while the request was made it sent no data to the server.

 var data ={some:'data'};     
 var req = new XMLHttpRequest();
 req.open("GET", url, true);
 req.send(data);

Answer 1

The XHR has no built in method for converting an object to a querystring. Additionally, the send() method takes an argument as the request body (which is for POST data). GET requests have no request body, only the URL and headers

You could easily make a helper function to transform your object into a querystring like so:

function convertToQuery(data){
    var first = true, q = '', amp = '';
    for(var key in data){
        amp = first ? '' : '&';
        q += amp + key + '=' + encodeURIComponent(data[key]);
        first = false;
    }

    return q;
}


var data ={some:'data'};
var url = 'page.html?' + convertToQuery(data);
var req = new XMLHttpRequest();
req.open("GET", url, true);
req.send(null);

Answer 2

You can either pass data as arguments in the GET method doing this:

var data ={some:'data'};     
var req = new XMLHttpRequest();
req.open("GET", url + '?some=' + data.some, true);
req.send();

but notice that this is a weak solution since if you need to add more parameters in a near future you will need to edit this URL, also, the data is not properly escaped for the URL format (you should use the encodeURIComponent() function to properly escape every string).

A simple code snippet addressing this would be something like this:

function getEscapedURL(url, data) {
    url += "?";
    for(key in data) {
        url += (key + '=' + encodeURIComponent(data[key]) + '&'); 
    }
    return url;
}

if the data you are sending to the server is potentially considered to be sensitive (login, personal, financial, etc) you should use this approach.

Instead consider using the POST or PUT methods depending on the action. The GET method should be used to query for resources, data or information of the server (that's why is named the query string), while the POST and PUT should be used to submit sensitive information to the server.

Being that pointed out, you might want to consider doing the next approach:

var data ={some:'data'};     
var req = new XMLHttpRequest();
req.open("POST", url, true);
req.send(JSON.stringify(data));

In this approach you serialize the data into a JSON string that will be received by the server, the server then should parse it and use that data.