Latest web development tutorials

AJAX - sending a request to the server

XMLHttpRequest object to exchange data with the server.

Sends a request to the server

To send a request to the server, we use the XMLHttpRequest object's open () and send () method:

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

method description
open(method, url, async)

Type specifies the request, URL and whether asynchronous processing of requests.

  • method:the type of request; GET or POST
  • url:the location of the file on the server
  • async: true (asynchronous)or false (synchronous)
send(string)

Sends a request to the server.

  • string:only for POST requests

GET or POST?

Compared with the POST, GET easier and faster, and in most cases can be used.

However, in the following cases, please use the POST request:

  • Unable to use the cache files (files or update the database on the server)
  • Send large amounts of data (POST does not limit the amount of data) to the server
  • When sending the user input contains unknown characters, POST is more stable and more reliable than GET

GET request

A simple GET request:

Examples

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

try it"

In the example above, you might get the cached results.

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

Examples

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

try it"

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

Examples

xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
xmlhttp.send();

try it"

POST request

A simple POST request:

Examples

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

try it"

If you need that data as an HTML form POST, use setRequestHeader () to add HTTP headers. Then specify that you want to send data in the send () method:

Examples

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

try it"

方法 描述
setRequestHeader(header,value)

向请求添加 HTTP 头。

  • header: 规定头的名称
  • value: 规定头的值

url - files on the server

urlargument open () method is the address of the file server:

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

The file can be any type of file, such as .txt and .xml, or server script files, such as .asp and .php (prior to return a response, to perform tasks on the server).

Asynchronous - True or False?

AJAX means asynchronous JavaScript and XML (Asynchronous JavaScript and XML).

If you want to use AJAX XMLHttpRequest object, then, async parameter whose open () method must be set to true:

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

For web developers, send an asynchronous request is a huge step forward. In the server to perform many tasks are very time consuming. Before AJAX occur, which may cause the application to hang or stop.

Through AJAX, JavaScript without waiting for the server's response, but:

  • Other scripts execute while waiting for response from the server
  • When the response is ready to respond to process

Async = true

When using async = true, please provisions in response to events in onreadystatechange readiness to perform a function:

Examples

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

try it"

You will learn more about the onreadystatechange content in a later chapter.

Async = false

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

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

We do not recommend using async = false, but for some small request, is also possible.

Remember, JavaScript will wait until the server response is ready to proceed. If the server is busy or slow, or stop the application hangs.

Note: When you use the async = false, please do not write onreadystatechange function - put the code into the send () back to the statement:

Examples

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

try it"