Ajax and PHP

John Coggeshall

Copyright 2006, Zend Technologies Inc.

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

Oct. 18, 2005

#2

Why are we here?

Were here to discuss AJAX
   
and PHP and XML and Javascript and Networks

In this three hour tutorial, Ill be explaining a

number of AJAX-related concepts

Oct. 18, 2005

#3

Fair Warning
Ill 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

 Dont expect a lot of flashy AJAX demos here

Oct. 18, 2005

#4

The basics
So, what does AJAX stand for anyway?
 Asynchronous Javascript and XML

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

Oct. 18, 2005

#5

Asynchronous Javascript
AJAX allows us to take advantage of the server for
information, while leaving the GUI-related items to the client Its not a new technology  Just has a neat acronym now Hows 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

Oct. 18, 2005

#6

Dont 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.

Oct. 18, 2005

#7

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"> <!-pic1= new Image(100,25); pic1.src="http://example.com/getRandomImage.php"; //--> </SCRIPT>

Oct. 18, 2005

#8

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

Oct. 18, 2005

#9

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!

Oct. 18, 2005

# 10

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 dont know to ensure youre creating the proper object the proper way

My solution: Google
 This problem has been solved a million times over so I
wont re-explain the wheel here

Oct. 18, 2005

# 11

Establishing a Protocol
Now that youve 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

Oct. 18, 2005

# 12

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

Oct. 18, 2005

# 13

AJAX without XmlHttpRequest

Now that you have the basic jist, the cleaver among you
must realize that XmlHttpRequest isnt 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-withoutxmlhttprequest/2/

Oct. 18, 2005

# 14

I said it was asynchronous

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

Oct. 18, 2005

# 15

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

Oct. 18, 2005

# 16

Why I am scared of AJAX

Copyright 2006, Zend Technologies Inc.

One of the biggest problems with AJAX

Lets 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

Oct. 18, 2005

# 18

One of the biggest problems with AJAX

Oct. 18, 2005

# 19

One of the biggest problems with AJAX

Simple requests seem to work just fine

Oct. 18, 2005

# 20

One of the biggest problems with AJAX

Oct. 18, 2005

# 21

One of the biggest problems with AJAX

Oct. 18, 2005

# 22

One of the biggest problems with AJAX

Oct. 18, 2005

# 23

One of the biggest problems with AJAX

The problem with AJAX has to do with multiple
dependent asynchronous requests
 You cant rely on any order of operations in classical
AJAX models

Oct. 18, 2005

# 24

One of the biggest problems with AJAX

Oct. 18, 2005

# 25

One of the biggest problems with AJAX

Oct. 18, 2005

# 26

One of the biggest problems with AJAX

Oct. 18, 2005

# 27

One of the biggest problems with AJAX

Oct. 18, 2005

# 28

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

Oct. 18, 2005

# 29

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 lets you test for

the problem.

Oct. 18, 2005

# 30

AJAX: Redefining the notion of state?

Now that we are talking about AJAX intelligently,
lets talk about a very important aspect to the modern web application: sessions
 Sessions allow current web applications to maintain
state across stateless HTTP requests

Oct. 18, 2005

# 31

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 doesnt close the application.
Clicking reload Closing the window

 . Then theyre state is being tracked

Oct. 18, 2005

# 32

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

Oct. 18, 2005

# 33

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

Oct. 18, 2005

# 34

Requests per second (Traditional)

Common scaling trick: static content farms
 Off-load non-logic-based content serving to
lightweight and fast HTTP servers

Oct. 18, 2005

# 35

Requests per second (AJAX)

Looking at the AJAX philosophy its 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

Oct. 18, 2005

# 36

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

Oct. 18, 2005

# 37

A thought

Oct. 18, 2005

# 38

The Future of AJAX?

Copyright 2006, Zend Technologies Inc.

Thank you!
Questions?

Copyright 2006, Zend Technologies Inc.