PHP AND AJAX

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? • 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 Oct. 18, 2005 #3 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 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 • 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 Oct. 18, 2005 #6 Don‟t confuse technologies • Is AJAX Gmail / Google Maps? • Is AJAX Prototype or Script.aculo.us? • Is AJAX Ruby-on-Rails?  No  No  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 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 • Requests are generally made in conjunction with a particular Javascript event out the city / state performing an entirely new request  i.e. onBlur of a zip-code field which automatically finds Oct. 18, 2005 #9 “Traditional” AJAX • Okay, so here we go: • •  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 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 Oct. 18, 2005 # 11 Establishing a Protocol • Now that you’ve made a request back to the  This is where things really go amuck web server (in this case, using PHP and HTTP GET) time to deal with the response can be anything       • There is no standard AJAX protocol, the data 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 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