Plug in PHP 100 POWER SOLUTIONS- P65 doc

286 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 286 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 How It Works This is the last of the JavaScript-only plug-ins and it is fairly similar to the previous one, Post Ajax Request, except that it handles the passing of arguments back to the server in a slightly different manner, using a GET request. The first thing to remember when making a GET request is that most browsers will cache them if the URL is the same as a previous call, and pull the previously returned result out of memory. To prevent this, the string nocache is given a random value that will be later appended to the request to make the call different each time. The next few lines of code are identical to the previous plug-in and set the variable request up with an XMLHttpRequest object and then set request.onreadystatechange to call the inline function whenever the ready state changes. As before, this function will assign the result returned from the Ajax call to the HTML element indicated by the target parameter. The end of the function is different, though, in that no special headers need sending as this is not a POST request, instead there is just a call to request.open(), passing it three arguments: the command "GET"; the url with a GET query string appended after a ? character, comprising the parameters in params and the nocache anti-caching string; and the value true to force asynchronous requests. How to Use It I wrote this plug-in in such a way that you can call it up in the same manner as Post Ajax Request. Therefore you can use identical code to that shown in the previous plug-in. Make sure you have an element to which you have assigned an id name, and pass that name, along with the name of a PHP program to handle the GET request, and the required parameters, to the plug-in, like this: <div id='info'>This text will be replaced</div> <script> PIPHP_JS_GetAjaxRequest('ajaxget.php', 'url=http://amazon.com/mobile', document.getElementById('info')) // The plug-ins go here </script> As long as you have this code and both the plug-ins PIPHP_JS_GetAjaxRequest() and PIPHP_JS_AjaxRequest() within <script> and </script> tags, in the same web page, then the contents of the <div> will be replaced with that of the Amazon Mobile home page. Note that in this case a slightly different PHP program is used to fetch the requested web page: <?php // ajaxget.php if (isset($_GET['url'])) echo file_get_contents($_GET['url']); ?> It’s pretty much the same as the ajaxpost.php program, except that the array $_POST has been replaced with $_GET. To use the example for this plug-in, you will need to type it in and save the program as ajaxget.php. If you download plug-ins.zip using the Download link at www.pluginphp.com, once extracted you will also find the two files ajaxget.html and ajaxget.php in the folder called 11. 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 287 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 287 Remembering that the x in Ajax stands for XML, you can also handle XML data in exactly the same way (or using the Post Ajax Request plug-in); just ensure that your PHP program outputs data in XML format and then use JavaScript to access the data. Or if you prefer, you can use the JSON (JavaScript Object Notation) format which, as you might imagine, is particularly suited to handling JavaScript. However, this is a book on PHP and explaining how to parse either of these formats is beyond its scope, but I do recommend Ajax: The Complete Reference by Thomas Powell (ISBN 978-0071492164), for further reading. The Plug-in function PIPHP_JS_GetAjaxRequest(url, params, target) { nocache = "&nocache=" + Math.random() * 1000000 request = new PIPHP_JS_AjaxRequest() request.onreadystatechange = function() { if (this.readyState == 4) if (this.status == 200) if (this.responseText != null) target.innerHTML = this.responseText // You can remove these two alerts after debugging else alert("Ajax error: No data received") else alert( "Ajax error: " + this.statusText) } request.open("GET", url + "?" + params + nocache, true) request.send(null) } Protect E-mail You know the dilemma; you need to get your e-mail address out there so that people can contact you, but doing so leaves you open to being added to spam lists by automatic e-mail address harvesting programs. Well, this plug-in has the solution by obfuscating your e-mail address using JavaScript code. Figure 11-4 shows an e-mail address that has been displayed making it both copyable and clickable, but as the inset source view shows, the e-mail address itself doesn’t appear as a whole within the page, because it has been split into three JavaScript variables and then reassembled, meaning that only a sophisticated harvesting “bot,” capable of parsing and running JavaScript, could make sense of it. About the Plug-in This plug-in takes an e-mail address and returns JavaScript code that will display it as a hyperlink without leaving the full e-mail address in the HTML. Upon success, it returns the JavaScript or, on failure (for example, if the e-mail address doesn’t validate), it returns FALSE. It requires the following argument: • $email The e-mail address to obfuscate 84 288 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 288 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 Variables, Arrays, and Functions $t1 PHP integer pointer to the @ in $email $t2 PHP integer pointer to the first period after the @ in $email $e1 PHP string containing the pre @ part of $email $e2 PHP string containing part of $email between @ and the first period $e3 PHP string containing the remainder of $email after the first period e1 JavaScript string copy of PHP variable $e1 e2 JavaScript string copy of PHP variable $e2 e3 JavaScript string copy of PHP variable $e3 How It Works This plug-in only requires that e-mail addresses have at least one character before an @ sign and at least one period somewhere after the @. The remaining characters can be anything, including more periods, and even disallowed characters, since no serious validation is made on the e-mail address. The code uses the PHP strpos() function to locate the position of the @ character in $email, followed by the first period after the @. The values returned are assigned to $t1 and $t2, respectively. If either of these values is zero, then that character is missing and so FALSE is returned because the e-mail address is invalid. This is the only validation performed. Then three variables representing the start, middle, and end portions of $email are assigned to $e1, $e2, and $e3 using the substr() function to extract the parts. FIGURE 11-4 Using this plug-in you can display your e-mail address while preventing access to most “bots.” 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 289 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 289 Finally, some JavaScript within <script> and </script> tags is returned, which makes use of $e1, $e2, and $e3 by first assigning their values to the JavaScript variables e1, e2, and e3. Then a document.write() command is added to the string (this is similar to a PHP echo command) in which an HTML mailto: link is displayed by recombining the parts. How to Use It To use this function, pass it a valid e-mail address and the returned value can then be output to a browser, like this: $email = 'billgates@microsoft.com'; $pemail = PIPHP_ProtectEmail($email); echo "My email address is $pemail"; Or more concisely: echo "My email address is " . PIPHP_ProtectEmail('billgates@microsoft.com'); So, assuming the e-mail address used is me@mysever.com, the plug-in will create the JavaScript required to turn the e-mail address into the following format when viewed in a browser with JavaScript enabled: <a href='mailto:me@myserver.com'>me@myserver.com</a> But all an e-mail harvesting program will see is the following: <script>e1='me'; e2='@myserver'; e3='.com'; document.write('<a href=\'mailto:' + e1 + e2 + e3 + '\'>' + e1 + e2 + e3 + '</a>'); </script> Of course, there is a downside, and that is that people without JavaScript or who have it disabled will not see anything, although that’s likely to be very few people—nevertheless it’s something you should bear in mind when using this plug-in. The Plug-in function PIPHP_ProtectEmail($email) { $t1 = strpos($email, '@'); $t2 = strpos($email, '.', $t1); if (!$t1 || !$t2) return FALSE; $e1 = substr($email, 0, $t1); $e2 = substr($email, $t1, $t2 - $t1); $e3 = substr($email, $t2); return "<script>e1='$e1';e2='$e2';e3='$e3';document.write" . "('<a href=\'mailto:' + e1 + e2 + e3 + '\'>' + e1 " . "+ e2 + e3 + '</a>');</script>"; } 290 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 290 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 Toggle Text A great use for JavaScript is to manipulate the contents of a web page without having to reload it. An effect I always feel is quite professional is the use of toggling to switch elements in and out. For example, Figure 11-5 shows this plug-in being used to display a short explanation of photosynthesis, along with a link to a longer definition. When the link is clicked, instead of a new request being made to the server, JavaScript steps in and hides the current text and link, replacing it with an alternative pair, as you can see in Figure 11-6, where the new text has pushed down the heading on Pollination. If the new link is clicked, the previous text and link will be restored. About the Plug-in This plug-in toggles between two sets of text (or HTML) with accompanying links to cause the toggling when they are clicked. It requires the following arguments: • $text1 The main text to display • $link1 The main link text to display • $text2 The alternate text • $link2 The alternate link text Variables, Arrays, and Functions $token Random integer between 0 and 1,000,000 $out String containing the JavaScript to be returned FIGURE 11-5 Using this plug-in, you can toggle between two sets of text or HTML. 85 . Functions $t1 PHP integer pointer to the @ in $email $t2 PHP integer pointer to the first period after the @ in $email $e1 PHP string containing the pre @ part of $email $e2 PHP string containing part. PHP string containing the remainder of $email after the first period e1 JavaScript string copy of PHP variable $e1 e2 JavaScript string copy of PHP variable $e2 e3 JavaScript string copy of PHP. ajaxget .php. If you download plug- ins.zip using the Download link at www.pluginphp.com, once extracted you will also find the two files ajaxget.html and ajaxget .php in the folder called 11. C