¥åßßå
07-28-2008, 07:08 PM
Javascript is still required
As a follow on from something I mentioned in this post ( Creating Tag Clouds? The nuts and bolts.. (http://www.htmlforums.com/web-20-websites-technology-discussion/t-creating-tag-clouds-the-nuts-and-bolts-105785.html) ) I thought I'd share a method of achieving the "AJAX effect", without the AX bit. For those of you who don't know AJAX stands for Asynchronous Javascript And XML, you can find a full description of what it is and how it works on wikipedia ( wikipedia : Ajax (programming) (http://en.wikipedia.org/wiki/AJAX) ). However, there is another way to achieve the same effect without using the XMLHttp Request method ( wikipedia : XMLHttpRequest (http://en.wikipedia.org/wiki/XMLHttpRequest) ) which has the advantage that it's able to make cross-(sub)domain requests, which is impossible to do with AJAX, and something that we require for version 3 of our blog software ( b2evolution (http://b2evolution.net) ) so that it can still fulfil it's "multi-domain" aspect and we can add all the fancy bells and whistles that are in the pipeline as several of these need the ability to communicate with admin which can easily be on a separate (sub)domain from the frontend.
How does it work?
Creating a request is pretty simple, you just add a <script> tag to the pages <body> pointing to the url of your choice. This url can be on any (sub)domain you like as there are no cross-domain restrictions. In the example below the scripts "answer" is going to be pulled from my own blogs url ( innervisions.org.uk ) to show you that it really does work across domains ;) The url can also contain any $_GET ( php.net : $_GET (http://uk.php.net/manual/en/reserved.variables.get.php) ) variables that you like. This leads us to the 2 limitations of this method :
1) The request can only use $_GET
2) The response must be a javascript response ( see example below )
Once the request hits the server it can do whatever it likes with the variables passed and then "reply" to the requesting page by imitating a javascript file. This basically means that it has to set the correct headers and reply using normal javascript syntax. It's not as hard as it sounds.
Example code
To show you how it works we'll do a really easy example that takes the text typed into a box, sends it to the server which will reverse it and send it back to the calling page. The code on the calling page looks like this :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-UK" lang="en-UK">
<head>
<title>test</title>
</head>
<body>
<label for="theText">Type in the text to be reversed : <input type="text" name="theText" id="theText" /></label> <button onclick="reverseMe();">Reverse</button>
<script type="text/javascript">
function reverseMe()
{
var theText = document.getElementById( 'theText' ).value; // grab the text
var the_call = document.createElement( 'script' ); // create script element
the_call.src = 'http://innervisions.org.uk/nonAjax.php?theString='+theText; // set the url
the_call.type = 'text/javascript'; // to be sure to be sure
document.body.appendChild( the_call ); // add script to body and let browser do the rest
}
function serversReply( theAnswer )
{
window.alert( 'The server said : '+theAnswer ); // stun the crowd with a reply from the server
}
</script>
</body>
</html>
The code for the page being called looks like this ( note : it's very basic and it can be "broken", but it's just for example huh? ;) ) :
<?php
$theText = ( empty( $_GET['theString' ] ) ? '' : $_GET['theString'] ); // grab the text to be reversed
if( $theText )
{ // we have some text, reverse it
$theAnswer = strrev( $theText );// reverse the text
}
else
{ // we don't have any text
$theAnswer = 'Gimme summat to do!'; // inform the user we're bored
}
$theAnswer = str_replace( "'", "\'", $theAnswer ); // single quotes would break the reply
header( 'Content-Type: text/javascript' );// set the correct mime type
echo 'serversReply( \''.$theAnswer.'\');';// trigger the function on the calling page
?>
So, does it work?
Try it for yourself ;) ( AstonishMe : Ajax without the ax (http://astonishme.co.uk/web.php/ajax-without-the-ax) ).
¥
As a follow on from something I mentioned in this post ( Creating Tag Clouds? The nuts and bolts.. (http://www.htmlforums.com/web-20-websites-technology-discussion/t-creating-tag-clouds-the-nuts-and-bolts-105785.html) ) I thought I'd share a method of achieving the "AJAX effect", without the AX bit. For those of you who don't know AJAX stands for Asynchronous Javascript And XML, you can find a full description of what it is and how it works on wikipedia ( wikipedia : Ajax (programming) (http://en.wikipedia.org/wiki/AJAX) ). However, there is another way to achieve the same effect without using the XMLHttp Request method ( wikipedia : XMLHttpRequest (http://en.wikipedia.org/wiki/XMLHttpRequest) ) which has the advantage that it's able to make cross-(sub)domain requests, which is impossible to do with AJAX, and something that we require for version 3 of our blog software ( b2evolution (http://b2evolution.net) ) so that it can still fulfil it's "multi-domain" aspect and we can add all the fancy bells and whistles that are in the pipeline as several of these need the ability to communicate with admin which can easily be on a separate (sub)domain from the frontend.
How does it work?
Creating a request is pretty simple, you just add a <script> tag to the pages <body> pointing to the url of your choice. This url can be on any (sub)domain you like as there are no cross-domain restrictions. In the example below the scripts "answer" is going to be pulled from my own blogs url ( innervisions.org.uk ) to show you that it really does work across domains ;) The url can also contain any $_GET ( php.net : $_GET (http://uk.php.net/manual/en/reserved.variables.get.php) ) variables that you like. This leads us to the 2 limitations of this method :
1) The request can only use $_GET
2) The response must be a javascript response ( see example below )
Once the request hits the server it can do whatever it likes with the variables passed and then "reply" to the requesting page by imitating a javascript file. This basically means that it has to set the correct headers and reply using normal javascript syntax. It's not as hard as it sounds.
Example code
To show you how it works we'll do a really easy example that takes the text typed into a box, sends it to the server which will reverse it and send it back to the calling page. The code on the calling page looks like this :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-UK" lang="en-UK">
<head>
<title>test</title>
</head>
<body>
<label for="theText">Type in the text to be reversed : <input type="text" name="theText" id="theText" /></label> <button onclick="reverseMe();">Reverse</button>
<script type="text/javascript">
function reverseMe()
{
var theText = document.getElementById( 'theText' ).value; // grab the text
var the_call = document.createElement( 'script' ); // create script element
the_call.src = 'http://innervisions.org.uk/nonAjax.php?theString='+theText; // set the url
the_call.type = 'text/javascript'; // to be sure to be sure
document.body.appendChild( the_call ); // add script to body and let browser do the rest
}
function serversReply( theAnswer )
{
window.alert( 'The server said : '+theAnswer ); // stun the crowd with a reply from the server
}
</script>
</body>
</html>
The code for the page being called looks like this ( note : it's very basic and it can be "broken", but it's just for example huh? ;) ) :
<?php
$theText = ( empty( $_GET['theString' ] ) ? '' : $_GET['theString'] ); // grab the text to be reversed
if( $theText )
{ // we have some text, reverse it
$theAnswer = strrev( $theText );// reverse the text
}
else
{ // we don't have any text
$theAnswer = 'Gimme summat to do!'; // inform the user we're bored
}
$theAnswer = str_replace( "'", "\'", $theAnswer ); // single quotes would break the reply
header( 'Content-Type: text/javascript' );// set the correct mime type
echo 'serversReply( \''.$theAnswer.'\');';// trigger the function on the calling page
?>
So, does it work?
Try it for yourself ;) ( AstonishMe : Ajax without the ax (http://astonishme.co.uk/web.php/ajax-without-the-ax) ).
¥