WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AJAX - Send a Request To a Server


The XMLHttpRequest object is utilized to trade information with a server.


Send a Request To a Server

To send a demand to a server, we utilize the open() and send() strategies for the XMLHttpRequest object:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Method Description
open(method, url, async) Specifies the sort of request

method: the sort of demand: GET or POST
url: the server (file) location
async: genuine (nonconcurrent) or false (synchronous)
send() Sends the demand to the server (utilized for GET)
send(string) Sends the demand to the server (utilized for POST)

GET or POST?

GET is easier and quicker than POST, and can be utilized in most cases.

However, dependably use POST asks for when:

  • A stored record isn't an alternative (refresh a document or database on the server).
  • Sending a lot of information to the server (POST has no size limitations).
  • Sending client input (which can contain obscure characters), POST is more hearty and secure than GET.

GET Requests

A straightforward GET request:

Example

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

In the precedent above, you may get a reserved outcome. To keep away from this, add a special ID to the URL:

Example

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

If you need to send data with the GET technique, add the data to the URL:

Example

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

POST Requests

A basic POST request:

Example

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

To POST information like a HTML structure, include a HTTP header with setRequestHeader(). Indicate the information you need to send in the send() method:

Example

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

Method Description
setRequestHeader(header, value) Adds HTTP headers to the request

header: indicates the header name
value: indicates the header value

The url - A File On a Server

The url parameter of the open() technique, is a location to a record on a server:

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

The record can be any sort of document, as .txt and .xml, or server scripting records like .asp and .php (which can perform activities on the server before sending the reaction back).


Asynchronous - True or False?

AJAX represents Asynchronous JavaScript and XML, and for the XMLHttpRequest article to carry on as AJAX, the async parameter of the open() technique must be set to true:

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

Sending offbeat solicitations is an immense improvement for web engineers. A considerable lot of the errands performed on the server are very tedious. Prior to AJAX, this task could cause the application to hang or stop.

With AJAX, the JavaScript does not need to hang tight for the server reaction, yet can instead:

  • execute different contents while hanging tight for server response
  • deal with the reaction when the reaction ready

Async=true

When utilizing async=true, indicate a capacity to execute when the reaction is prepared in the onreadystatechange event:

Example

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

Async=false

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

xhttp.open("GET", "ajax_info.txt", false);

Using async=false isn't suggested, however for a couple of little demands this can be ok.

Remember that the JavaScript won't keep on executing, until the server reaction is prepared. In the event that the server is occupied or moderate, the application will hang or stop.

Note: When you use async=false, don't compose an onreadystatechange work - simply put the code after the send() statement:

Example

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