Plug in PHP 100 POWER SOLUTIONS- P63 ppsx

This page intentionally left blank CHAPTER 11 Incorporating JavaScript 278 P l u g - i n P H P : 1 0 0 P o w e r S o l u t i o n s 278 P l u g - i n P H P : 1 0 0 P o w e r S o l u t i o n s J avaScript is a powerful programming language in its own right. Most of the things you can do with other languages like Java, C, and PHP can also be done with JavaScript (although, obviously, you can’t create compiled programs such as device drivers and the like). Its great utility lies in the fact that it runs inside a web browser, and therefore, if you interact with it, you can substantially increase the dynamic features of your web site by adding Web 2.0 functionality such as Ajax calls, the manipulating of elements within a web page, assisting user input, and a whole lot more. Because this is a book on PHP, I have kept the JavaScript code used as basic as possible while still remaining fully featured, so that even if you have never used JavaScript before, you should at least understand what is going on, and see how to modify the plug-ins to your own purposes. Ajax Request Some PHP programmers would argue that the most important use of JavaScript is to provide Ajax functionality to your programs. Whether or not you agree, Ajax is certainly a central part of today’s Internet. Standing for Asynchronous JavaScript and XML, Ajax is really a misnomer because it often has little to do with XML as it can handle all manner of file types. However, when Microsoft first introduced the feature in Internet Explorer 5 (back in 1999), they named the new ActiveX object XMLHttpRequest, and the name has stuck ever since. This plug-in is the pure JavaScript side of the Ajax equation, which requires two programs, one on the client computer and one on the server, to interact with each other. Figure 11-1 shows it being used (along with the following JavaScript plug-in, Post Request) to load the main http://pluginphp.com web page inside a pair of <div>…</div> tags. FIGURE 11-1 Using Ajax techniques, you can load new elements into a page in the background. 81 C h a p t e r 1 1 : I n c o r p o r a t i n g J a v a S c r i p t 279 C h a p t e r 1 1 : I n c o r p o r a t i n g J a v a S c r i p t 279 About the Plug-in This plug-in doesn’t take any arguments but returns an XMLHttpRequest object upon success; otherwise, it returns false. Variables, Arrays, and Functions request XMLHttpRequest object or the value false on failure How It Works This and the next two plug-ins in this chapter are comprised entirely of JavaScript code, rather than the amalgam of JavaScript and PHP used by the rest of the plug-ins. The plug-in is a little more complicated than it ought to be due to the different methods various browser creators have chosen to implement Ajax. For example, although Microsoft came up with the XMLHttpRequest object in Internet Explorer 5, it then decided to use an entirely different approach for IE6. And then other browser developers chose yet another away of doing things. This means that there are three types of Ajax methods to take into account, according to which browser is in use. Thankfully, there’s an easy way to apply these in turn without creating errors, and that’s to use JavaScript’s try … catch syntax. With it you can try a command using a try statement, and if it fails, program execution will continue at the matching catch statement. Furthermore, you can nest these inside each other, so you can place another try statement inside a catch statement. This is exactly the technique employed in this plug-in, except that I choose to test for non-Microsoft browsers first by assigning the variable request the object returned by calling up a new XMLHttpRequest() object. This will usually succeed on Firefox, Chrome, Safari, and Opera (as well as other browsers), but will fail on all versions of Internet Explorer. If this happens, an attempt is then made to assign request the value returned from creating the new ActiveX object Msxml2.XMLHTTP by attempting to use the command new ActiveXObject() with that argument. If the browser is Internet Explorer 6, then it will succeed; otherwise, it will fail. Again, on failure an attempt is made to assign request the result of creating the new ActiveX object Microsoft.XMLHTTP by attempting to use the command new ActiveXObject() with that argument. If the browser is Internet Explorer 7 or later, this call will succeed. Otherwise, if it fails, the browser has no identifiable means of creating an XMLHttpRequest object and so false is returned to indicate failure. Upon success, a new XMLHttpRequest object will have been created and assigned to request, which is then returned by the plug-in. How to Use It To use this plug-in, you need to incorporate it within the HTML of a web page in between a pair of <script> … </script> tags. If you want to be properly W3C-standards compliant, you should use <script type="text/JavaScript"> to start a section of JavaScript, but you can normally ignore that parameter if you choose. 280 P l u g - i n P H P : 1 0 0 P o w e r S o l u t i o n s 280 P l u g - i n P H P : 1 0 0 P o w e r S o l u t i o n s You can then call the plug-in from within the same (or another) section of JavaScript, like this: request = new PIPHP_JS_AjaxRequest() As long as false wasn’t returned, the variable request will now contain an XMLHttpRequest object which you can use to perform Ajax calls. However, on its own you won’t get very far because you also need another JavaScript plug-in to use this request to send either a POST or a GET request back to the web server. The first of these plug-ins, Post Ajax Request, comes next. The Plug-in function PIPHP_JS_AjaxRequest() { try { var request = new XMLHttpRequest() } catch(e1) { try { request = new ActiveXObject("Msxml2.XMLHTTP") } catch(e2) { try { request = new ActiveXObject("Microsoft.XMLHTTP") } catch(e3) { request = false } } } return request } Post Ajax Request The previous plug-in provides a means of creating an XMLHttpRequest object, with which this plug-in makes a POST request to the server to request some data to be transferred back to the browser. Both of these requests happen seamlessly in the background with the user generally unaware that such things are taking place. A POST request is where data is sent to the server within header messages, rather than as part of a URL tail (or query string), as is the case with GET requests. Figure 11-2 shows this plug-in being used to load Facebook’s mobile web site main page at http://m.facebook.com, replacing the contents of a <div> … </div> pair of tags. 82 . the server, to interact with each other. Figure 11-1 shows it being used (along with the following JavaScript plug- in, Post Request) to load the main http://pluginphp.com web page inside a pair. and the next two plug- ins in this chapter are comprised entirely of JavaScript code, rather than the amalgam of JavaScript and PHP used by the rest of the plug- ins. The plug- in is a little more. manipulating of elements within a web page, assisting user input, and a whole lot more. Because this is a book on PHP, I have kept the JavaScript code used as basic as possible while still remaining