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.
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 XMLHttpRequestobject 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.
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
}
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… catchsyntax. With it you can try a
command using a trystatement, and if it fails, program execution will continue at the
matching catchstatement. Furthermore, you can nest these inside each other, so you can
place another trystatement inside a catchstatement.
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 requestthe 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 requestthe value returned
from creating the new ActiveX object Msxml2.XMLHTTPby attempting to use the command
new ActiveXObject()with that argument.
Post Ajax Request
The previous plug-in provides a means of creating an XMLHttpRequestobject, with which
this plug-in makes a POSTrequest 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 POSTrequest 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 GETrequests.
this plug-in makes a POSTrequest 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 POSTrequest 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 GETrequests.
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>
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 urlhas been posted to it.
{
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>
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 urlhas been posted to it.