Ajax and PHP John Coggeshall

Welcome! Who am I: John Coggeshall Sr. Technical Consultant, Zend Technologies Author PHP 5 Unleashed Zend Educational Advisory Board Speaker on PHP-related topics worldwide Geek

Who am I: John Coggeshall

Sr. Technical Consultant, Zend Technologies

Author PHP 5 Unleashed

Zend Educational Advisory Board

Speaker on PHP-related topics worldwide

Geek

Why are we here? We’re here to discuss AJAX … and PHP … and XML … and Javascript … and Networks In this three hour tutorial, I’ll be explaining a number of AJAX-related concepts

We’re here to discuss AJAX

… and PHP

… and XML

… and Javascript

… and Networks

In this three hour tutorial, I’ll be explaining a number of AJAX-related concepts

Fair Warning I’ll warn you right now – I work for Zend, not Netscape I am not a client-side developer I do not know which browsers support which constructs of Javascript under which conditions using which technologies on which operating system I am a PHP developer responsible for scaling numerous mission-critical PHP sites and technologies I do understand Internet architectures and how to scale them in practical environments I do understand enough about AJAX as a technology to speak intelligently Don’t expect a lot of flashy AJAX demos here

I’ll warn you right now – I work for Zend, not Netscape

I am not a client-side developer

I do not know which browsers support which constructs of Javascript under which conditions using which technologies on which operating system

I am a PHP developer responsible for scaling numerous mission-critical PHP sites and technologies

I do understand Internet architectures and how to scale them in practical environments

I do understand enough about AJAX as a technology to speak intelligently

Don’t expect a lot of flashy AJAX demos here

The basics So, what does AJAX stand for anyway? A synchronous J avascript a nd X ML The basic idea: Javascript is the reigning champion of the client side Image roll-overs DHTML Client-side form processing Not all information and processes can be given to the client Insecure / Untrusted Simple processing ability restrictions

So, what does AJAX stand for anyway?

A synchronous J avascript a nd X ML

The basic idea:

Javascript is the reigning champion of the client side

Image roll-overs

DHTML

Client-side form processing

Not all information and processes can be given to the client

Insecure / Untrusted

Simple processing ability restrictions

Asynchronous Javascript AJAX allows us to take advantage of the server for information, while leaving the GUI-related items to the client It’s not a new technology Just has a neat acronym now How’s it work? Javascript applications perform requests to the server using an agreed protocol The server responds in kind with the requested information All of this takes place without reloading the page Asynchronous of the client Javascript then processes the result and manipulates the page

AJAX allows us to take advantage of the server for information, while leaving the GUI-related items to the client

It’s not a new technology

Just has a neat acronym now

How’s it work?

Javascript applications perform requests to the server using an agreed protocol

The server responds in kind with the requested information

All of this takes place without reloading the page

Asynchronous of the client

Javascript then processes the result and manipulates the page

Don’t confuse technologies Is AJAX Gmail / Google Maps? No Is AJAX Prototype or Script.aculo.us? No Is AJAX Ruby-on-Rails? No AJAX is simply the idea of enabling your browser to communicate asynchronously with the server to provide a more rich user “Web 2.0” experience.

Is AJAX Gmail / Google Maps?

No

Is AJAX Prototype or Script.aculo.us?

No

Is AJAX Ruby-on-Rails?

No

AJAX is simply the idea of enabling your browser to communicate asynchronously with the server to provide a more rich user “Web 2.0” experience.

Implementing AJAX Step 1: Open a asynchronous connection from the client to the server Step 2: Perform a request against the server using an agreed upon protocol Step 3: Process the results via Javascript and manipulate the client without causing a full refresh of the page <SCRIPT language=&quot;JavaScript&quot;> <!-- pic1= new Image(100,25); pic1.src=&quot;http://example.com/getRandomImage.php&quot;; //--> </SCRIPT>

Step 1: Open a asynchronous connection from the client to the server

Step 2: Perform a request against the server using an agreed upon protocol

Step 3: Process the results via Javascript and manipulate the client without causing a full refresh of the page

“ Traditional” AJAX Despite the misconceptions on what exactly AJAX is, it does have a traditional approach XMLHttpRequest object Available in most modern browsers Identical in concept to the Image object Allows you to retrieve data from the server without performing an entirely new request Requests are generally made in conjunction with a particular Javascript event i.e. onBlur of a zip-code field which automatically finds out the city / state

Despite the misconceptions on what exactly AJAX is, it does have a traditional approach

XMLHttpRequest object

Available in most modern browsers

Identical in concept to the Image object

Allows you to retrieve data from the server without performing an entirely new request

Requests are generally made in conjunction with a particular Javascript event

i.e. onBlur of a zip-code field which automatically finds out the city / state

“ Traditional” AJAX Okay, so here we go: <input type=“text” size=“5” onBlur=“updateCityState()”> Now all we need to do is implement a javascript updateCityState() function that creates an XMLHttpRequest object Then we take that object and request a PHP page http://www.example.com/getCityState.php?zip=14214 … parse the result … update the city and state input fields to reflect the new information!

Okay, so here we go:

<input type=“text” size=“5” onBlur=“updateCityState()”>

Now all we need to do is implement a javascript updateCityState() function that creates an XMLHttpRequest object

Then we take that object and request a PHP page http://www.example.com/getCityState.php?zip=14214

… parse the result

… update the city and state input fields to reflect the new information!

Browser Wars Revisited Ah, if only it were that simple Unfortunately, XMLHttpRequest is implemented in different ways on each browser Requires lots of Javascript black-magic that I don’t know to ensure you’re creating the proper object the proper way My solution: Google This problem has been solved a million times over so I won’t re-explain the wheel here

Ah, if only it were that simple

Unfortunately, XMLHttpRequest is implemented in different ways on each browser

Requires lots of Javascript black-magic that I don’t know to ensure you’re creating the proper object the proper way

My solution: Google

This problem has been solved a million times over so I won’t re-explain the wheel here

Establishing a Protocol Now that you’ve made a request back to the web server (in this case, using PHP and HTTP GET) time to deal with the response This is where things really go amuck There is no standard AJAX protocol, the data can be anything Comma separated fields Serialized Javascript Custom XML SOAP URLEncoded fields 20 bytes of data, each byte representing a command

Now that you’ve made a request back to the web server (in this case, using PHP and HTTP GET) time to deal with the response

This is where things really go amuck

There is no standard AJAX protocol, the data can be anything

Comma separated fields

Serialized Javascript

Custom XML

SOAP

URLEncoded fields

20 bytes of data, each byte representing a command

Establishing a Protocol While there are no standards per-se, there are common techniques Future versions of PHP will support JSON encoding by default Allows you to pass complex data types back and forth between PHP and Javascript fairly easily You can download JSON encoding support from PECL http://pecl.php.net/package/json $json_enc = json_encode(array(1,2,3)); $json_dec_var = json_decode(‘{ “abc”:12 }’); javascript:eval(‘{ “abc”:12}’); // return foo.abc in JS

While there are no standards per-se, there are common techniques

Future versions of PHP will support JSON encoding by default

Allows you to pass complex data types back and forth between PHP and Javascript fairly easily

You can download JSON encoding support from PECL

http://pecl.php.net/package/json

$json_enc = json_encode(array(1,2,3));

$json_dec_var = json_decode(‘{ “abc”:12 }’);

javascript:eval(‘{ “abc”:12}’); // return foo.abc in JS

AJAX without XmlHttpRequest Now that you have the basic jist, the cleaver among you must realize that XmlHttpRequest isn’t necessary With some crafty HTML you can do your AJAX request using “standard” browser facilities Step 1: Use Javascript to create a new <SCRIPT> tag in the document Set the source of this script tag dynamically to our PHP backend URL and provide the “output element” ID we are interested in manipulating Have our backend written in PHP process the request and return Javascript manipulating that ID as we saw fit. http://www.phpit.net/article/ajax-php-without-xmlhttprequest/2/

Now that you have the basic jist, the cleaver among you must realize that XmlHttpRequest isn’t necessary

With some crafty HTML you can do your AJAX request using “standard” browser facilities

Step 1: Use Javascript to create a new <SCRIPT> tag in the document

Set the source of this script tag dynamically to our PHP backend URL and provide the “output element” ID we are interested in manipulating

Have our backend written in PHP process the request and return Javascript manipulating that ID as we saw fit.

http://www.phpit.net/article/ajax-php-without-xmlhttprequest/2/

I said it was a synchronous Regardless of the approach you use to generate an AJAX request, always remember that it is an ASYNCHRNONOUS request. Performing a behind the scenes synchronous request stands a very good chance of locking up IE Every second the server takes the respond to the client in a synchronous request is a second the browser is not responding to input Bad.. Bad… BAD

Regardless of the approach you use to generate an AJAX request, always remember that it is an ASYNCHRNONOUS request.

Performing a behind the scenes synchronous request stands a very good chance of locking up IE

Every second the server takes the respond to the client in a synchronous request is a second the browser is not responding to input

Bad.. Bad… BAD

HTTP GET vs. POST This one personally really urkes me about web developers GET is for GETTING data POST is for POSTING data Sending a GET request should never cause an update on the server Reason 1: GET requests should be bookmark-able Reason 2: GET requests should be cache-able If you use AJAX for anything other then retrieving data then use HTTP POST for those actions

This one personally really urkes me about web developers

GET is for GETTING data

POST is for POSTING data

Sending a GET request should never cause an update on the server

Reason 1: GET requests should be bookmark-able

Reason 2: GET requests should be cache-able

If you use AJAX for anything other then retrieving data then use HTTP POST for those actions

Why I am scared of AJAX

One of the biggest problems with AJAX Let’s imagine that each request sent over the wire is like a car driving from point A (the client) to point B (the server) Roads are Networks

Let’s imagine that each request sent over the wire is like a car driving from point A (the client) to point B (the server)

Roads are Networks

One of the biggest problems with AJAX

One of the biggest problems with AJAX Simple requests seem to work just fine…

Simple requests seem to work just fine…

One of the biggest problems with AJAX

One of the biggest problems with AJAX

One of the biggest problems with AJAX

One of the biggest problems with AJAX The problem with AJAX has to do with multiple dependent asynchronous requests You can’t rely on any order of operations in classical AJAX models

The problem with AJAX has to do with multiple dependent asynchronous requests

You can’t rely on any order of operations in classical AJAX models

One of the biggest problems with AJAX

One of the biggest problems with AJAX

One of the biggest problems with AJAX

One of the biggest problems with AJAX

Some requests will happen faster When working with AJAX, always know you cannot rely on one request finishing before the next is triggered Requests can take different lengths of time based on a huge array of factors Server load and Network load come to mind Can really mess up your application Bad news: None of the current AJAX toolkits account for this latency

When working with AJAX, always know you cannot rely on one request finishing before the next is triggered

Requests can take different lengths of time based on a huge array of factors

Server load and Network load come to mind

Can really mess up your application

Bad news: None of the current AJAX toolkits account for this latency

Developing with Latency in mind A number of tools exist for developing AJAX applications with latency in mind AJAX Proxy is a good example http://ajaxblog.com/archives/2005/08/08/ajax-proxy-02 Allows you to simulate latency in your requests You can use it in conjunction with “SwitchProxy” to point your browser at a different proxy server to use it http://www.roundtwo.com/product/switchproxy Not a true solution, but at least let’s you test for the problem.

A number of tools exist for developing AJAX applications with latency in mind

AJAX Proxy is a good example

http://ajaxblog.com/archives/2005/08/08/ajax-proxy-02

Allows you to simulate latency in your requests

You can use it in conjunction with “SwitchProxy” to point your browser at a different proxy server to use it

http://www.roundtwo.com/product/switchproxy

Not a true solution, but at least let’s you test for the problem.

AJAX: Redefining the notion of state? Now that we are talking about AJAX intelligently, let’s talk about a very important aspect to the modern web application: sessions Sessions allow current web applications to maintain state across stateless HTTP requests

Now that we are talking about AJAX intelligently, let’s talk about a very important aspect to the modern web application: sessions

Sessions allow current web applications to maintain state across stateless HTTP requests

Throw cookies away? In AJAX models, these session cookies are no longer necessary In-memory data received from the server during an AJAX request is state Lends itself much more to the classical MVC / Messaging model of client-side applications As long as the user doesn’t “close” the application…. Clicking reload Closing the window …. Then they’re state is being tracked

In AJAX models, these session cookies are no longer necessary

In-memory data received from the server during an AJAX request is state

Lends itself much more to the classical MVC / Messaging model of client-side applications

As long as the user doesn’t “close” the application….

Clicking reload

Closing the window

…. Then they’re state is being tracked

Requests per second (Traditional) Other then actually working, scaling a web application is the most important architectural consideration (accurate) Requests per second is key metric Consider what happens during a single server/single client exchange

Other then actually working, scaling a web application is the most important architectural consideration

(accurate) Requests per second is key metric

Consider what happens during a single server/single client exchange

Requests per second (Traditional) Servers are limited to a maximum requests per second by numerous factors To scale: Make the maximum sustainable RPS number as high as possible Faster script execution times Faster database access Make the most of every request Avoid costly unnecessary handshakes Intelligently segment content

Servers are limited to a maximum requests per second by numerous factors

To scale:

Make the maximum sustainable RPS number as high as possible

Faster script execution times

Faster database access

Make the most of every request

Avoid costly unnecessary handshakes

Intelligently segment content

Requests per second (Traditional) Common scaling trick: static content farms Off-load non-logic-based content serving to lightweight and fast HTTP servers

Common scaling trick: static content farms

Off-load non-logic-based content serving to lightweight and fast HTTP servers

Requests per second (AJAX) Looking at the AJAX philosophy it’s clear a different request pattern exists Relatively heavy and common load spikes Very frequent and relatively quick follow-up requests While some tricks can be borrowed from the old models, clearly a new pattern of scaling must be introduced

Looking at the AJAX philosophy it’s clear a different request pattern exists

Relatively heavy and common load spikes

Very frequent and relatively quick follow-up requests

While some tricks can be borrowed from the old models, clearly a new pattern of scaling must be introduced

Optimizing AJAX pages Single-serve client libraries Use tools to combine multiple JavaScript/CSS files into a single giant file to reduce the load on the server to a single request to load the application logic Can be cached on the client Avoid first-execution spikes Design your applications upon initial execution to perform a single AJAX request to effectively populate the entire page Reduces strain on both the pipeline and on your backend database servers

Single-serve client libraries

Use tools to combine multiple JavaScript/CSS files into a single giant file to reduce the load on the server to a single request to load the application logic

Can be cached on the client

Avoid first-execution spikes

Design your applications upon initial execution to perform a single AJAX request to effectively populate the entire page

Reduces strain on both the pipeline and on your backend database servers

A thought

The Future of AJAX?

Thank you! Questions?