Building
Applications
using AJAX

WebOSS ‘07
S Pradeep
What is AJAX?
 AJAX = Asynchronous JavaScript And XML
 Is a web development technique used for
 creating faster, interacti...
Who uses AJAX?
 Google maps
 Gmail
 Google Suggest
 Flickr
 del.icio.us
 Meebo
 and many more…
How AJAX is different
Need for AJAX
 To increase web's interactivity, speed and
 usability
 Issues with classic web applications
 * Almost all p...
Benefits of Using AJAX
 Enhance your sites by allowing quicker
 access to data.
 Reduce the amount of bandwidth used in
 d...
AJAX Workarounds
 Hidden IFRAME
 <SCRIPT> src hack
 Cookies
Where to use AJAX
 Anywhere you have a search box, adding
 Google suggest functionality.
 Pages where you have a multi-ste...
Simple Ajax Application : How To
 Create a request object
 Make the request
 Handle the response
Create a request object
if browser is mozilla or safari or opera then
   create a new XMLHttpRequest
otherwise if browser ...
Code
var xhr = null;
if(window.XMLHttpRequest) // Mozilla,Safari, etc.
{
  xhr = new XMLHttpRequest();
}
else if(window.Ac...
XHR Methods
 open(‘method’,’url’,asyncFlag)
 send(content)
 abort()
 getResponseHeader(“header”)
 setRequestHeader(“header...
XHR properties
 onreadystatechange
 readystate
 responseText
 responseXML
 status
 statusText
Make the request
 set onreadystatechange to callback function
 cbProcessResponse
 open a request on the XHR object
 send t...
Code
xhr.onreadystatechange=cbProcessResponse;
xhr.open(’GET’,‘ajax.php’,true);

function cbProcessResponse()
{
   if(xhr....
Handle Response: Parsing the XML
// Our sample XML
<?xml version=quot;1.0quot; encoding=quot;ISO-8859-1quot;?>
<root>
   <...
Enter JSON
  JavaScript Object Notation
  JSON is a lightweight data-interchange format.
  JSON data are slightly simpler ...
JSON How?
  JSON can be generated by all the popular server-side languages.
  Native/Library Support

// Revised callback ...
Frameworks
 A framework is a re-usable design for a
 software system with built-in generic
 functions for performing repet...
Using Prototype.js
  Prototype provides the Ajax object to abstract the
  different browsers.
  Ajax.Request()
  Ajax.Upda...
Tips
 Don't overuse AJAX, the usability
 requirements for JavaScript applications are
 quite different than the requiremen...
Debugging AJAX
 Always test your PHP/Server-side code
 before integrating it with the JavaScript
 side.
 Always check xhr....
Resources
 AJAXIAN - http://ajaxian.com
 AJAX info - http://ajaxinfo.com
 AJAX Lesson - http://ajaxlessons.com
 Go4Expert ...
Thanks!
 Hussain Fakhruddin
 Teknowledge Software




 The wonderful audience.
Upcoming SlideShare
Loading in...5
×

Building Applications Using Ajax

3,896

Published on

The first of its kind Web Technology Conference on Open Source Technology, WebOSS '07 was organised in Kolkata on Sat, 13th Oct 07 and I spoke at the event as one of the participants on "Building Applications using AJAX". Here I will share my presentation.

Published in: Technology, News & Politics
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,896
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
293
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Building Applications Using Ajax

  1. 1. Building Applications using AJAX WebOSS ‘07 S Pradeep
  2. 2. What is AJAX? AJAX = Asynchronous JavaScript And XML Is a web development technique used for creating faster, interactive web applications.
  3. 3. Who uses AJAX? Google maps Gmail Google Suggest Flickr del.icio.us Meebo and many more…
  4. 4. How AJAX is different
  5. 5. Need for AJAX To increase web's interactivity, speed and usability Issues with classic web applications * Almost all processing is done on server * High latency * Low interactivity
  6. 6. Benefits of Using AJAX Enhance your sites by allowing quicker access to data. Reduce the amount of bandwidth used in data presentation. Make a web application that feels more like a native application.
  7. 7. AJAX Workarounds Hidden IFRAME <SCRIPT> src hack Cookies
  8. 8. Where to use AJAX Anywhere you have a search box, adding Google suggest functionality. Pages where you have a multi-step process. When working with large or highly interdependent datasets.
  9. 9. Simple Ajax Application : How To Create a request object Make the request Handle the response
  10. 10. Create a request object if browser is mozilla or safari or opera then create a new XMLHttpRequest otherwise if browser is IE create a new ActiveXObject otherwise error - browser does not support XMLHttpRequest IE 5,5.5,6 implement XHR as an ActiveX object (Msxml2.XMLHTTP/Microsoft.XMLHTTP) Mozilla 1.0+, Safari 1.2+, Opera 8+, IE7 provide XMLHttpRequest natively. All XHR objects have the same methods and properties.
  11. 11. Code var xhr = null; if(window.XMLHttpRequest) // Mozilla,Safari, etc. { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject) // < IE 7 { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } Else { alert('Oops! Your browser does not support XMLHttpRequest'); }
  12. 12. XHR Methods open(‘method’,’url’,asyncFlag) send(content) abort() getResponseHeader(“header”) setRequestHeader(“header”,”value”)
  13. 13. XHR properties onreadystatechange readystate responseText responseXML status statusText
  14. 14. Make the request set onreadystatechange to callback function cbProcessResponse open a request on the XHR object send the request through the XHR object “Same Site” rule “GET” or “POST” Asynchronous flag
  15. 15. Code xhr.onreadystatechange=cbProcessResponse; xhr.open(’GET’,‘ajax.php’,true); function cbProcessResponse() { if(xhr.readystate==4 && xhr.status==200) { alert(xhr.responseText); } } /* readystate values 0 -> uninitialized 1 -> loading 2 -> loaded 3 -> interactive 4 -> completed */
  16. 16. Handle Response: Parsing the XML // Our sample XML <?xml version=quot;1.0quot; encoding=quot;ISO-8859-1quot;?> <root> <response>OK</response> <msg>Hello World!</msg> </root> // Revised callback function function cbProcessResponse() { if(xhr.readystate==4 && xhr.status==200) { var xmlDoc = xhr.responseXML.documentElement; var s = x.getElementsByTagName('response')[0].firstChild.data; var m = x.getElementsByTagName('msg')[0].firstChild.data; alert(‘Response Code:’+s+’nMessage: ‘+m) } }
  17. 17. Enter JSON JavaScript Object Notation JSON is a lightweight data-interchange format. JSON data are slightly simpler and slightly more in line with the rest of the JavaScript language than scripts for XML data. Find more about JSON at http://json.org //sample JSON { response: ‘OK’, msg: ‘Hello World’ }
  18. 18. JSON How? JSON can be generated by all the popular server-side languages. Native/Library Support // Revised callback function to use JSON function cbProcessResponse() { if(xhr.readystate==4 && xhr.status==200) { var jsonData = eval(‘(‘+xhr.responseText+’)’); var s = jsonData.response; // easy ;-) var m = jsonData.msg; alert(‘Response Code:’+s+’nMessage: ‘+m) } } Doesn’t that look simpler?
  19. 19. Frameworks A framework is a re-usable design for a software system with built-in generic functions for performing repetitive, natively unsupported operations. The Prototype JavaScript Framework is a JavaScript framework that provides an Ajax framework and other utilities. Download from http://prototypejs.org Others: YUI, Dojo, jQuery, mooTools
  20. 20. Using Prototype.js Prototype provides the Ajax object to abstract the different browsers. Ajax.Request() Ajax.Updater(container, url[, options]) var pars = 'topic=ajax&framework=pjs'; Var url = '/cgi-bin/myAjaxHandler.cgi'; var myAjax = new Ajax.Request(url,{ method: quot;postquot;, // get/post parameters: pars, onComplete: cbProcessResponse // Our old callback function }); Ajax.PeriodicalUpdater(container, url[, options])
  21. 21. Tips Don't overuse AJAX, the usability requirements for JavaScript applications are quite different than the requirements for regular web pages. Escape content sent to the server. Use AJAX activity indicators. http://www.napyfab.com/ajax-indicators/
  22. 22. Debugging AJAX Always test your PHP/Server-side code before integrating it with the JavaScript side. Always check xhr.status Use FireBug to pin-point errors, and trace performance bottle-necks. Download from http://www.getfirebug.com/
  23. 23. Resources AJAXIAN - http://ajaxian.com AJAX info - http://ajaxinfo.com AJAX Lesson - http://ajaxlessons.com Go4Expert - http://go4expert.com
  24. 24. Thanks! Hussain Fakhruddin Teknowledge Software The wonderful audience.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×