• Like
AJAX and PHP: Building Responsive Web Applications
Upcoming SlideShare
Loading in...5

AJAX and PHP: Building Responsive Web Applications

Uploaded on


  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. AJAX and PHP: Building Responsive Web Applications Cristian Darie, Mihai Bucica, Filip Cherecheş- Toşa, Bogdan Brinzarea ISBN 1847192825 Chapter 01: Ajax and the Future Note: all credits for contents goes to the original author. Summarized by Wawan Setiawan (winanci@gmail.com)
  • 2. Users & Software ● Ultimate software provides intuitive user interfaces for end users ● Ultimate goals for software: Understanding the way people's brains work ● In other words: users get what they expect ● Software usability was born. Summarized by winanci@gmail.com 2
  • 3. Software Usability ● Software usability: ✔ the art of meeting users' interface expectations ✔ understanding the nature of their work ✔ building software applications accordingly ● More usability = more user-friendly ● But usability mostly applied for Desktop applications, not Web applications. ● Because web is mostly text & images. Summarized by winanci@gmail.com 3
  • 4. The Web Today ● Not merely text and images ● Examples: Flash, Java applets, Silverlight ● Can Web applications be more like Desktop applications? ● Example: drag-and-drop in the web, multiple task in the same windows. ● Not easy, but certainly possible, and we're heading that way! Summarized by winanci@gmail.com 4
  • 5. Advantages of Web ● easy and inexpensive to deliver: only needs web browser & internet/intranet connection ● easy and inexpensive to upgrade: if the application/content in the server is updated/upgraded, all clients get the updated version ● flexible requirements for the end users: only needs web browser ● easier to have a central data store: they're all in the server Summarized by winanci@gmail.com 5
  • 6. The Web since 1990 (1) ● Using HTTP & HTML HTTP: HyperText Transfer Protocol HTML: HyperText Markup Language ● Only static content Summarized by winanci@gmail.com 6
  • 7. The Web since 1990 (2) ● Using Server side: PHP, JSP, ASP.NET, Perl, ColdFusion ● not only static content = dynamic content ● processed in the server & sent to client, mostly utilizing database Summarized by winanci@gmail.com 7
  • 8. The Web since 1990 (3) ● Using client side: JavaScript, Flash, Java applets. ● If all is combined ==> powerful web, but is it enough? ● Problems: while server handling request, client stops its activities. Request & Response. ● Solutions (for now): Ajax Summarized by winanci@gmail.com 8
  • 9. Ajax, our Hero ● Ajax: Asynchronous JavaScript and XML ● It allows communication in the background while the user is working on the page. ● Examples: Google Suggest & Yahoo! Instant Search Warning: don't overuse Ajax! Ajax doesn't guarantee website will be better. As always, it's the man behind the gun that counts. Summarized by winanci@gmail.com 9
  • 10. Ajax Components ● JavaScript. DOM (Document Object Model) will be heavily used in JavaScript functions to manipulate parts of the HTML page. ● XMLHttpRequest object: enables JavaScript to access the server asynchronously. Request & Response too, but asynchronously. ● A server-side technology ● Note: response is in XML format, but other format can be sed such JSON (JavaScript Object Notation) ● Another note: none of the components is new, but the combination is considered as new. Summarized by winanci@gmail.com 10
  • 11. Benefits of Ajax ● better & more responsive websites and web applications. ● Because of its popularity, it encourages the development of patterns ==> avoiding reinventing the wheel for common tasks. ● It makes use of existing technologies & developer skills. ● integrate perfectly with existing functionality provided by web browsers (i.e. re-dimensioning the page, page navigation, etc) Summarized by winanci@gmail.com 11
  • 12. Potential Problems with Ajax ● page address doesn't change ==> not easy for bookmark ● Search engines may not be able to index all portions of Ajax application site. ● The Back button has no effects ;) (also caused by the first problem) ● JavaScript disabled = no AJAX !!! Summarized by winanci@gmail.com 12
  • 13. Simple Examples ● URL: http://ajaxphp.packtpub.com/ajax/quickstart/ ● The name was sent in the background. No reload to change the page. ● Files needed: ✔ index.html: HTML file ✔ quickstart.js: JavaScript code ✔ quickstart.php: PHP script, gets called by quickstart.js Summarized by winanci@gmail.com 13
  • 14. The Steps (1) Summarized by winanci@gmail.com 14
  • 15. The Steps (2) ● Step 1-5: typical HTTP request ● Step 5-9: typical AJAX call Summarized by winanci@gmail.com 15
  • 16. The Files ● Temporary locations: http://winsetia.de/serious/Ajax_and_PHP/ Summarized by winanci@gmail.com 16
  • 17. The Code Explanations (1) ● calling process() on loading ● Taking the message from server as divMessage: Mickey Mouse, I don't know you! <body onload='process()'> Server wants to know your name: <input type="text" id="myName" /> <div id="divMessage" /> </body> ● Response from server (created by quickstart.php) <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <response> Mickey Mouse, I don't know you! </response> Summarized by winanci@gmail.com 17
  • 18. The Code Explanations (2) ● quickstart.php: user name list & creating the message // retrieve the user name $name = $_GET['name']; // generate output depending on the user name received from client $userNames = array('CRISTIAN', 'BOGDAN', 'FILIP', 'MIHAI', 'YODA'); if (in_array(strtoupper($name), $userNames)) echo 'Hello, master ' . htmlentities($name) . '!'; else if (trim($name) == '') echo 'Stranger, please tell me your name!'; else echo htmlentities($name) . ', I don't know you!'; // close the <response> element echo '</response>'; Summarized by winanci@gmail.com 18 ?>
  • 19. The Code Explanations (3) ● XML file is read by handleServerResponse() in quickstart.js // extract the XML retrieved from the server xmlResponse = xmlHttp.responseXML; // obtain the document element (the root element) of the XML structure xmlDocumentElement = xmlResponse.documentElement; // get the text message, which is in the first child of // the document element helloMessage = xmlDocumentElement.firstChild.data; ● After being read, the message becomes divMessage // update the client display using the data received from the server document.getElementById('divMessage').innerHTML = helloMessage; Summarized by winanci@gmail.com 19
  • 20. The Code Explanations (4) ● the rest of quickstart.js are doing the asynchronous call using XMLHttpRequest starting from // make asynchronous HTTP request using the XMLHttpRequest object function process() { ● until // if the connection is busy, try again after one second setTimeout('process()', 1000); } Summarized by winanci@gmail.com 20
  • 21. Useful Links: AJAX applications ● Google Suggest: http://www.google.com/webhp?complete=1 ● Yahoo! Instant Search: http://instant.search.yahoo.com/ ● Gmail: http://www.gmail.com and also Yahoo! Mail and Hotmail ● Google Maps: http://maps.google.com , Yahoo Maps: http://maps.yahoo.com ● Windows Live Local: http://local.live.com ● Other services: http://www.writely.com and http://www.basecamphq.com Summarized by winanci@gmail.com 21
  • 22. Useful Links: further AJAX ● http://ajaxblog.com is an AJAX dedicated blog ● http://www.fiftyfoureleven.com/resources/programming/xmlhttprequest is a comprehensive article collection about AJAX. ● http://www.ajaxian.com is the AJAX website of Ben Galbraith and Dion Almaer, the authors of Pragmatic AJAX. ● http://www.ajaxmatters.com is an informational site about AJAX, containing loads of very useful links. ● http://ajaxpatterns.org is about reusable AJAX design patterns. ● http://www.ajaxinfo.com is a resource of AJAX articles and links. ● http://dev.fiaminga.com contains many links to various AJAX resources and tutorials. ● http://ajaxguru.blogspot.com is a popular AJAX-related web blog. ● http://www.sitepoint.com/article/remote-scripting-ajax is Cameron Adams' excellent article AJAX: Usable Interactivity with Remote Scripting. ● http://developer.mozilla.org/en/docs/AJAX is Mozilla's page on AJAX. ● http://en.wikipedia.org/wiki/AJAX is the Wikipedia page on AJAX. Summarized by winanci@gmail.com 22
  • 23. Q&A ● Anyone? Summarized by winanci@gmail.com 23