The XMLHttpRequest object is used to exchange data with the server.
To send a request to the server, we use the open() and send() methods of the XMLHttpRequest object:
xmlhttp.open("GET","ajax_info.txt",true);xmlhttp.send();| method | describe |
|---|---|
| open( method , url , async ) | Specifies the type of request, the URL, and whether to handle the request asynchronously. method : type of request; GET or POST url : The location of the file on the server async : true (asynchronous) or false (synchronous) |
| send( string ) | Send the request to the server. string : only used for POST requests |
GET is simpler and faster than POST, and works in most situations.
However, use POST requests in the following situations:
Unable to use cached files (updating files or databases on the server)
Send large amounts of data to the server (POST has no data size limit)
POST is more stable and reliable than GET when sending user input containing unknown characters
A simple GET request:
In the above example, you may be getting cached results.
To avoid this, add a unique ID to the URL:
If you wish to send information via the GET method, add the information to the URL:
A simple POST request:
If you need to POST data like an HTML form, use setRequestHeader() to add HTTP headers. Then specify the data you wish to send in the send() method:
| method | describe |
|---|---|
| setRequestHeader( header,value ) | Add HTTP headers to the request. header : specifies the name of the header value : specifies the value of the header |
The url parameter of the open() method is the address of the file on the server:
xmlhttp.open("GET","ajax_test.html",true);The file can be any type of file, such as .txt and .xml, or a server script file, such as .asp and .php (which can perform tasks on the server before sending the response back).
AJAX refers to Asynchronous JavaScript and XML.
If the XMLHttpRequest object is to be used for AJAX, the async parameter of its open() method must be set to true:
xmlhttp.open("GET","ajax_test.html",true);For web developers, sending asynchronous requests is a huge improvement. Many tasks performed on the server are quite time consuming. Before AJAX, this could cause the application to hang or stop.
With AJAX, JavaScript does not need to wait for a response from the server, but instead:
Execute other scripts while waiting for server response
Process the response when it is ready
When using async=true, specify a function to be executed in response to the ready state in the onreadystatechange event:
You'll learn more about onreadystatechange in a later chapter.
If you want to use async=false, change the third parameter in the open() method to false:
xmlhttp.open("GET","test1.txt",false);We do not recommend using async=false, but for some small requests, it is possible.
Remember, JavaScript waits until the server response is ready before continuing. If the server is busy or slow, the application hangs or stops.
Note: When you use async=false, do not write the onreadystatechange function - just put the code after the send() statement: