AJAX Send Request

After creating an XMLHttpRequest object (refer to the previous chapter), we must send a request to the server.

Send a request to the server

To send a request to the server, we use two methods of the XMLHttpRequest object:

• open()

• send()

　　httpRequest.open("GET", "ajax_intro.txt", true);
　　httpRequest.send();

The open() method accepts three parameters:

• The first parameter is the HTTP request method-GET, POST

• The second parameter is the URL to which you will send the request

• The optional third parameter sets whether the request is asynchronous (default is true)

The send() method accepts an optional parameter:

• For GET requests, do not pass any values

• For POST requests, passname=valueto

HTTP requests: GET vs POST?

InGETIn the method, the browser will take the form content (name/Add the key-value pairs) to the end of the URL.

GET is usually used for simple forms that do not concern about security. GET provides many advantages for simple forms.

• GET requests can be cached

• GET requests are retained in the browser history

• GET requests can add bookmarks

• Never use GET requests when handling sensitive data

• GET requests have a length limit (only2048characters)

InPOSTIn the method, the content will not be displayed in the URL.

Always use POST if the form data contains sensitive information or personal information.

• POST requests will never be cached

• POST requests will not be retained in the browser history

• POST requests cannot add bookmarks

• Use POST requests when handling sensitive data

• There is no length limit for data in POST requests

GET request

The following example shows how to send a simple Ajax GET request using JavaScript:

httpRequest.open("GET", "ajax_get.php", true);
httpRequest.send();

In the above example, you may get cached results. To avoid this, add a random number to the URL:

httpRequest.open("GET", "ajax_get.php?r="　+　Math.random(), true);
httpRequest.send();

If you want to send information using the GET method, add the information to the URL:

httpRequest.open("GET", "ajax_get.php?fname=Seagull&lname=Anna", true);
httpRequest.send();

POST request

The following example shows how to send a simple Ajax POST request using JavaScript:

httpRequest.open("POST", "ajax_post.php", true);
httpRequest.send();

If you want to send information using the POST method, use the setRequestHeader() to set the HTTP headers and specify the data to be sent in the send() method:

httpRequest.open("POST", "ajax_post.php", true);
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded);
httpRequest.send("fname=Seagull&lname=Anna");

The setRequestHeader() method accepts two parameters:

• The first parameter specifies the name of the header

• The second parameter specifies the value of the header

URL-File on the server

The second parameter (url) of the method open() is the address of the file on the server.

　　httpRequest.open("GET", "ajax_get.php", true);

AJAX can send and receive various formats of information, including JSON, XML, HTML, PHP, ASP, text, and more.

onreadystatechange Property

The XMLHttpRequest object allows you to define functions to be executed to handle the response.

The onreadystatechange response function is defined in the properties of the XMLHttpRequest object.

httpRequest.onreadystatechange = function() {
　　if (this.readyState ===　4　&& this.status ===　200) {
　document.getElementById("output").innerHTML = this.responseText;
　　}
};

You will learn more about the onreadystatechange property later in this tutorial.

Synchronous Request

The third parameter of the method open() specifies whether the request isAsynchronousorSynchronous.

To sendSynchronousTo send a request, change the third parameter of the open() method tofalse.

If you useSynchronousIf you do not specify a response function, the request is made:

var httpRequest = new XMLHttpRequest();
httpRequest.open("GET", "ajax_intro.txt", false);
httpRequest.send();
document.getElementById("output").innerHTML = httpRequest.responseText;

Not RecommendedSynchronousRequest, because:

• JavaScript will stop executing until the server response is ready

• If the server is busy or slow, the application will hang or stop

• Brings a Poor User Experience