AJAX - The Easy Way

[ohdang888]

When I see people wanting help in AJAX, they often have errors in setting up the XMLHttpRequest object, or dealing with the response, etc. So I decided to this post for quick reference for people to find out the easy way to do AJAX.

 

 

The OpenSource project is called Prototype. Download the file here:

http://www.prototypejs.org/download

The api doc for what i'll be writing about can be found here:

http://www.prototypejs.org/api/ajax/request

 

I had a little trouble with it at first, but once you realize its potential you'll love it.

 

Include the File in your document

<script type="text/javascript" src="prototype.js"></script>

 

 

Now, let's do the AJAX request itself.

<script type="text/javascript">
var url = "path/to/handler.php";
var gender = "male";
var how_old = "really old";

new Ajax.Request(url, {
  method: 'get',
  parameters: {'gen': gender, 'age': how_old},
  onSuccess: success,
  onFailure: failure, 
  });


function failure(){
alert('FAILURE!!!!');
}

function success(){
alert('Wo! Success!');
}

</script>

Lets go over the parts of the request:

1)url - the url to the file that will handle the request, relative to your current directory

2)method - get or post, i suggest get

3)parameters - You don't have to assemble the vars for the url. (none of "?gen=male&age=really_old)..just declare 'name' : 'value'...and for variables, don't put quote around it the variable itself...you would use 'name' : variable

 

4)onSuccess & onFailure - After the request is made, it will do one of these two things depending on if the call is successful, or failure(error recieved).

 

For onSuccess and onFailure, you will list a function it should carry out. Do NOT list the "()" after the function name. Just list the name of the function...for example..i would not write failure(), i would simply write the word failure

 

There are many more options like this you can add. These are the basic and most important.

You can view the other options here(Under CallBacks):

http://www.prototypejs.org/api/ajax/options

 

 

 

Also, its fine to not declare onSuccess or onFailure

For instance, this is perfectly acceptable:

new Ajax.Request(url, {
  method: 'get',
  parameters: {'gen': gender, 'age': how_old}
  });

 

Handling the Response

If you have to handle response text from the file handling the request, you must declare the function within the request.

 

Also, you use transport.responseText as the variable that contains the text.

 

example:

new Ajax.Request(url, {
  method: 'get',
  parameters: {'gen': gender, 'age': how_old}
  onSuccess: function(transport) {
  alert(transport.responseText);
    },
  onFailure: failure
  });

That will pop an alert box with the response text

 

There's a whole number of objects within the transport, view them here:

http://www.prototypejs.org/api/ajax/response

 

 

 

[Ken2k7]

Good one. Though I don't like Prototype. It's so big.

[ohdang888]

Good one. Though I don't like Prototype. It's so big.

but so useful

[Ken2k7]

So is jQuery, but it's not *THAT* big.

[Axeia]

There's also YUI and mootools.

And a ton of others .

 

And it does ease the use of Ajax, and pretty much anything else while also increasing your chances it will 'just work' in all the browsers that matter.

Been playing around a bit with jquery myself a bit lately, seems to enjoy the most support and it's quite small.