Ajax - A Synchronous Javascript and XML

8/3/2019 Ajax - A Synchronous Javascript and XML

1/11

Ajax - Asynchronous JavaScript and XML

Viva : benefit over normal HTML or XML web application

Suppose in the registration form along with many details about the user

there is login name field which depends upon availability. Then on

submitting the form, the behavior for Html , if the login name value is notavailable would be :

For Ajax it would be : < all ready done in class >


2/11

Ajax is a combination of many technologies.

JavaScript: JavaScript is used to make a request to the web

server and process the response returned by the webserver.

Asynchronous Call to the Server:Ajax application use XMLHttpRequest object to send therequest to the web server. These calls are Asynchronous and

there is no need to wait for the response to come back. Usercan do the normal work without any problem.

XML:XML may be used to receive the data returned from the webserver. JavaScript can be used to process the XML datareturned from the web server easily.


3/11

How Ajax Works? ( pg 189)Dg :

< all ready done in class>

1> When user first visits the page, the Ajax engine is initialized and loaded.

2> From that point of time user interacts with Ajax engine to interact with the

web server.3> Ajax engine operates asynchronously.


4/11

AJAX Programming


5/11

// Create a function that will receive data sent from the serverajaxRequest.onreadystatechange = function(){

if(ajaxRequest.readyState == 4){document.myForm.time.value = ajaxRequest.responseText;

}

}

ajaxRequest.open("GET", "serverTime.php", true);

ajaxRequest.send(null); }

//-->

Name:

Time:


6/11

1> Explanation of Javascript code :We try three times to make our XMLHttpRequest object.

In first attempt:

ajaxRequest = new XMLHttpRequest();

is for the Opera 8.0+, Firefox and Safari browsers.

If that fails we try two more times to make the correct object for an Internet

Explorer browser with:

ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");

ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");>

If that doesn't work, then the browser is outdated and doesn't supportXMLHttpRequest, which also means it doesn't support Ajax.


7/11

2> Ajax - onreadystatechange Property

1>XMLHttpRequestobject has a special property called

onreadystatechange.

2> onreadystatechange stores the function that will process the response from

the server.

For eg : ajaxRequest.onreadystatechange = function(){// some code here to process server response

}


8/11

3> Ajax - readyState Property

TheXMLHttpRequestobject has another property called

readyState. This is where the status of our server's response is

stored. The response can be processing, downloading or

completed. Each time the readyState changes the

onreadystatechange function executes.

When the property readyState is 4 that means the response is

complete and we can get our data.

if(ajaxRequest.readyState == 4){

document.myForm.time.value = ajaxRequest.responseText;

}


9/11

4. Ajax - responseText Property

We can retrieve the server's response by using the responseTextproperty.

Eg : Javascript Code:

// Create a function that will receive data sent from the serverajaxRequest.onreadystatechange = function(){

if(ajaxRequest.readyState == 4){document.myForm.time.value = ajaxRequest.responseText; }

}

To access form inputs with Javascript :

document.FormName.InputName.value

W.r.t above code : document is the client page, myForm is the name of theform on the client page. The form may contain many text boxes, one ofthem is named as time. We are initializing its value to the response returnedby web server.


10/11

5. Ajax - Sending a Request for Information

Sending a request is comprised of two steps:

1> Specify the URL of server-side script that will be used in ourAjax application.( i.e open( ) connection)

2> Use the send function to send off the request.// Create a function that will receive data sent from the server

ajaxRequest.onreadystatechange = function(){if(ajaxRequest.readyState == 4){document.myForm.time.value = ajaxRequest.responseText; }}

ajaxRequest.open("GET", "serverTime.php", true);

// here serverTime.php is the server side application that is invoked fromthe client side. This application need not be coded. It is responsible forresponding the current system time.

ajaxRequest.send(null);


11/11

Viva : How to invoke Ajax function?

Ajax function can be invoked on an event.

For Eg : In above code , Ajax function is run after

the user enters the name. (by Using the onChange attribute )

Documents

Ajax - A Synchronous Javascript and XML