Multimedia and Advance Web Technologies

By:

Dr. Mohammad Shoab

Week 12

What is Ajax?

• Asynchronous Javascript And XML
• AJAX is about updating parts of a web page, without reloading the whole page.
• AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

​

​

Multimedia and Advance Web Technologies

Department of Computer Science

What is so cool about Ajax?

• Connection between client side script and server side script.
• Better user experience
• More flexibility
• More options

Multimedia and Advance Web Technologies

Department of Computer Science

How does Ajax work?

• A client script asynchronously calls a server side function.
• The keystone of AJAX is the XMLHttpRequest object.

Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways.

Ajax incorporates:

• standards-based presentation using XHTML and CSS;
• dynamic display and interaction using the Document Object Model;
• data interchange and manipulation using XML and XSLT;
• asynchronous data retrieval using XMLHttpRequest;
• and JavaScript binding everything together.

​

Multimedia and Advance Web Technologies

Department of Computer Science

Classic VS Ajax

Multimedia and Advance Web Technologies

Department of Computer Science

How is Ajax Different?

• An Ajax application eliminates the start-stop-start-stop nature of interaction on the Web by introducing an intermediary — an Ajax engine — between the user and the server. It seems like adding a layer to the application would make it less responsive, but the opposite is true.
• Instead of loading a webpage, at the start of the session, the browser loads an Ajax engine — written in JavaScript and usually tucked away in a hidden frame. This engine is responsible for both rendering the interface the user sees and communicating with the server on the user’s behalf. The Ajax engine allows the user’s interaction with the application to happen asynchronously — independent of communication with the server. So the user is never staring at a blank browser window and an hourglass icon, waiting around for the server to do something.

​

Multimedia and Advance Web Technologies

Department of Computer Science

Synchronous web communication

• synchronous: user must wait while new pages load
• the typical communication pattern used in web pages (click, wait, refresh)

CS380

7

Multimedia and Advance Web Technologies

Department of Computer Science

Asynchronous web communication

• asynchronous: user can keep interacting with page while data loads
• communication pattern made possible by Ajax

CS380

8

Multimedia and Advance Web Technologies

Department of Computer Science

The XMLHttpRequest Object

• The XMLHttpRequest object is used to exchange data with a server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
• All modern browsers support the XMLHttpRequest object.

​

• Syntax for creating an XMLHttpRequest object:

​

• variable = new XMLHttpRequest(); (for mordern browsers)

​

• variable = new ActiveXObject("Microsoft.XMLHTTP"); (for old browsers)

Multimedia and Advance Web Technologies

Department of Computer Science

Send a Request To a Server

• The XMLHttpRequest object is used to exchange data with a server.
• To send a request to a server, we use the open() and send() methods of the XMLHttpRequest object:

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

xhttp.send();

​

Multimedia and Advance Web Technologies

Department of Computer Science

Server Response

• To get the response from a server, use the responseText or responseXML property of the XMLHttpRequest object.

​

Multimedia and Advance Web Technologies

Department of Computer Science

The responseText Property

• If the response from the server is not XML, use the responseText property.

​

• The responseText property returns the response as a string, and you can use it accordingly:

​

• Example

document.getElementById("demo").innerHTML = xhttp.responseText;

​

Multimedia and Advance Web Technologies

Department of Computer Science

The responseXML Property

• If the response from the server is XML, and you want to parse it as an XML object, use the responseXML property:
• Example

Request the file cd_catalog.xml and parse the response:

​

xmlDoc = xhttp.responseXML;� txt = "";� x = xmlDoc.getElementsByTagName("ARTIST");� for (i = 0; i < x.length; i++) {�  txt += x[i].childNodes[0].nodeValue + "<br>";�  }� document.getElementById("demo").innerHTML = txt;

​

Multimedia and Advance Web Technologies

Department of Computer Science

AJAX - Events

The onreadystatechange event

• When a request to a server is sent, we want to perform some actions based on the response.
• The onreadystatechange event is triggered every time the readyState changes.
• The readyState property holds the status of the XMLHttpRequest.
• Three important properties of the XMLHttpRequest object:

​

Multimedia and Advance Web Technologies

Department of Computer Science

Simple Example

<!DOCTYPE html>

<html>

<body>

<h2>AJAX</h2>

<button type="button" onclick="loadDoc()">Request data</button>

<p id="demo"></p>

​

<script>

function loadDoc() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (xhttp.readyState == 4 && xhttp.status == 200) {

document.getElementById("demo").innerHTML = xhttp.responseText;

}

};

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

xhttp.send();

}

</script>

</body>

</html>

​

Multimedia and Advance Web Technologies

Department of Computer Science

The End

16

Multimedia and Advance Web Technologies

Department of Computer Science

Exercise

Q1. What is AJAX?

Q2. How AJAX works?

Q3. How AJAX is different?

Q4. Explain XMLHttpRequest object.

Q5. What are responseText and responseXML property?

Q6. Explain AJAX events.

17

Multimedia and Advance Web Technologies

Department of Computer Science

Q7. AJAX is about updating parts of a

1. Browser
2. Application
3. Operating System
4. Web Page

​

Q8. AJAX allows web pages to be updated

1. synchronously
2. asynchronously
3. statically
1. None of the above

​

18

Multimedia and Advance Web Technologies

Department of Computer Science

Q9. The keystone of AJAX is the

1. XMLHttpRequest object
2. XMLRequest object
3. XMLURLRequest object
4. None of the above

​

Q10. The responseText property returns the response as a

1. Integer
2. Float
3. Double
4. String

19

Multimedia and Advance Web Technologies

Department of Computer Science