XHR request

How does AJAX work?

The XMLHttpRequest AJAX communicates with the server. L et's try to understand how AJAX works or how AJAX works in the images shown below.

As you can see in the example above, XMLHttpRequest an important role.

1. The user sends a request from the UI and XMLHttpRequest JavaScript
2. HTTP requests are XMLHttpRequest object.
3. Servers interact with databases PHP Servlet and more. JSP
4. Retrieving data.
5. The server XML JSON data XMLHttpRequest callback function.
6. HTML and CSS are displayed on the browser.

Send a request to the server

XMLHttpRequest used to exchange data with the server.

When all your pages are loaded, the client requests data from the server through XMLHttpRequest object, which receives the data and processes it.

To send a request to the server, we use the open() XMLHttpRequest send()

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

GET or POST?

GET is simpler and faster than POST and is available in most cases.

However, use post requests in the POST cases:

• Cache files cannot be used (update files or databases on the server)

• Sending large amounts of data to the server POST has no data limit)

• POST is more stable and reliable than GET when POST GET that contains unknown characters

GET request

A simple GET request:

In the example above, you might get cached results.

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

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

Tip: GET have several characteristics:

• GET can be cached
• GET requests remain in the browser history
• GET can be bookmarked
• GET should not be used when processing sensitive data
• GET have a length limit
• GET should only be used to get data back

POST request

A simple POST request:

If you HTML data POST forms, use setRequestHeader() to add http headers. Then specify the data you want to send in the send() method:

Tip: Post POST are characterized by the following:

• POST are not cached
• POST are not retained in the browser history
• POST cannot be bookmarked
• POST do not require data length

url - The file on the server

open() url 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 .txt .xml or a server script file, .asp and .php which can perform tasks on the server until the response is passed back.

Asynchronous - True or False?

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

XMLHttpRequest is to be AJAX the sync(async) parameter of its open() method must be set to true:

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

Sending asynchronous requests is a huge step forward for web developers. M any of the tasks performed on the server are time-time-0. This may cause the application to hang or stop before AJAX occurs.

With AJAX JavaScript wait for a response from the server, but instead:

• Other scripts are executed while waiting for the server to respond

• When the response is ready, the response is processed

Async=true

When async=true specify the functions that are executed when the response is ready in the onreadystatechange event:

You'll learn more about onreadystatechange section.

Async = false

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

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

We async=false but for small requests, it's also available.

Keep in mind that JavaScript waits until the server is ready to respond. If the server is busy or slow, the application hangs or stops.

Note: When you async=false do not onreadystatechange - just put the code after the send() statement:

AJAX XMLHttpRequest object, and we'll continue to learn about XHR chapter.