AJAXNot just a cleaning product anymore.

Currently...

• Can easily update database

• Easy to set variables to change HTML display

• More familiar code

Process Forms via Page Reload

PROS

• For the user, SLOW

• Do we *really* need a page reload for all functions?

CONS

SLOW?

• Form processing and error checking

• Updating a database table without needing to inform the user

• Calculating a value that will only change HTML on part of a page

Is there a Better Way?

Why not leave the page displaying and process

BEHIND THE SCENES?

Client-Side vs Server-Side

• Javascript makes REAL-TIME changes without page reloading and present QUICK feedback: more simple functions and thus faster

• PHP can interact with server technologies like the database and easily generate HTML : More heavy lifting and more time-consuming

Client-Side vs Server-SideANALOGY: Going to a restaurant

Restaurant Kitchen

HTML PHP

Client-Side vs Server-SideANALOGY: Going to a restaurant

Do customers go to the kitchen and get their food?

No. We need a middle man.

The waiter interacts with the client and the server

Client-Side vs Server-SideANALOGY: Going to a restaurant

While users wait, they have things to occupy their time

Your site should do the client-server relation behind the scenes while presenting your user with feedback

and something to occupy their time

Javascript + PHP

• Javascript file controls real-time effects, processing and user feedback

• PHP file takes care of backend functionality (i.e. updating database or formatting HTML)

HTML = your foodJAVASCRIPT = your waiter

PHP = the chef

Javascript Component

function AjaxMe() {var ajax=null;

try { ajax=new XMLHttpRequest(); } catch (e) { try { ajax=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {

ajax=new ActiveXObject("Microsoft.XMLHTTP"); }

} return ajax;}

Why use it?• No page reload necessary

• Better user interface (effects, instant feedback)

• Useful for performing small actions

• Displays front end while processing behind the scenes

Does the waiter always need to go to the kitchen? No, i.e. you can keep the beverage station nearby.

Javascript Component

function postComment(comment) {var url = “ajax.php?comment=”+comment;var myAjax = new AjaxMe();myAjax.open(“GET”,url,true);myAjax.onreadystatechange=function() {

if(myAjax.readyState==4 || myAjax.readyState==”complete”) {document.getElementById(‘main’).innerHTML=myAjax.responseText;

}}myAjax.send(null);

}•1) Define URL to PHP page•2) Open AJAX connection•3) Define what happens when processing is finished

• Disable form elements

• Display an animated loading GIF

• Change colors or text for feedback

• Be creative!

Javascript ComponentWhile PHP is processing, Javascript can:

On the PHP page...

• Do your normal PHP variable processing and then echo whatever response text you want (if any)

• Javascript displays this when it’s ready and does other things for the user in the interim

Form Action Components

• The HTML form, whose SUBMIT button has an “onclick” attribute to call the Javascript function

• The Javascript function to call the PHP page and display real-time feedback to the user

• The PHP page to do all the processing and return HTML messages

Form Action Components

HTMLPHP

CLIENT SERVER

Form Action Components

HTMLJS PHP

CLIENT SERVER

As for theUser Experience

• Constant feedback is VERY NECESSARY

• Keeps users engaged and aware of what’s happening

• Does not disrupt the user flow

• Like refreshing part of a page instead of the whole thing

Happy Programming

:^)