Ajax:The BasicsAjax:The BasicsBy:- Anup kumar Singh9923702085
Topics in This SectionTopics in This SectionWhat is AJAX ?Ajax motivationThe basic Ajax processUsing dynamic content a...
What is AJAX ?What is AJAX ? AJAX = Asynchronous JavaScript and XML. AJAX is a technique for creating fast and dynamic w...
MotivationMotivation
Why Ajax?Why Ajax?HTML and HTTP are weak– Non-interactiveEveryone wants to use a browser– Not a custom application"Real" b...
The Basic ProcessThe Basic Process
AJAX web application modelAJAX web application modelThe traditional model for web applications (left) compared to the Ajax...
The Basic Ajax ProcessThe Basic Ajax ProcessJavaScript– Define an object for sending HTTPrequests– Initiate request• Get r...
Define a Request ObjectDefine a Request Objectvar request;function getRequestObject() {if (window.ActiveXObject) {return(n...
Initiate RequestInitiate Requestfunction sendRequest() {request = getRequestObject();request.onreadystatechange = handleRe...
Handle ResponseHandle Responsefunction handleResponse() {if (request.readyState == 4 && request.status==200) {alert(reques...
Server ResponseServer ResponseTo get the response from a server, use the responseText orresponseXMLproperty of the XMLHttp...
The onreadystatechange event When a request to a server is sent, we want to perform some actions based on theresponse. T...
Complete JavaScript CodeComplete JavaScript Code(ajax.js)(ajax.js)var request;function getRequestObject() {if (window.Acti...
HTML CodeHTML CodeUse xhtml, not HTML 4– In order to manipulate it with DOM<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Tra...
HTML CodeHTML Code(show-message.html)(show-message.html)<!DOCTYPE html PUBLIC "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tran...
ExamplesExamples
Upcoming SlideShare
Loading in...5
×

Ajax Tuturial

481

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
481
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Ajax Tuturial

  1. 1. Ajax:The BasicsAjax:The BasicsBy:- Anup kumar Singh9923702085
  2. 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. 3. What is AJAX ?What is AJAX ? AJAX = Asynchronous JavaScript and XML. AJAX is a technique for creating fast and dynamic webpages. AJAX allows web pages to be updated asynchronouslyby exchanging small amounts of data with the serverbehind the scenes. This means that it is possible toupdate parts of a web page, without reloading thewhole page. Classic web pages, (which do not use AJAX) mustreload the entire page if the content should change. Examples of applications using AJAX: Google Maps,Gmail, Youtube, and Facebook tabs.
  4. 4. MotivationMotivation
  5. 5. Why Ajax?Why Ajax?HTML and HTTP are weak– Non-interactiveEveryone wants to use a browser– Not a custom application"Real" browser-based active content– Failed: Java Applets• Not universally supported; cant interact with the HTML– Serious alternative: Flash (and Flex)• Not yet universally supported; limited power– New and unproven• Microsoft Silverlight• JavaFX• Adobe Apollo
  6. 6. The Basic ProcessThe Basic Process
  7. 7. AJAX web application modelAJAX web application modelThe traditional model for web applications (left) compared to the Ajax model (right).
  8. 8. The Basic Ajax ProcessThe Basic Ajax ProcessJavaScript– Define an object for sending HTTPrequests– 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. 9. Define a Request ObjectDefine a Request Objectvar request;function getRequestObject() {if (window.ActiveXObject) {return(new ActiveXObject("Microsoft.XMLHTTP"));} else if (window.XMLHttpRequest) {return(new XMLHttpRequest());} else {return(null);}}Version for Internet Explorer5 and 6Object for Netscape 5+, Firefox, Opera, Safari,and Internet Explorer 7Fails on older andnonstandard browsers
  10. 10. Initiate RequestInitiate Requestfunction sendRequest() {request = getRequestObject();request.onreadystatechange = handleResponse;request.open("GET", “response.php", true);request.send(null);}Dont wait for responsedata (Send request asynchronously)URL of server-side resourcePOST DATA(always null for GET)
  11. 11. Handle ResponseHandle Responsefunction handleResponse() {if (request.readyState == 4 && request.status==200) {alert(request.responseText);}Pop up dialog boxText of server responseResponse is returned from server(handler gets invoked multiple times)
  12. 12. Server ResponseServer ResponseTo get the response from a server, use the responseText orresponseXMLproperty of the XMLHttpRequest object.Property DescriptionresponseText get the response data as a stringresponseXML get the response data as XML dataThe 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 useit accordingly:The responseXML Property•If the response from the server is XML, and you want to parse it as an XMLobject, use the responseXML property
  13. 13. The onreadystatechange event When a request to a server is sent, we want to perform some actions based on theresponse. 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 Descriptiononreadystatechange Stores a function (or the name of a function) to be calledautomatically each time the readyState property changesreadyState Holds the status of the XMLHttpRequest. Changes from0 to 4:0: request not initialized1: server connection established2: request received3: processing request4: request finished and response is readystatus 200: "OK"404: Page not found
  14. 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. 15. HTML CodeHTML CodeUse xhtml, not HTML 4– In order to manipulate it with DOM<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//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. 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. 17. ExamplesExamples

×