Ext.Ajax.request makes for Easy Ajax
Posted on | October 29, 2008 |
Basic AJAX
Long time no post, today I want to show you how easy it is to make AJAX calls using ExtJs. With Ajax being all the rage these days, if you can’t call server side scripts from your JavaScript I’m afraid you’re site is being bagged as Web 1.0 (bla whatever.. as long as it works right?) So with progression in mind here’s how to do wonderful, wonderful Ajax things with ExtJs.
Basically, Ajax is sending a request from Javascript to a server side resource, and not forcing the entire page to reload in the process, just the bit you want to update.
- A stands for Asynchronous.
- J stands for JavaScript.
- A stands for umm and?
- X stands for XML.
So it’s a combination of alsorts, except I don’t know anyone who uses the XML part of it.
In code you simply set up an XmlHTTPRequest Object point it at a url and click go. But because of the different implementations of XmlHTTP Objects in the different browsers it’s easier and less painful to use a library like ExtJS.
There’s two things to bare in mind here before we start:
- The url can include a query string, but it’s cleaner to use the params collection.
- The parameter passed to the success and failure callback functions is an XmlHttpRequest Object, not the response text from the server.
- The success function will be called if your HTTP request was successful (your server returned HTTP response code 200) e.g. you didn’t make a call that got an HTTP 404 error or 500 error.
- If you got an HTTP error the failure function would be called into action.
Ext.Ajax.request({
url : 'my-server-side-script.php',
params : {
name : 'James',
age : 26
},
success: function(objServerResponse){
alert(objServerResponse.responseText); // outputs whatever was returned from the server in an alert window
},
failure : function(objServerResponse){
}
});
When this is called via an onclick, onload, or when ever you choose to call it will automatically send a HTTP request to your server side script with the specified parameters. Other code will carry on running and when the request is complete it will execute the function success or failure regardless of what other javascript code has executed since your request started. Think of it as you (or your mum) putting on your washing machine, and going out for half an hour to do some shopping, the washing machine (ajax request in this case) carries on working regardless of who set it off. Once your wash has finished, you’ve got to go and empty the washer, so once your request has finished you’e got to take some action with your code (this is the call back function success or failure). In this function you can decide what to do with the data returned form the server, as you would decide weather or not to tumble or hang out your clothes?
Good analogy right?? 
The code on your server can take as long as it wants to execute but its best not to leave your javascript waiting around for more then 30 seconds.
JSON
So whats the easiest way to return data from a server side script. I’ve seen a few ways of doing this. Easiest and by far the most easily breakable way is to simply have your server script echo some text back and then check for that text in your success function, thus:
< ?php // your server side code here echo $success == true ? "success" : "failed";
That will output the text success or failed depending on how you came ot that conclusion on the server side. All your success callback function would do is check the responseText property like so:
Ext.Ajax.request({
url : 'my-server-side-script.php',
params : {
name : 'James',
age : 26
},
success: function(objServerResponse){
if(objServerResponse.responseText === 'success'){
alert("It Worked!");
} else
{
// server code failed but request was OK.
}
},
failure : function(objServerResponse){
alert("Sorry, there was a server Error!");
}
});
Using JSON to analyse the response from the server not only means you can use server data as JavaScript objects but you can also take advantage of sending more data back from the server, in a well structured form.
I program in PHP and whenever I use Ajax I make sure to have the JSON extension installed. Here’s how I usually return JSON from a PHP script. Look for the potential for returning more server side data.
$returnData['success'] = false; $returnData['message'] = "Sorry, we were unable to validate your details"; $returnData['user_id'] = 123456; $returnData['timeOnSite'] = "1 minute"; echo json_encode($returnData); die();
The above code outputs the return data as json, text basically - this data can then be converted to javscript objects using Ext.decode for use in your call back function.
success : function (objServerResponse){
// convert to javascript objects.
var server_data = Ext.decode(objServerResponse.responseText);
if(server_data.success === false)
{
alert(server_data.message);
}
}
You can see how easy it is to return useful data from your Ajax calls and then use it in the client side code. A much more effective use of an HTTP request I’d say!
Recommended Reading
- Json for the Masses by Dustin Diaz
- Ext.Ajax Documentation - explore what other parameters and features you can set.
- Jesse James Garrett, the article that set the ball rolling
- Ajaxian - an Ajax blog
Please feel free to leave comments and suggestions below, I’ll try my best to answer them all!
Comments
2 Responses to “Ext.Ajax.request makes for Easy Ajax”
Leave a Reply
2 Responses to “Ext.Ajax.request makes for Easy Ajax”
Leave a Reply
December 3rd, 2008 @ 3:51 pm
Hi
Thanks for putting this together. I found it very useful.
December 18th, 2008 @ 6:56 am
nice post…