It is very easy to develop Ajax in jQuery. In this article we will see the simplest example of Ajax with the jQuery Javascript framework.
The time has come to make a first approach to Ajax, in the series of articles that we are publishing in .com to show the use of this framework (read the ).
One of the advantages of is that they allow us to develop scripts that make use of Ajax in a very easy way and on top of that, without having to complicate our lives with compatibility between different browsers. Undoubtedly, anyone who knows a bit about Javascript could soon start using Ajax with one of these frameworks. We are going to demonstrate how simple it is in jQuery.
The first impression that I have had about the use of Ajax in jQuery is really pleasant, due to the ease with which a first example can be carried out. This is an extremely simple example, but it serves to open the doors to many interesting applications. We had seen similar examples in other Javascript frameworks, as in the article, but we have to take our hats off to the extreme simplicity with which a similar example can be done in jQuery. Suffice it to say that in this Ajax example we will use only 4 lines of code, of which only 1 is to execute the actual Ajax call to the server.
Bring a content with Ajax when clicking a link
In this simple example we will call Ajax to bring up content when a link is clicked. We have launched this on the .com server and .
Here we can see the link, to which we put an identifier (id attribute) to select it from jQuery.
If we have read up to here we will know how to assign an event to a link. However, let’s remember how to assign a function for when the link is clicked:
$(document).ready(function(){
$(“#ajaxlink”).click(function(event){
//remove the default behavior of the link
event.preventDefault();
//Here I would put the code of the Ajax call
});
})
It is now just a matter of launching Ajax within the function of the “click” event on the link. But first I’m going to need a layer to show the content that we are going to receive from the server with the Ajax call. We will put id=”destination” to be able to refer to it from jQuery:
And now the most interesting part, where we can see how easy things are with this Javascript framework. A single line of code will suffice:
$(“#target”).load(“ajax-content.html”);
With this simple statement we are making a call to Ajax with jQuery. It is a simple call to the load() method of a page element, specifically the one that we had put with id=”destination”. We pass the path of the page that we want to load inside the element as a parameter to the load() method.
The file that we load with load() in this example is “ajax-content.html” and we have simply placed any text in it. We have saved it in the same directory as the web page where the jQuery script is.
Note: for this example to work it must be placed on a web server, since the Ajax call is made over http and the file that is loaded then has to be received by a web server, which sends it to the browser with that protocol. If you put the files on your hard drive and run them as is, it won’t work for you. You can use any hosting space you have or a web server you may have installed on your computer.
It’s that simple! We can see the complete code of this example:
Can .
It should be noted that jQuery has many other methods of making connections via Ajax, which can be used for many other work cases that we can find. We have chosen the simplest to give a first demonstration of the possibilities.
Pass parameters and execute actions after Ajax call
The load() method that we have seen in the previous example has two other optional parameters that we can use if necessary:
Parameters to pass to the page: the page that we load with Ajax can receive parameters by the URL, which are specified with the typical jQuery properties and values notation.
{name: “Pepe”, age: 45}
For example, with this code we would be sending the name and age data to the page, with the values ”pepe” and 45. These data would travel in the URL, by the “POST” method.
Note: Since jQuery 1.3 it is also possible to send the parameters to the page to be loaded with Ajax by means of a string type variable, instead of an object notation as we have commented. When a string is used to specify the parameters to be sent in the http request, they travel through the GET method. When using an object notation like the one we have seen, the data travels through the POST method.
Callback function: Like other jQuery methods, we can optionally specify a function to be called when the method is done executing. In this case, when the Ajax call is finished, actions can be taken, such as deleting a typical “loading…” message.
Now let’s see a code where we make use of these two parameters:
$(document).ready(function(){
$(“#ajaxlink”).click(function(event){
event.preventDefault();
$(“#destination”).load(“receives-parameters.php”, {name: “Pepe”, age: 45}, function(){
alert(“received the data by ajax”);
});
});
})
In this case we are loading with load() a PHP page called “receive-parameters.php”. We are passing the “name” and “age” parameters to a page, which we can retrieve by GET. Also, we have placed a callback function in which we simply do an alert(), which will be executed when the Ajax call has finished.
This would be the source code of “receive-parameters.php”:
Received the following data:
Name:
Age:
Can .
With this we have been able to verify how easy it is to carry out with jQuery a load of contents that are received by Ajax. As I was saying, there are many other ways to make Ajax connections with jQuery, like the example in the following article that teaches us how to . In addition, to complement this information, you can also see the .
Facebook Comments
Disqus