Ajax Basics Tutorial: Sending requests to the server

In the previous article we described how to create a XMLHttpRequest object using JavaScript, which is described in this article to send a request using XMLHttpRequest.

There are two ways to send data to a server: open () and send ()

Open (Method,url,async): Specifies the type of request, the URL, and whether the request is processed asynchronously.

Parameter description:

• Method: type of request; GET or POST
• URL: The location of the file on the server
• Async:true (asynchronous) or false (synchronous)

Send (String): sends the request to the server.

Parameter description:

• String: Only for POST requests

In the open method, we need to specify the type of request, the common request type has get, post, etc., then when to use get, when should use post?

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

However, use the POST request in the following cases:

• Unable to use cache file (update file or database on server)
• Send a large amount of data to the server (POST has no data volume limit)
• Post is more stable and more reliable than GET when sending user input with unknown characters

If you need 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.

setRequestHeader (header,value): adds an HTTP header to the request.

Parameter description:

• Header: Name of the specified header
• Value: The values of the specified header

Example code:

true ); Xmlhttp.setrequestheader ("Content-type", "application/x-www-form-urlencoded"); Xmlhttp.send ( "Fname=bill&lname=gates");

Synchronous or asynchronous?

Ajax refers to asynchronous Ajax and XML, but the open method can specify that the request is synchronous or asynchronous, which gives the developer a flexible option.

The async parameter of the open () method must be set to True if the XMLHttpRequest object is to be used with AJAX:

true);

For Web developers, sending asynchronous requests is a huge step forward. Many tasks performed on the server are quite time consuming. This may cause the application to hang or stop before AJAX occurs.

Instead of waiting for a response from the server, Ajax,javascript does:

• Execute additional scripts while waiting for the server to respond
• Handle responses when they are ready

Callback methods for asynchronous requests

Using the synchronous request processing method is simple, we can get XMLHttpRequest's response directly after the Send method:

false ); Xmlhttp.send ();d Ocument.getelementbyid ("mydiv"). InnerHTML = Xmlhttp.responsetext;

However, for asynchronous requests, it is not feasible to get response directly after the Send method, because the server has not returned the data at this time. At this point, we need to add the onReadyStateChange event for XMLHttpRequest, which will monitor changes in the XMLHttpRequest state, and we can get response data when the request is detected successfully.

function () {    if (xmlhttp.readystate = = 4 && xmlhttp.status = =) {        document.getElementById ("mydiv"). InnerHTML = xmlhttp.responsetext;    }} Xmlhttp.open (true); Xmlhttp.send ();

We'll cover readystate and status in more detail in the next article.

Ajax Basics Tutorial: Sending requests to the server