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.. The Plug-in functio
Trang 1How 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.
Trang 2exactly 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
Trang 3Variables, 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
F IGURE 11-4 Using this plug-in you can display your e-mail address while preventing access to most “bots.”
Trang 4use 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>";
}
Trang 5Toggle 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
F IGURE 11-5 Using this plug-in, you can toggle between two sets of text or HTML.
85