AJAX-send requests to the server (sorting)

The XMLHttpRequest object is used to exchange data with the server.

Send a request to the server

To send requests to the server, use the open () and send () Methods of the XMLHttpRequest object:

xmlhttp.open("GET","test1.txt",true);xmlhttp.send();

Method
Description

Open (Method,Url,Async)

Specifies the request type, URL, and whether to asynchronously process the request.

• Method: Request type; GET or POST
• Url: File location on the server
• Async: True (asynchronous) or false (synchronous)

Send (String)

Send the request to the server.

• String: Used only for POST requests

GET or POST?

GET is simpler and faster than POST, and can be used in most cases.

However, use POST requests in the following cases:

• Unable to use cached files (updating files or databases on the server)
• Send large amounts of data to the server (there is no limit on the size of POST data)
• When sending user input containing unknown characters, POST is more stable and reliable than GET.

GET request

A simple GET request:

xmlhttp.open("GET","demo_get.asp",true);xmlhttp.send();

In the preceding example, you may obtain the cached result.

To avoid this situation, add a unique ID to the URL:

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);xmlhttp.send();

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

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);xmlhttp.send();

POST request

A simple POST request:

xmlhttp.open("POST","demo_post.asp",true);xmlhttp.send();

To POST data like an HTML form, use setRequestHeader () to add an HTTP header. Then specify the data you want to send in the send () method:

xmlhttp.open("POST","ajax_test.asp",true);xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("fname=Bill&lname=Gates");

Method
Description

SetRequestHeader (Header,Value)

Add an HTTP header to the request.

• Header: Name of the specified Header
• Value: Specifies the header value.

Url-files on the server

Open () methodUrlThe parameter is the address of the file on the server:

xmlhttp.open("GET","ajax_test.asp",true);

This file can be of any type, such. txt and. xml, or server script files, such. asp and. php (the task can be executed on the server before the response is returned ).

Asynchronous-True or False?

AJAX refers to Asynchronous JavaScript and XML (Asynchronous JavaScript and XML ).

If the XMLHttpRequest object is used for AJAX, The async parameter of its open () method must be set to true:

xmlhttp.open("GET","ajax_test.asp",true);

For web developers, sending asynchronous requests is a huge improvement. Many tasks executed on the server are time-consuming. Before AJAX appears, this may cause the application to be suspended or stopped.

Through AJAX, JavaScript does not need to wait for the server's response, but rather:

• Execute other scripts while waiting for Server Response
• Process the response when the response is ready

Async = true

When async = true is used, specify the function to be executed when the response is in the ready state of the onreadystatechange event:

xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }xmlhttp.open("GET","test1.txt",true);xmlhttp.send();

You will learn more about onreadystatechange in a later chapter.

Async = false

To use async = false, change the third parameter in the open () method to false:

xmlhttp.open("GET","test1.txt",false);

We do not recommend the use of async = false, but for some small requests, it is also possible.

Remember, JavaScript will not continue until the server is ready for response. If the server is busy or slow, the application will be suspended or stopped.

Note: When you use async = false, do not write the onreadystatechange function-put the code after the send () Statement:

xmlhttp.open("GET","test1.txt",false);xmlhttp.send();document.getElementById("myDiv").innerHTML=xmlhttp.responseText;