Ajax and PHP

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

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

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

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

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

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.

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="JavaScript">  </SCRIPT>

“ 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

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

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

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

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

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/

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

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

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

Simple requests seem to work just fine…

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

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

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.

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

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

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

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

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

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

A thought

The Future of AJAX?

Thank you! Questions?

http://www.coggeshall.org	103
http://localhost	40
http://onwebdev.blogspot.com	38
http://www.slideshare.net	15
http://kaloyan.info	6
http://static.slidesharecdn.com	2
http://192.168.10.100	1
http://s3.amazonaws.com	1
http://wildfire.gigya.com	1
http://www.aninhacamelo.com.br	1

Ajax and PHP

by John Coggeshall on Nov 06, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

10 Embeds 208

Statistics

Ajax and PHP — Presentation Transcript