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

Like this? Share it with your network


AJAX and PHP: Building Responsive Web Applications






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

AJAX and PHP: Building Responsive Web Applications Presentation Transcript

  • 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