1. Ajax:The BasicsAjax:The Basics
By:- Anup kumar Singh
9923702085

2. Topics in This SectionTopics in This Section
What is AJAX ?
Ajax motivation
The basic Ajax process
Using dynamic content and PHP
Sending GET data
Sending POST data
Displaying HTML results
Database connection
Parsing and displaying XML results

3. What is AJAX ?What is AJAX ?
 AJAX = Asynchronous JavaScript and XML.
 AJAX is a technique for creating fast and dynamic web
pages.
 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.
 Classic web pages, (which do not use AJAX) must
reload the entire page if the content should change.
 Examples of applications using AJAX: Google Maps,
Gmail, Youtube, and Facebook tabs.

4. MotivationMotivation

5. Why Ajax?Why Ajax?
HTML and HTTP are weak
– Non-interactive
Everyone wants to use a browser
– Not a custom application
"Real" browser-based active content
– Failed: Java Applets
• Not universally supported; can't interact with the HTML
– Serious alternative: Flash (and Flex)
• Not yet universally supported; limited power
– New and unproven
• Microsoft Silverlight
• JavaFX
• Adobe Apollo

6. The Basic ProcessThe Basic Process

7. AJAX web application modelAJAX web application model
The traditional model for web applications (left) compared to the Ajax model (right).

8. The Basic Ajax ProcessThe Basic Ajax Process
JavaScript
– Define an object for sending HTTP
requests
– Initiate request
• Get request object
• Designate a response handler function
• Supply as onreadystatechange attribute of request
• Initiate a GET or POST request
• Send data
– Handle response
• Wait for readyState of 4 and HTTP status of 200
• Extract return text with responseText or responseXML
• Do something with result

9. Define a Request ObjectDefine a Request Object
var request;
function getRequestObject() {
if (window.ActiveXObject) {
return(new ActiveXObject("Microsoft.XMLHTTP"));
} else if (window.XMLHttpRequest) {
return(new XMLHttpRequest());
} else {
return(null);
}
}
Version for Internet Explorer
5 and 6
Object for Netscape 5+, Firefox, Opera, Safari,
and Internet Explorer 7
Fails on older and
nonstandard browsers

10. Initiate RequestInitiate Request
function sendRequest() {
request = getRequestObject();
request.onreadystatechange = handleResponse;
request.open("GET", “response.php", true);
request.send(null);
}
Don't wait for response
data (Send request asynchronously)
URL of server-side resource
POST DATA
(always null for GET)

11. Handle ResponseHandle Response
function handleResponse() {
if (request.readyState == 4 && request.status==200) {
alert(request.responseText);
}
Pop up dialog box
Text of server response
Response is returned from server
(handler gets invoked multiple times)

12. Server ResponseServer Response
To get the response from a server, use the responseText or
responseXML
property of the XMLHttpRequest object.
Property Description
responseText get the response data as a string
responseXML get the response data as XML data
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:
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

13. 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:
Property Description
onreadystatechange Stores a function (or the name of a function) to be called
automatically each time the readyState property changes
readyState Holds the status of the XMLHttpRequest. Changes from
0 to 4:
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
status 200: "OK"
404: Page not found

14. Complete JavaScript CodeComplete JavaScript Code
(ajax.js)(ajax.js)
var request;
function getRequestObject() {
if (window.ActiveXObject) {
return(new ActiveXObject("Microsoft.XMLHTTP"));
} else if (window.XMLHttpRequest) {
return(new XMLHttpRequest());
} else {
return(null);
}
}
function sendRequest() {
request = getRequestObject();
request.onreadystatechange = handleResponse;
request.open("GET", “response.php", true);
request.send(null);
}
function handleResponse() {
if (request.readyState == 4 && request.status==200) {
alert(request.responseText);
}
}

15. HTML CodeHTML Code
Use xhtml, not HTML 4
– In order to manipulate it with DOM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">...</html>
• Due to IE bug, do not use XML header before the DOCTYPE
• Load the JavaScript file
<script src="relative-url-of-JavaScript-file" type="text/javascript"></script>
• Use separate </script> end tag
• Designate control to initiate request
<input type="button" value="button label" onclick="mainFunction()"/>

16. HTML CodeHTML Code
(show-message.html)(show-message.html)
<!DOCTYPE html PUBLIC "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Ajax: Simple Message</title>
<script src="show-message.js" type="text/javascript"></script>
</head>
<body>
<center>
<table border="1" bgcolor="gray">
<tr><th><big>Ajax: Simple Message</big></th></tr>
</table>
<p/>
<form action="#">
<input type="button" value="Show Message" onclick="sendRequest()"/>
</form>
</center>
</body>
</html>

17. ExamplesExamples