Scribd
Upload
24 views20 pages

Unit3 4

Uploaded by

shreya tiwari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
24 views20 pages

Unit3 4

Uploaded by

shreya tiwari
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 20

Web Technology

Unit III
AJAX
• AJAX stands for Asynchronous JavaScript and XML. It is not a
technology in itself, but rather a suite of technologies. The
combination of JavaScript and XML allows for a responsive user
interface.
• Ajax is a group of technologies that provide asynchronous two-way
communication between a server and the web browser.
Asynchronous communication allows the user to continue to browse
the web page as sections of it are being loaded. This also allows the
page to display new and updated information without refreshing the
page.
AJAX
• Creating an Ajax request requires three sections of code, the first
section is writing in HTML, the second writing in JavaScript and
the third is a server script writing PHP. Each section of code
provides a different portion of the Ajax request, if the request is
missing any of the sections it will fail.
• AJAX is an acronym for Asynchronous JavaScript and XML. It
is not a technology in itself, but rather a suite of technologies.
The combination of JavaScript and XML allows for a responsive
user interface.
AJAX

• Makes interactive web pages by providing a way for the web page to
interact with the server
• AJAX is a framework
Synchronous Web Application Model:
Asynchronous Web Application Model: AJAX
How AJAX works
1. A JavaScript function creates and configures an XMLHttpRequest
object on the client, and specifies a JavaScript callback function.
2. The XMLHttpRequest object makes an asynchronous call to the web
server.
3. The web server processes the request and returns an XML document
that contains the result.
4. The XMLHttpRequest object calls the callback function and exposes
the response from the web server so that the request can be
processed.
5. The client updates the HTML DOM representing the page with the
new data.
How AJAX works
There is a 5-step approach for the browser to work with
AJAX:

1. Initialize the XMLHttpRequestObject


2. Opening the connection to the remote server side script.
3. Define the function handler
4. Send the request back to the server
5. Receive the data from the server through the handler.
XMLHttpRequest
It performs following operations:
• Sends data from the client in the background
• Receives the data from the server
• Updates the webpage without reloading it.
The XMLHttpRequest object

• The XMLHttpRequest object is the backbone of every Ajax method.


Each application requires the creation of one of these objects.
• As with most things in web programming, this depends upon the web
browser that the client is using because of the different ways in which
the object has been implemented in the browsers.
<script type="text/javascript">
ajaxRequest = new XMLHttpRequest();
</script>
XMLHttpRequest object properties
• readyState : An integer from 0. . .4. (0 means the call is uninitialized, 4
means that the call is complete.)
• Onreadystatechange: Determines the function called when the objects
readyState changes.
• responseText:Data returned from the server as a text string (read-only).
• responseXML: Data returned from the server as an XML document
object (read-only).
• Status: HTTP status code returned by the server
• statusText: HTTP status phrase returned by the server
Cont..
• We use the readyState to determine when the request has been
completed, and then check the status to see if it executed without an
error.
XMLHttpRequest object methods
• open('method', 'URL', asyn):Specifies the HTTP method to be used(GET or
POST as a string, the target URL, and whether or not the request should
be handled asynchronously (asyn should be true or false, if omitted, true
is assumed).
• send(content): Sends the data for a POST request and starts the request, if
GET is used you should call send(null).
• setRequestHeader('x','y'): Sets a parameter and value pair x=y and assigns
it to the header to be sent with the request.
• getAllResponseHeaders(): Returns all headers as a string.
• getResponseHeader(x): Returns header x as a string.
• abort(): Stops the current operation.
Properties of XMLHttpRequest
 Property 1: objXMLHttp.onreadystatechange

This property holds the reference of function which is going to


process the response from the server.

objXMLHttp.onreadystatechange = procRequest;

* "procRequest " is the function which will process the response


Property 2 : objXMLHttp. readyState

This property holds the status of server response.

objXMLHttp.readyState = [state];

State Description
Property 3: objXMLHttp.responseText
This property retrieves the data sent back from server.
var objVal = objXMLHttp. responseText;

While the responseText is used to return text ,


responseXML can be used to return an XML document object.
var xmlDoc;
xmlDoc = objXMLHttp.responseXML.documentElement
Validation Logic
Technologies
• JavaScript – for binding everything together.
• HTML & Cascading Style Sheets (CSS), for presentation and to
provide style classes for the component styling.
• XMLHttpRequest – provides asynchronous data retrieval.
• Document Object Model (DOM), for dynamic display and
interaction and provides a tree structure for the components placed in
the web page.
• Extensible Markup Language (XML), Format to send data from
client to server, though other formats like JSON may also be used.
Live example of AJAX:
• Google talk
• Google suggest
• Gmail

You might also like