Comments on: AJAX for idiots.

Question: AJAX for idiots.

TunnelArmr — Wed, 05 Apr 2006 15:54:51 -0800

Stupid web development question about updating a database on a mouse click without re-loading the page (AJAX required?)

I've taken it upon myself to learn PHP and MySQL for a very basic website I want to build. Basically, I have a database with a bunch of text entries and I want the site to dump them out based on various sorting or restrictions. Simple enough.

The part I need help with is that I want to give users a way to "rate" each item, so next to each line in the list there is a little thumbs up icon or star or something. I need a way for a user to click on the icon and have it update the "score" of that icon in the MySQL DB without refreshing the page or taking them to a different page. This is probably pretty simple to do, but I don't really know where to begin...Can I do this with pure JavaScript? Any good code templates for this sort of thing? Do I have to learn AJAX-y techniques?

As an example, think about the gMail "star" thing. When you click on the star, it fills in, and nothing else happens. More importantly, that message gets permanently marked as starred. That's what I want to happen!

By: y6y6y6

y6y6y6 — Wed, 05 Apr 2006 15:59:51 -0800

Thinking out loud here....... You can store the data using Javascript and then have it processed onUnLoad. So it's going to another page to process, but that's transparent to the user.

By: frufry

frufry — Wed, 05 Apr 2006 16:09:56 -0800

AJAX is a perfectly decent solution, if you want to go that route.
You could also bury a little form with a post in little IFrames, for each rating element. The post would happen inside the IFrame, but the outer window would stay the same.

By: AmbroseChapel

AmbroseChapel — Wed, 05 Apr 2006 16:11:59 -0800

It certainly is possible to do it via the temporary JavaScript storage and the onUnload() handler, but Google is probably doing it via AJAX. Don't make me look at their code, please!

AJAX is very simple in principle.

It's just like every other request to a server, except that as you say, the user doesn't see it happen. The request goes to a server, the server replies with some XML, and you process the XML.

In your case you'd make an "update my database with this score for this user and this item" request, via a javascript: URL or an onClick event, and the server would reply, if all went well, with some minimal XML that would mean "it worked" ... or something would go wrong in which case you'd have to handle the error, of course.

There's a little demonstration of how XHTTPRequests are used with iTunes here that might give you a start.

By: TunnelArmr

TunnelArmr — Wed, 05 Apr 2006 16:12:37 -0800

The reason I'm concerned about doing it with AJAX is that I know nothing about it, and from the limited info I have seen, it would be a lot to learn for one minor function.

y6y6y6, that Javascript solution would be nice, but won't it then not be recorded if they close the browser window straightaway instead of continuing on to another page?

By: jellicle

jellicle — Wed, 05 Apr 2006 16:14:13 -0800

You can play around with this one or this one and see how they work.

Ajax is a bit of an advanced topic if you're just learning PHP, though.

By: nicwolff

nicwolff — Wed, 05 Apr 2006 16:31:36 -0800

You don't need to learn the details of XMLHttpRequest if you use either the Dojo or the Prototype Javascript libraries.

By: potch

potch — Wed, 05 Apr 2006 16:38:45 -0800

I second the Prototype Library. After using it to design a number of small interactive web apps, It makes Ajax as simple as calling the functions of a pre-created Ajax object. Very simple, very easy on the individual who wants none of the nitty gritty.

By: nielm

nielm — Wed, 05 Apr 2006 16:40:29 -0800

no need to go Ajax... use javascript to asynchronously load an image where the URL of the image is the vote-processing (or whatever) script...
(as posted in a recent AskMefi answer )

By: ph00dz

ph00dz — Wed, 05 Apr 2006 16:56:23 -0800

Ajax isn't nearly as scary as you might think... check out the 30 Second AJAX Tutorial by Rasmus Leidorf, creator of PHP. He lays it out in a very, very simple way.

By: the jam

the jam — Wed, 05 Apr 2006 21:09:58 -0800

AJAX sounds like what you want. If you're worried about things being too complicated, it don't get much simpler than XHConn.

By: Civil_Disobedient

Civil_Disobedient — Wed, 05 Apr 2006 22:19:17 -0800

Here's the basics (all snippets, but should be enough to get you started):

Stars (right-click, save-as), or make your own:
off: on:

Code Snippets:
<script>
function updateStar(id) {
   var imgsrc = (document.getElementById(id).src == "star_off.gif") ? "star_on.gif" : "star_off.gif";
   var sendId = id.split('_')[1];
   var sendStar = (imgsrc == "star_off.gif") ? false : true;
   var objXml = new XMLHttpRequest();
   var datasource = "changestar.php";
   var params = "id=" + sendId + "&star=" + sendStar;
   objXml.open("GET", datasource + "?" + params, true);
   objXml.onreadystatechange=function() {
      if ((objXml.readyState==4) && (objXml.status==200)) {
         alert('status changed.');
      }
   }
   objXml.send(null);
}
</script>
...
<table>
   <tr><td>Atom Heart Mother</td><td><img id="album_24123" src="star_off.gif" onclick="updateStar(this.id)"></td></tr>
   <tr><td>Dark Side of the Moon</td><td><img id="album_42312" src="star_off.gif" onclick="updateStar(this.id)"></td></tr>
   <tr><td>Wish You Were Here</td><td><img id="album_13534" src="star_off.gif" onclick="updateStar(this.id)"></td></tr>
   <tr><td>The Wall</td><td><img id="album_82322" src="star_off.gif" onclick="updateStar(this.id)"></td></tr>
</table>
...

By: Civil_Disobedient

Civil_Disobedient — Wed, 05 Apr 2006 22:27:35 -0800

Forgot to mention:

In the above code, the script "changestar.php" takes two arguments: the first is the ID of the album to change, the second is the "starred" status (true/false).

So, for example, the script could generate an SQL query like this:

idFromGET = (retrieve the id variable in the GET variables)
starFromGET = (retrieve the starred status from the GET variables)

String sqlquery = "UPDATE table_albums SET col_star =" + starFromGET + " WHERE col_id = " + idFromGET;

Naturally, if something like this is exposed to the "masses" (i.e., it's on the internet) you'd want to validate the shit out of any GET variables before creating a query string out of them.

If any or all of this is over your head, let me know and I'll try and help.

By: Sharcho

Sharcho — Thu, 06 Apr 2006 03:13:24 -0800

I've spent the entire day evaluating the different AJAX libraries for PHP, and xajax seems the best (supports Unicode, actively developed, full featured, well documented, simple to use, developer community, works with all major browsers). TinyAjax is also a worthy alternative, but not as good IMHO.