Help me AJAXify a portion of my project without overwhelming me.

January 8, 2008 8:41 AM

Help me AJAX-ify a very simple web process in PHP. Links to very simple AJAX tutorials much appreciated.

I've been reading up on AJAX technologies for a couple weeks. I've tried out a few, but I am still stuck with taking existing tutorials and modifying them slightly without really understanding behind-the-scenes. That is, I understand conceptually what the tutorials are showing me, but not very much programmatically. I'm fairly capable with PHP and HTML. I can read and write basic Javascript, but it seems like the AJAX technologies require a deeper level of understanding.

Having said that, all I'm really looking to do is rewrite a very simple portion of my project. Hopefully taking this small step will help me better understand what AJAX can really help me do long-term.

I have one PHP script, delete.php, which does an UPDATE SQL statement setting Deleted = True for a given ID, passed via HTML GET from other pages.

This seems like the perfect thing to AJAXify, but all of the tutorials I can find jump straight into Google Mashups, SOAP, JSON, XML, etc. I don't need these yet. What are some very basic tutorials that would help me replace my delete.php script with something more efficient?

posted by odinsdream to computers & internet (7 comments total)

Use prototype.js and follow this simple example.
posted by xmutex at 8:48 AM on January 8, 2008

I found Head Rush AJAX was a good book that went from the ground up to explain AJAX.
posted by GuyZero at 9:01 AM on January 8, 2008

I flipped through Head Rush AJAX at my old workplace and disliked it (it's more picture-y than content-y), but you may find it useful if you're having trouble with AJAX concepts.

Really, what you should do:

1. Pick a framework. I don't think it makes a lot of sense to deal with cross-browser javascript on your own in order to get basic 'AJAX'-y functionality. After using mootools, dojo, and jQuery, I prefer jQuery, although moo-tools is also very good (and a little lighter-weight). Some people may say it's a waste for you to have a framework when you're only doing a single AJAX call, but I think it'll save you a lot of heartbreak at only a small bandwidth cost to the user (really, mootools minified is pretty small).
2. Install firebug. I'm of the opinion it is absolutely worthless to work with javascript without firebug installed. Do not enable it for all websites -- you'll make firefox extremely crashy -- just enable it for the one you need.
3. Use the ajax get callback for the framework you've chosen. In jQuery, this would be as simple as something like $.ajax('delete.php',{id:my_id},function(data){alert('optional function callback after my ajax call completes!')});

Keep in mind it's considered somewhat bad form to use GET callbacks to modify database information without some sort of confirmation/token/extra security (due to XSS attacks), but lots of people do it anyways. I'm actually not up to speed on what is 100% best practice on this issue (because there has to be a reasonable way to handle it -- POST callbacks can be scripted too, so that's no failsafe method).
posted by fishfucker at 9:18 AM on January 8, 2008

ps, if you use mootools, they have great onsite docs; if you use jquery, I've found visualjquery.com (a jquery reference), to be invaluable.
posted by fishfucker at 9:19 AM on January 8, 2008

Beware of using HTTP GET requests for deletion, modification, etc. Browsers (IE7 in particular) can cache GET requests unless specifically told not to in headers, which means that sometimes, you might think an action is occurring when actually the request never even got sent. (I speak from experience: that was one awful afternoon of debugging)

As far as AJAX code goes, the canonical example goes like this:

// Following few lines, taken from Wikipedia, for IE support

if( !window.XMLHttpRequest ) XMLHttpRequest = function(){

        try{ return new ActiveXObject("MSXML3.XMLHTTP") }catch(e){}

        try{ return new ActiveXObject("MSXML2.XMLHTTP.3.0") }catch(e){}

        try{ return new ActiveXObject("Msxml2.XMLHTTP") }catch(e){}

        try{ return new ActiveXObject("Microsoft.XMLHTTP") }catch(e){}

        throw new Error("Could not find an XMLHttpRequest alternative.")

};

var x = new XMLHttpRequest();  

x.onreadystatechange = function() {if (x.readyState == 4) do_something(x.responseXML);};

x.open('GET','http://path/to/delete.php?some=data&other=data',true);

x.send('')

The MIME type returned by delete.php must be, IIRC, 'text/xml'. Also, the domain ('path') above of the URL you're getting must be the same as the domain that the JavaScript is coming from.

If all goes well, in the example above, x.responseXML will be, when it is used, an XML document that can be inspected using the JavaScript DOM API (my worst enemy).

The Wikipedia article for XMLHttpRequest looks pretty good too.
posted by goingonit at 10:00 AM on January 8, 2008

That's very interesting about GET. The reason I was using it, despite being aware of the theoretical problem, was that I couldn't figure out an easy way to use POST for this purpose. Each line in my table includes a link to the delete.php page that's formed inside a PHP loop that provides the appropriate ID for that record.

Is there a better way to do that with POST?

As for the AJAX stuff, I'll take a look into these frameworks. Much appreciated!
posted by odinsdream at 11:17 AM on January 8, 2008

IIRC, this sitepoint tutorial was the one that mostly hit the aha! point for me.

Adding Ajax is also quite good, with a few other breakthrough moments for me in understanding what I was doing. Especially good if you have code that's already working in a non-Ajax way. (Disclaimer: I was a tech reviewer.)
posted by epersonae at 2:18 PM on January 8, 2008