Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I pass along variables with XMLHTTPRequest

How do I send variables to the server with XMLHTTPRequest? Would I just add them to the end of the URL of the GET request, like ?variable1=?variable2=, etc?

So more or less:

XMLHttpRequest("GET", "blahblah.psp?variable1=?" + var1 + "?variable2=" + var2, true) 
like image 346
Steven Matthews Avatar asked Nov 09 '11 11:11

Steven Matthews


People also ask

How do I post in XMLHttpRequest?

The XMLHttpRequest method send() sends the request to the server. If the request is asynchronous (which is the default), this method returns as soon as the request is sent and the result is delivered using events. If the request is synchronous, this method doesn't return until the response has arrived.

What is the correct XMLHttpRequest open () method format?

The async parameter of the open() method should be set to true: xhttp.

How can request content type be set to XML via XMLHttpRequest?

setRequestHeader('Content-Type', 'application/json') ; is added 1 line above or below the Accept header, the method used changes to OPTIONS, the Accept header changes to "text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8" and the Content-Type header disappears as if it wasn't seen.


2 Answers

If you want to pass variables to the server using GET that would be the way yes. Remember to escape (urlencode) them properly!

It is also possible to use POST, if you dont want your variables to be visible.

A complete sample would be:

var url = "bla.php"; var params = "somevariable=somevalue&anothervariable=anothervalue"; var http = new XMLHttpRequest();  http.open("GET", url+"?"+params, true); http.onreadystatechange = function() {     if(http.readyState == 4 && http.status == 200) {         alert(http.responseText);     } } http.send(null); 

To test this, (using PHP) you could var_dump $_GET to see what you retrieve.

like image 96
TJHeuvel Avatar answered Sep 28 '22 20:09

TJHeuvel


Manually formatting the query string is fine for simple situations. But it can become tedious when there are many parameters.

You could write a simple utility function that handles building the query formatting for you.

function formatParams( params ){   return "?" + Object         .keys(params)         .map(function(key){           return key+"="+encodeURIComponent(params[key])         })         .join("&") } 

And you would use it this way to build a request.

var endpoint = "https://api.example.com/endpoint" var params = {   a: 1,    b: 2,   c: 3 }  var url = endpoint + formatParams(params) //=> "https://api.example.com/endpoint?a=1&b=2&c=3" 

There are many utility functions available for manipulating URL's. If you have JQuery in your project you could give http://api.jquery.com/jquery.param/ a try.

It is similar to the above example function, but handles recursively serializing nested objects and arrays.

like image 23
James Forbes Avatar answered Sep 28 '22 20:09

James Forbes