Plug in PHP 100 POWER SOLUTIONS- P64 docx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (299 KB, 5 trang )
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
281
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
281
About the Plug-in
This plug-in takes the URL of a web page, any parameters to pass to it and a Document
Object Model (DOM) target for inserting the result. It doesn’t return any parameters, but
upon success the contents of target are populated with the result returned from the web
server. Upon failure, an alert box will appear to aid with debugging. You may wish to
disable this behavior on a production web site. It requires the following arguments:
• url A web page/program to call
• params Any POST parameters to pass, separated by & characters, like this:
var1=val1&var2=val2
• target A DOM element in which to place the result of the call
Variables, Arrays, and Functions
request XMLHttpRequest object, or the value false on failure
How It Works
This is the second plug-in that is entirely written in JavaScript. It first calls PIPHP_JS_
AjaxRequest() to create a new XMLHttpRequest object in request. Next the
onreadystatechange event of request is assigned to an inline anonymous function.
When this state changes, which means a step in the Ajax process has completed, the
function is called. There is only one state of interest to this function and that’s the value 4,
which indicates a completed Ajax call. This value is in this.readyState.
FIGURE 11-2 A one-line PHP program interfaces with a browser via Ajax to insert a web page into an HTML
element.
282
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
282
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
In JavaScript the keyword this applies to the current object being processed. Here it
could equally be replaced with the word request to directly access the object. Next the
function only wants to know if the call completed successfully, which is indicated by this.
status having a value of 200.
With both of those cases being true this.responseText is tested to ensure a value of
null hasn’t been returned, and if not, the innerHTML contents of the target argument is
assigned the value returned by the Ajax call in this.responseText.
So, if target is being used to assign the Ajax result to, for example, a <div> with the id
'info', then target will have been give the value:
document.getElementById('info')
This means that the statement:
target.innerHTML = this.responseText
is equivalent to:
document.getElementById('info').innerHTML = this.responseText
Therefore the text within the two following <div> tags would be replaced with the new
text from the Ajax call:
<div id='info'>The contents of this DIV will be replaced</div>
If the value of this.responseText is null, an alert message appears, as also happens
if this.status doesn’t have the value 200. These alert commands are useful while you
are debugging code but you may want to remove them when using this plug-in on a
production server.
After assigning the function to request.onreadystatechange, request.open() is
called and passed three parameters: "POST", for a POST request; the URL to access in url;
and the value true, indicating that the request should take place asynchronously.
Next, three headers have to be sent to the server. These are to tell the server to expect
URL encoded form data, to pass the length of the data the server should expect to receive,
and to then close the header connection.
Finally, the Ajax request is initiated using a call to request.send() with an argument
of params.
How to Use It
The following example shows how you would use this function. To help you see what is
going on I have included both the Ajax Request and the Post Ajax Request plug-ins within the
example, which is totally complete except for the PHP component (which comes afterwards):
<html><head><title>AJAX POST Example</title>
</head><body><center />
<h1>Loading a page in DIV tags</h1>
<div id='info'>The contents of this DIV will be replaced</div>
<script type="text/javascript">
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
283
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
283
PIPHP_JS_PostAjaxRequest('ajaxpost.php',
'url=
document.getElementById('info'))
function PIPHP_JS_PostAjaxRequest(url, params, target)
{
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("POST", url, true)
request.setRequestHeader("Content-type",
"application/x-www-form-urlencoded")
request.setRequestHeader("Content-length",
params.length)
request.setRequestHeader("Connection", "close")
request.send(params)
}
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
}
</script>
284
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
284
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
Note that the entire Facebook page is being loaded into the <div>, in the same way as if
you had included it within an <iframe> element. This is purely an example of how to
incorporate such a page, and you do not gain access to the Facebook API using this method.
Instead a surfer using such an embedded page to log in will be directed straight to the
Facebook servers for the remainder of the process.
To try this example for yourself, type it in and save it as ajaxpost.html. You can also
download it from the Download link at www.pluginphp.com. After extracting the file plug-ins.
zip, you will find the example in the location 11/ajaxpost.html.
However, don’t run the file until you also have the PHP part of the equation on the server.
It’s not a large program but it’s very important because it’s the part of the process that receives
requests from the browser and responds to them. In this case, it returns a requested web page:
<?php // ajaxpost.php
if (isset($_POST['url'])) echo file_get_contents($_POST['url']);
?>
What this program does is check whether the variable url has been posted to it, and if so,
it loads the page pointed to by the value of url into memory using the function file_get_
contents(). It then uses the echo command to return the URL to the calling program—in
this case, the Ajax call made by the browser. This file should be typed in and saved as ajaxpost
.php, or you can find it in the same folder as the ajaxpost.html program if you download it from
the companion web site.
Of course, your PHP programs are likely to be far more complex than this one, and may
return all manner of items to the browser, such as information on available usernames when
signing up to a site, or new messages on a social networking site, and so on.
The Plug-in
function PIPHP_JS_PostAjaxRequest(url, params, target)
{
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("POST", url, true)
request.setRequestHeader("Content-type",
"application/x-www-form-urlencoded")
request.setRequestHeader("Content-length",
params.length)
request.setRequestHeader("Connection", "close")
request.send(params)
}
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
285
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
285
Get Ajax Request
GET requests are also supported via Ajax and they can achieve the same results as POST requests.
The only main difference is that the data sent back to the server is passed in the tail of a URL,
known as the query string, rather than in HTML headers. Figure 11-3 shows the Amazon
mobile home page being loaded into a <div> … </div> pair of tags using this plug-in.
About the Plug-in
This plug-in takes the URL of a web page, any parameters to pass to it, and a Document
Object Model (DOM) target for inserting the result. It doesn’t return any parameters, but
upon success, the contents of target are populated with the result returned from the web
server. Upon failure, an alert box will appear to aid with debugging. You may wish to
disable this behavior on a production web site. It requires the following arguments:
• url A web page or program to call
• params Any GET parameters to pass, separated by & characters, like this:
var1=val1&var2=val2
• target A DOM element in which to place the result of the call
Variables, Arrays, and Functions
nocache
String randomly assigned a value to overcome caching
request XMLHttpRequest object, or the value false on failure
FIGURE 11-3 Ajax works equally well with either POST or (as shown here) GET requests.
83
