Your SlideShare is downloading. ×
AJAX and PHP: Building Responsive Web Applications
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

AJAX and PHP: Building Responsive Web Applications


Published on

  • 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 (
  • 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 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 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 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 5
  • 6. The Web since 1990 (1) ● Using HTTP & HTML HTTP: HyperText Transfer Protocol HTML: HyperText Markup Language ● Only static content Summarized by 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 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 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 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 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 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 12
  • 13. Simple Examples ● URL: ● 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 13
  • 14. The Steps (1) Summarized by 14
  • 15. The Steps (2) ● Step 1-5: typical HTTP request ● Step 5-9: typical AJAX call Summarized by 15
  • 16. The Files ● Temporary locations: Summarized by 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 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 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 =; ● 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 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 20
  • 21. Useful Links: AJAX applications ● Google Suggest: ● Yahoo! Instant Search: ● Gmail: and also Yahoo! Mail and Hotmail ● Google Maps: , Yahoo Maps: ● Windows Live Local: ● Other services: and Summarized by 21
  • 22. Useful Links: further AJAX ● is an AJAX dedicated blog ● is a comprehensive article collection about AJAX. ● is the AJAX website of Ben Galbraith and Dion Almaer, the authors of Pragmatic AJAX. ● is an informational site about AJAX, containing loads of very useful links. ● is about reusable AJAX design patterns. ● is a resource of AJAX articles and links. ● contains many links to various AJAX resources and tutorials. ● is a popular AJAX-related web blog. ● is Cameron Adams' excellent article AJAX: Usable Interactivity with Remote Scripting. ● is Mozilla's page on AJAX. ● is the Wikipedia page on AJAX. Summarized by 22
  • 23. Q&A ● Anyone? Summarized by 23