AJAX and PHP: Building Responsive Web Applications

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 ([email protected])

Summarized by [email protected] 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.


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.


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!


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


The Web since 1990 (1)

● Using HTTP & HTMLHTTP: HyperText Transfer ProtocolHTML: HyperText Markup Language● Only static content



● 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



● 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


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.


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.


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)


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 !!!


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

http://ajaxphp.packtpub.com/ajax/quickstart/


The Steps (1)


The Steps (2)● Step 1-5: typical HTTP request● Step 5-9: typical AJAX call


The Files● Temporary locations: http://winsetia.de/serious/Ajax_and_PHP/

http://winsetia.de/serious/Ajax_and_PHP/


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>


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>';

?>


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;


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);

}


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

http://www.google.com/webhp?complete=1

http://instant.search.yahoo.com/

http://www.gmail.com/

http://maps.google.com/

http://maps.yahoo.com/

http://local.live.com/

http://www.writely.com/

http://www.basecamphq.com/


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.


Q & A● Anyone?

AJAX and PHP: Building Responsive Web Applications

Documents

Transcript of AJAX and PHP: Building Responsive Web Applications