Ajax is one of those patterns that are a must have with a UI framework, so let's go ahead and jump right into doing some Ajax requests, and then we'll dive into the more complex cases.
Let's prep our sandbox, but this time, the module we're going to use is called "aui-io-request".
AUI().use('aui-io-request', function(A){
// Our code will run here
});
The simple of the simple, let's assume we're just going to be making a simple ajax request to a plain html file, called "test.html".
A.io.request('test.html');
That's all there is to it. However, that's not very interesting because it doesn't do anything.
Let's say want to send a POST request to the server:
A.io.request('test.html', {
method: 'POST',
data: {
key1: 'value'
}
});
How about responding to the server? There are 5 possible callbacks: start, complete, success (or) failure, and end.
If I wanted to alert the response from the server, here's what I would do:
A.io.request('test.html', {
on: {
success: function() {
alert(this.get('responseData'));
}
}
});
What is this.get('responseData')? It's basically a normalized property of what is returned from the server. It's useful because A.io.request supports having different types of data returned by the server and automatically handled.
For instance, if your server returns JSON like {"myProperty": 2}, you could do something like:
A.io.request('test.html', {
dataType: 'json',
on: {
success: function() {
alert(this.get('responseData').myProperty); //alerts 2
}
}
});
You can also work with XML that way. Assuming your server returns something like: <name>AlloyUI</name> you could do:
A.io.request('test.html', {
dataType: 'xml',
on: {
success: function() {
alert(A.all(this.get('responseData')).all('name').text()); // alerts AlloyUI
}
}
});
You can also submit all of the data in a form via ajax as well. Here's the simplest version:
A.io.request('test.html', {
form: { id: 'myFormId'
}
});
That will serialize all of the data in the form, and send it to "test.html".
One other handy feature of this is that you can define an ajax connection once, and reuse it multiple times, and start and stop it later on.
Here's an example:
var myAjaxRequest = A.io.request('test.html', {
method: 'POST',
data: {
key1: 'value1' }
});
Now later on, if I want to make that same ajax call again, all I have to do is call:
myAjaxRequest.start();
But what if I want to just define the call, but not execute it the first time (for instance, you know you want to run it later, but you don't want to update the server), you can do:
var myAjaxRequest = A.io.request('test.html', {
autoLoad: false,
...
});
What's cool about this is that if later on, you want to change one of the properties before you send the request, you can do that as well. For instance, let's say you want to disable caching before you start the connection again:
myAjaxRequest.set('cache', false);
Or if you wanted to change from POST to GET
myAjaxRequest.set('method', 'GET');
Or change the dataType to JSON:
myAjaxRequest.set('dataType', 'json');
Or even change the URI at the last moment:
myAjaxRequest.set('uri', 'new_test.html');
Then when you're ready you would call:
myAjaxRequest.start();
And if at any time after you have started the request, you want to stop the whole request, you can call:
myAjaxRequest.stop();
And that's most of it right there. There are some cool plugins that we have that make working with ajax easier, but since the next topic is on plugins, I'll cover those in the next blog post, and they'll be a nice segue between topics.
One of those plugins is called A.Plugin.IO, and it's incredibly awesome, because it simplifies the extremely common task of not only loading content into a node or a widget, but adding a loading indicator to that node and automatically parsing the javascript for you.
I'll go into more details in the Plugins post, but it's really handy.
See you then!
