Work to Learn

My Repository of Longitudinal Work. Happy Learning!

AJAX Introduction | Web Development

AJAX : Asynchronous JavaScript and XML, is not a new programming language rather a web development technique which helps in updating a part of the webpage without reloading the whole page. It helps in creating dynamic webpage.

Prerequisite: Before starting AJAX one should have basic understanding of following

  • HTML
  • JavaScript

You don’t need to know XML to learn AJAX though AJAX stands for Asynchronous JavaScript and XML.

AJAX is based on internet standards and it uses XMLHttpRequest object.  XMLHtteRequest object is used to exchange data with servers behind the web screens, which helps in updating a part of web page without actually reloading the whole page.

Syntax for Creating XMLHttpRequest object:

var http_variable = new XMLHttpRequest();

Here, “var” is a JavaScript keyword used to declare variables. “http_variable” is JavaScript variable of type XMLHttpRequest  object.

Like other object XMLHttpRequest object too have few functions which can be used to perform specific tasks.

As we read earlier AJAX is capable of communicating with server, and its functions or methods OPEN() and SEND() helps it in doing this.

AJAX sends request to server with the help of this function and then waits for the response from the server. And once it gets the response then you can execute other codes. OPEN() and SEND() methods helps in sending the request to the server.

Sending Request to Server

To send a request to server with the help of AJAX we use open() and send() function.

http_variable.open(GET, “example.com/testing.php”, true);

http_variable.send();

  • The 1st parameter of OPEN() method defines the type of request GET or POST, same as FORM tag in HTML.
  • The 2nd parameter defines the server file location, and
  • The 3rd parameter defines whether the connection is asynchronous (true) or synchronous(false).

If the 3rd method is set as false which is synchronous, the JavaScript codes execution stops till the time server responds. And when the server responds the codes next to line SEND() method starts executing.

And when the 3rd Method is set as true which is asynchronous, we have to specify a function which gets executed when the server is ready to respond in onreadystatechange event.  The server response text is carried to page by variable “http_variable.responseText“.

With AJAX, the JavaScript does not have to wait for the server response, but can instead:

  • execute other scripts while waiting for server response
  • deal with the response when the response ready

Function which will get executed when the server responds in asynchronous mode:

xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
// Action to be performed when the document is read;
}
};

The example above demonstrates the creation and usage of an XMLHttpRequest object. First, the object is created and then an event handler (anonymous function) is assigned to the onreadystatechange event. The onreadystatechange event is triggered every time the readyState changes and the function is executed. The readyState property holds the status of the XMLHttpRequest.

Status Values for readyState
  • 0. request not initialized
  • 1. server connection established
  • 2. request received
  • 3. processing request
  • 4. request finished and response is ready

When the readyState changes to 4 and the status of the response is 200,you know that you have successfully received a response from the XML file request.

Status takes following two values :

  • 200: “OK”
  • 404: Page not found

Server Responce

For all our request server responds and the response is stored in response variables, responseText and responseXML.

  • responceText : gets the response data as text, so if the responce from the server is not test and not XML user responseText variable. The responce text property responce the data as string. document.getElementById(“demo”).innerHTML = xhttp.responseText;
  • responseXML: gets the response data as XML

This is all we need to know to start working with AJAX.

what we have learnt here is only for requesting the data from the server and then accepting the reply from the server. And not how the server will accept the request and provide the reply. We ca use PHP and other server side scripting language to handle this.

Please let me know via comment if you have any query or want to add any information here.

Work to learn and sharing knowledge is fun.

%d bloggers like this: