AJAX and PHP

phpnut

I bought Ajax For Dummies on Amazon about a week ago and have since built by first, yet simple, Ajax script. It checks to see if a username is available or not while they're typing... a lot like Google Suggest.

Check it out: http://naturesmagazine.com/membership/register.php

Try entering "webmaster" or "andrew" in the username field and it'll tell you they're taken.

Nuvo

Yes, it works, but you might want to fine tune the update timing as it seems to break down if you type the name in too fast, meaning no message is shown.
If you type slow enough, it works again, but some people are pretty quick, and I was only using my index fingers to type (though I can do this pretty quickly because I'm weird).

daboss

wow - pretty cool for an ajax newbie. is it difficult? i want to learn ajax too but am currently focusing on css. cannot focus on too many things at one go...

phpnut

Thanks guys. I really don't know how to mess around with the timing, it's all based on "onkeyup" and again, I'm a newbie. How can I play around with the timing?

--Andrew

Nuvo

Usually, you'd use something called observers, if you can, that is.
Basically, when you're using key presses, things can get a bit confused when the typist is going too fast for the script to manage.
In Rails, which is using Prototype and script.aculo.us javascript libraries, you get easy to use wrappers for observers, which are found within the prototype.js lib.
Prototype is designed to make life easier for AJAX \ web 2.0 developers, and it can be used in pretty much any AJAX app, not just Rails apps (though one of it's features actually mimics Ruby to make loops easier).

This is the basic prototype code ripped from my app (generated by Rails' inbuilt wrappers):
[html]
<form action="/search" method="post">
<input id="searchkey" name="searchkey" type="text" />
<input name="commit" type="submit" value="Search" />
</form>
<script type="text/javascript">
//<![CDATA[
new Form.Element.Observer('searchkey', 0.5, function(element, value) {new Ajax.Updater('searchresult', '/dynamic_search', {asynchronous:true, evalScripts:true, parameters:value})})
//]]>
</script>
<div id="searchresult"></div>[/html]
Which breaks down into:
[html]
<!-- Data goes in, magic comes out... -->
<form action="/search" method="post">
<input id="searchkey" name="searchkey" type="text" />
<input name="commit" type="submit" value="Search" />
</form>

<!-- Javascript using prototype lib -->
<script type="text/javascript">
//<![CDATA[
new Form.Element.Observer(
//Keep an eye on the input with the I.D. of 'searchkey'.
'searchkey',
//Fire every 0.5 (half) of a second.
0.5,
//OMG this isn't overly pretty, but basically, it's saying to update the div with an I.D. of 'searchresult' with the output of the 'dynamic_search' function \ action (actually, that's the relative URL to it, which explains the slash).
function(element, value) {new Ajax.Updater('searchresult', '/dynamic_search', {asynchronous:true, evalScripts:true, parameters:value})})
//]]>
</script>

<!-- Updates from the AJAX will go in this div because of it's I.D. -->
<div id="searchresult"></div>[/html]

Of course, firing off events every half a second might not be the perfect sollution, but it does stop the script from dying due to lagging as it doesn't go on if a key is pressed, but on timing instead.
0.5 seconds is fast enough to give the user a sense that the web app is actually reacting to their key presses in real time without really hitting you or the end user (remember, AJAX is basically JavaScript and a server side language, so half of it is done within the browser and could cause slowness of crashing if you try doing too much).

I still don't like AJAX due to it's poor use by some people, but I view it as I view JavaScript and Flash... It's one of those things that you can't avoid and despite not being my favourite web thing, I can't deny that it has some uses, especially when you don't have to write it or worry about bad code (Rails is generally good at code output).