Ryan A wrote:
Just been googleing and trying out different AJAX frameworks..:
From PEAR HTML_AJAX
Gauva
My-Bic
AjaxAC
and quite a few more....and it happened, I confused myself :-(
For some reason HTML_AJAX is not working on my local machine (windows based,
I am getting runtime errors with the examples) and it seems quite
bulky. I have even tried the YAHOO one, which Rasmus suggested to another
guy some time back (found it
after looking in the archives) unfortunatly could not find much
documentation that I could understand...
It's really not hard. Remember my 30s AJAX post a while back? Well,
here is a revised version using the Yahoo! library. You can try it on
this slide:
http://talks.php.net/show/yul/14
There are basically 3 parts to any AJAX app. The initial HTML that the
user first loads up. In this case it is:
<form name="main" action="javascript:sendform('yajax.php','main')">
Location: <input type="text" name="loc" />
</form>
So, just a form with a single text field where the user can enter a
location. Easy enough so far. When the user hits enter the action line
there says to call the sendform() Javascript function and pass it the
strings 'yajax.php' and 'main'. 'yajax.php' is the name of the script
to post to and 'main' is the name of the form that contains the data to
post.
Ok, now to the second part, the Javascript portion that implements this
sendform() function using the Yahoo libs. You could have this in a
separate .js file, but to keep it simple I have just put it into the
same file in the head section:
<script language="javascript" src="/yui/YAHOO.js"></script>
<script language="javascript" src="/yui/connection.js"></script>
<script language="javascript">
<!--
var fN = function callBack(o) {
var resp = eval('(' + o.responseText + ')');
img = document.createElement('img');
img.src = resp.Result; img.width=300; img.height=300; img.border=1;
document.body.appendChild(img);
}
var callback = { success:fN }
function sendform(target,formName) {
YAHOO.util.Connect.setForm(formName);
YAHOO.util.Connect.asyncRequest('POST',target,callback);
}
// -->
</script>
This might look a bit complex, but the first part just includes the
Yahoo stuff. YAHOO.js and connection.js which are part of the ZIP file
you can get from here: http://developer.yahoo.com/yui/downloads/yui.zip
Next we have the callback function that will be called when we receive
data back from the server. This does an eval() which is simple, but if
you don't trust your source you might want to use
http://www.json.org/js.html instead. After parsing the returned json we
create an IMG tag, set some attributes on it and append it to the
document body. And finally the sendform function is a simple 2-liner
that goes and fetches the form data from the passed in formName followed
by the asynchronous backend request to the server.
The final part is the really easy part. The server-side PHP part.
<?php
if(!empty($_POST['loc'])) {
$src =
"http://api.local.yahoo.com/MapsService/V1/mapImage?appid=YahooDemo";;
$src.= "&location=".urlencode($_GET['loc']).
"&output=php&image_width=300&image_height=300&zoom=7";
header("Content-type: application/x-json");
echo json_encode(unserialize(file_get_contents($src)));
exit;
}
?>
This makes a call to the Yahoo! map image api to get a map tile for the
location the user entered and it returns the image url json-encoded.
You will need the pecl/json extension installed do this encoding or
failing that there is a PEAR JSON as well.
You are not going to be able to avoid writing a little bit of Javascript
if you are going to do asynchronous backend requests (AJAX). You need
to send the request somehow from Javascript and you need to read the
response in Javascript. On the other hand, it is mostly just DOM
manipulation so if you know DOM in PHP it isn't hard to pick up.
-Rasmus
--
PHP General Mailing List (http://www.php.net/)
To unsubscribe, visit: http://www.php.net/unsub.php
