Ajax Lecture Notes

A New Way To WebA New Way To Web
Applications DevelopmentApplications Development
AJAXAJAX
Mrs.C.SanthiyaMrs.C.Santhiya
Assistant ProfessorAssistant Professor
TCE,MaduraiTCE,Madurai

RIA ExRIA Ex
Rich Internet Application (RIA) likesRich Internet Application (RIA) likes
following ?following ?

Client-Side ProgrammingClient-Side Programming
Recall the technologies comprisingRecall the technologies comprising DHTMLDHTML
1.1. HTML (HTML (contentcontent))
2.2. Document Object Model (DOM) (Document Object Model (DOM) (data structuredata structure))
3.3. JavaScript (JavaScript (behaviourbehaviour))
4.4. Cascading Style Sheets (Cascading Style Sheets (presentationpresentation))

JavaScriptJavaScript is a powerful tool for dynamic client-side programmingis a powerful tool for dynamic client-side programming

How does AJAX work?How does AJAX work?
• AJAXAJAX uses a programming model withuses a programming model with displaydisplay andand eventsevents..
• These events areThese events are user actionsuser actions, they call, they call functionsfunctions associatedassociated
withwith elements of the web pageelements of the web page..
• InteractivityInteractivity is achieved withis achieved with formsforms andand buttonsbuttons..
• DOMDOM allows to link elements of the page withallows to link elements of the page with actionsactions and also toand also to
extract data fromextract data from XMLXML or Text files provided by the server.or Text files provided by the server.

Classic Web Application ModelClassic Web Application Model

Classic Web Application ModelClassic Web Application Model
Do not work well for some webDo not work well for some web
applications.applications.
Real time validation.Real time validation.
Loss of operation context during pageLoss of operation context during page
refresh.refresh.
Excessive server load and bandwidthExcessive server load and bandwidth
consumption due to redundant pageconsumption due to redundant page
refreshes.refreshes.

What isWhat is AJAXAJAX??
AAsynchronoussynchronous JJavaScriptavaScript AAndnd XXMLML
AJAXAJAX is not a technology itself.is not a technology itself.
Refers to the use of a group of technologiesRefers to the use of a group of technologies
together.together.
– HTMLHTML oror DHTMLDHTML andand CSSCSS for presentationfor presentation
information.information.
– Document Object ModelDocument Object Model manipulated throughmanipulated through
JavaScriptJavaScript to dynamically display and interact with theto dynamically display and interact with the
information presented.information presented.
– XMLHttpRequestXMLHttpRequest object to exchange dataobject to exchange data
asynchronously with the web server.asynchronously with the web server.

What are the Issues with AJAX?What are the Issues with AJAX?
User does not know updates will occur.User does not know updates will occur.
User does not notice an update.User does not notice an update.
User can not find the updated information.User can not find the updated information.
Unexpected changes in focus.Unexpected changes in focus.
Loss of Back button functionality*.Loss of Back button functionality*.
URIs can not be bookmarked*.URIs can not be bookmarked*.

AJAXAJAX Application ModelApplication Model

Creating the ObjectCreating the Object
For Safari and MozillaFor Safari and Mozilla
var req = new XMLHttpRequest();var req = new XMLHttpRequest();
For the ActiveX branchFor the ActiveX branch
var req = newvar req = new
ActiveXObject("Microsoft.XMLHTTP");ActiveXObject("Microsoft.XMLHTTP");

The XMLHttpRequest object (cont.)The XMLHttpRequest object (cont.)
function getXMLHttpRequest()function getXMLHttpRequest()
/* This function attempts to get an Ajax request object by trying/* This function attempts to get an Ajax request object by trying
a few different methods for different browsers. */a few different methods for different browsers. */
{{
var request, err;var request, err;
try {try {
request = new XMLHttpRequest(); // Firefox, Safari, Opera, etc.request = new XMLHttpRequest(); // Firefox, Safari, Opera, etc.
}}
catch(err) {catch(err) {
try { // first attempt for Internet Explorertry { // first attempt for Internet Explorer
request = new ActiveXObject("MSXML2.XMLHttp.6.0");request = new ActiveXObject("MSXML2.XMLHttp.6.0");
}}
catch (err) {catch (err) {
try { // second attempt for Internet Explorertry { // second attempt for Internet Explorer
request = new ActiveXObject("MSXML2.XMLHttp.3.0");request = new ActiveXObject("MSXML2.XMLHttp.3.0");
}}
catch (err) {catch (err) {
request = false; // oops, can’t create one!request = false; // oops, can’t create one!
}}
}}
}}
return request;return request;
}}
If this function doesn’t return “false” then we were successful in creating anIf this function doesn’t return “false” then we were successful in creating an XMLHttpRequestXMLHttpRequest object.object.

Object MethodsObject Methods
MethodMethod DescriptionDescription
abort()abort() Stops the current request.Stops the current request.
getAllResponseHeaders()getAllResponseHeaders() Returns complete set of headersReturns complete set of headers
(labels and values) as a string(labels and values) as a string
getResponseHeader("getResponseHeader("headerLabelheaderLabel")") Assigns destination URL, method, andAssigns destination URL, method, and
other optional attributes of a pendingother optional attributes of a pending
requestrequest
open("open("methodmethod", "", "URLURL"[,"[, asyncFlagasyncFlag[,[,
""userNameuserName"[, ""[, "passwordpassword"]]])"]]])
Assigns destination URL, method, andAssigns destination URL, method, and
other optional attributes of a pendingother optional attributes of a pending
requestrequest
send(send(contentcontent)) Transmits the request, optionally withTransmits the request, optionally with
postable string or DOM object datapostable string or DOM object data
setRequestHeader("setRequestHeader("labellabel", "", "valuevalue")") Assigns a label/value pair to theAssigns a label/value pair to the
header to be sent with a requestheader to be sent with a request

Object PropertiesObject Properties
PropertyProperty DescriptionDescription
onreadystatechangeonreadystatechange Event handler for an event that fires atEvent handler for an event that fires at
every state changeevery state change
readyStatereadyState Object status integer:Object status integer:
0 = uninitialized0 = uninitialized
1 = loading1 = loading
2 = loaded2 = loaded
3 = interactive3 = interactive
4 = complete4 = complete
responseTextresponseText String version of data returned from serverString version of data returned from server
processprocess
responseXMLresponseXML DOM-compatible document object of dataDOM-compatible document object of data
returned from server processreturned from server process
statusstatus Numeric code returned by server, such asNumeric code returned by server, such as
404 for "Not Found" or 200 for "OK"404 for "Not Found" or 200 for "OK"
statusTextstatusText String message accompanying the statusString message accompanying the status
codecode

A general skeleton for an Ajax applicationA general skeleton for an Ajax application
<script type="text/javascript">
// ***** include the getXMLHttpRequest function defined before
var ajaxRequest = getXMLHttpRequest();
if (ajaxRequest) { // if the object was created successfully
ajaxRequest.onreadystatechange = ajaxResponse;
ajaxRequest.open("GET", "search.php?query=Bob");
ajaxRequest.send(null);
}
function ajaxResponse() //This gets called when the readyState changes.
{
if (ajaxRequest.readyState != 4) // check to see if we’re done
{ return; }
else {
if (ajaxRequest.status == 200) // check to see if successful
{ // process server data here. . . }
else {
alert("Request failed: " + ajaxRequest.statusText);
}
}
}
</script>

Database Stock ExampleDatabase Stock Example
AJAXAJAX can be used to runrun PHP scripts that obtain
up-to-the-minute information stored on a database.
AJAXAJAX can be used to runrun PHP scripts that obtain
up-to-the-minute information stored on a database.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title>Stock Script</title>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1" />
<script type="text/javascript"
src="getxmlhttprequest.js">
</script>
<script type="text/javascript" src="example18-2.js">
</script>
</head>
...

body>
<h2>Fruit Stock Information:</h2>
<form action="" method="post">
<p>
<label for="strStock">Stock Query: </label>
<input type="text" name="strStock" id="strStock"/>
</p>
<p>
<input type="button" value="Check" onclick="startJS();"/>
</p>
<div id="strStockResult"></div>
</form>
</body>
</html>

AJAX –AJAX – connectconnect to server,to server, sendsend requestrequest
function startJS() {
xhrequest = null;
try {
xhrequest = getXMLHttpRequest();
}
catch(error) {
document.write("Cannot run Ajax code using this browser");
}
if(xhrequest != null) { JavaScript gets a reference to any element in a
page using DOM API
// get form values ID Attribute
var strStock = document.getElementById("strStock").value;
var strUrl = "example18-2.php??strStock=" + strStock;
xhrequest.onreadystatechange = changePagechangePage; Php script +query
xhrequest.open("GETGET", strUrl, true);
xhrequest.send(null);
}
}

function changePage() {
if (xhrequest.readyState == 44 && xhrequest.status == 200200) {
var strResponsestrResponse = xhrequest.responseText;
document.getElementById("strStockResult").innerHTML =
strResponsestrResponse;
}
}

Steps of AjaxSteps of Ajax
A client event occurs.
An XMLHttpRequest object is created.
The XMLHttpRequest object is configured.
The XMLHttpRequest object makes an
asynchronous request to the Webserver.
The Webserver returns the result containing XML
document.
The XMLHttpRequest object calls the callback()
function and processes the result.
The HTML DOM is updated.

Ajax Lecture Notes

Recommended

More Related Content

What's hot (20)

Similar to Ajax Lecture Notes (20)

More from Santhiya Grace (10)

Recently uploaded (20)

Ajax Lecture Notes