AJAX Asynchronous JavaScript and XML

1
AJAX Asynchronous JavaScript and XML

• Vijay Khambalkar
• Magnet Technologies Pvt. Ltd.

2
What is AJAX ?

• Ajax is just a style of design, one that makes
  feel less web and more desktop

3
Why AJAX ?

• Reduce Network Traffic
• Increase Speed
• Enhance User Experience

4
AJAX Characteristics

• Continuous Feel
• Real Time Updates
• Graphical Interactions

5
Ajax Lifecycle
6
How to use AJAX practically ?

• Use iFrame
• Go the XmlHttpRequest way !

7
XmlHttpRequest ?

• Client Side Component.
• Must be instantiated before use.
• Use open() method to connect and retrieve
  response from the specified URL.
• Handle onreadystatechange Event.

8
XmlHttpRequest Component

• Internet Explorer 5
• Mozilla 1.0 Netscape 7
• Safari 1.2
• Opera 7.6
• Firefox

9
Lets see some coding

• var reqfunction retrieveURL(url)
•     if (window.XMLHttpRequest) // Non-IE browsers
•       req new XMLHttpRequest()
•    
• else if (window.ActiveXObject) // IE
•       req new ActiveXObject("Microsoft.XMLHTTP"
  )
•    
•      req.open("GET", url, true)
•      req.onreadystatechange processStateChange
•      req.send(null)
•  

10
Lets see some coding

• function processStateChange()
•     if (req.readyState 4) // Complete
•  
•      if (req.status 200) // OK response
•  
•        document.getElementById(MyContent").innerH
  TML
• req.responseText
•      
•    
•  
•  

11
Who created AJAX ?

• No one created AJAX !
• AJAX Asynchronous JavaScript And XML
• Jesse James Garett coined term AJAX in his
  article - AJAX A new approach for a new
  application

12
AJAX with PHP
13
Coding PHP server.php

• lt?php
• //Display Message
• echo This is Ajax with PHP
• ?gt

14
Coding Javascript client.htm

• lthtmlgt
• ltscript languagejavascriptgt
• function createRequestObject()
• var httpObj
• var browsernavigator.appName
• if(browser"Microsoft Internet Explorer")
• httpObj ActiveXObject("Microsoft.XMLHTTP")
• else
• httpObj new XMLHttpRequest()
• return http
• var http createRequestObject() - Continued

15
Coding Javascript client.htm

• var requestObjectcreateRequestObject()
• function sendRequest(page)
• requestObject.open('get',page)
• requestObject.onreadystatechangedisplayContent
  
• requestObject.send(null)
• - Continued

16
Coding Javascript client.htm

• function displayContent()
• if(requestObject.readyState4)
• var datarequestObject.responseText
• document.getElementById('contact').innerHTMLdata
  "ltbrgt"
• lt/scriptgt
• ltbodygt
• lta href"javascriptsendRequest('server.php')"gtCli
  ck here to View the pagelt/agtltbrgt
• ltdiv idcontact"gt lt/divgt
• lt/bodygtlt/htmlgt

17
AJAX Libraries in PHP

• SAJAX
• XAJAX
• AJAXAC
• JPSPAN

18
Lets Try Out Example
19
When to go the AJAX way ?

• Not Always !!! Abuse of any technology would
  make it a liability !!!

20
Where has AJAX been used ?

• Google Maps http//maps.google.com
• Google Suggesthttp//www.google.com/webhp?comple
  te1hlen
• GMail
• Flickr
• A9.com

21
Limitations of AJAX

• JavaScript Implementations.
• Debugging.
• Security.

22
Summary
23
Thank You