Ajax is always more and more diffused and common in various websites, at times even when it’s not necessary, but after all this happens somehow with everything. If you are attracted by this technology but you don’t know where to start from, this article is for you. In two extremely simple examples you will learn the basics and you will see how thanks to the use of modern frameworks it is not as difficult as it might look. You don’t believe me?
What is a asynchronous call?
If we don’t use Ajax, every data exchange between the server and the client requires a traditional request which entails the refreshing or the loading of a new page.
When we fill a form and click on “send“, for example, the elaboration page is requested to the server which will deal with intercepting the data we inserted into the form, elaborating them, and finally show a result.
This page is loaded as a new document which is completely going to substitute the previous page (the one of the form) in our browser.
Thanks to ajax instead, the server and the client can communicate “in background“ at time intervals or at the occurrence of a certain event.
We can thus for example foresee that by clicking on the “send” button of a form (thus at the occurrence of the submitevent), a request is sent that is going to be elaborated by the server which is going to send the result to the browser which in turn is going to show it, everything without the page having to reload.
This is exactly what we are going to do together in a little bit. We are going to use jQuery, the powerful javascript library which has already been the subject of several articles and thanks to which the creation of a asynchronous call will resultextremely simplified.
If you don’t have jQuery yet (wrong), download it from the official website.
Preparation of the form
We create the page ajax.html and insert a simple form which requires “name” and “last name”.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head></head><body><form id="input_form" action="?"> Insert name:<br /> <input type="text" name="name" id="name"/><br /> Insert last name:<br> <input type="text" name="lastname" id="lastname"/><br/ ><br/ > <input type="submit" value="send"></form><div id="result"></div></body></html> |
In this HTML markup we have added the “result” element which represents the point in which the results of the elaboration from the server are going to be inserted.
Preparation of the elaboration page on the server
Let’s create now the page result.php which will provide for the reception and elaboration of data passed from the form:
<?phpecho "You have inserted the following data: Name-><strong>$_POST[name]</strong> and Last name-><strong>$_POST[lastname]</strong>. You have executed an asynchronous call!";?> |
As you can see it’s simply about printing on video the data passed from the form inside a phrase.
Inclusion of jQuery and preparation of function
Let’s turn now to the file ajax.html. We include the jQuery library and arrange for the function necessary for our scope modifying the head in this way:
<head> <script type="text/javascript" src="jquery-1.4.1.js"></script> <!-- The version could be different --> <script type="text/javascript"> $(document).ready(function() { //Here we will write the necessary code });</script></head> |
Let’s create now the necessary jQuery code which I am going to explain in detail below.
$("#input_form").submit(function(){ var name = $("#name").attr('value'); var lastname = $("#lastname").attr('value'); $.post("result.php", {name:name,lastname:lastname}, function(data){ $("div#result").html(data); });return false;}); |
So, in the first line we state:
$("#input_form").submit(function(){ |
In the element with id “input_form“, at the occurrence of “submit” event, execute this function.
In the second and third line:
var name = $("#name").attr('value');var lastname = $("#lastname").attr('value'); |
we emphasize the variables name and last name withdrawing the “value” attribute from the elements with id “name” and “last name” (which are the relative fields of the form).
At this point we proceed with the ajax call. jQuery has mainly three methods for the management of asynchronous calls, $.post, $.get, ed $.ajax. In this first example we are going to use $.post which as it’s obvious will send the data to the server through the POST method.
The syntax is simple:
$.post(“name_of_file”, {name1:value1,name2:value2( passed parameters)}, function(data){
— what we want to do with the answer sent to us by the server is that it will be contained in the “data” parameter.
});
In our case, we send the request to result.php passing as parameter name the variable name (previously enhanced with the content of the field name of form) and as last name parameter the last name variable.
We insert the result in the element “result“.
Finally, if we use the forms, we should always bear in mind to interrupt the execution of submit with return false.
By trying out this code (see example) under the form you will display the phrase without a refresh or the loading request of a new page. The data have been sent in asynchronous way to the server which has executed the php page. The output of the page has been thus sent to the client and inserted in DOM.
If I wanted to use $.ajax to do exactly the same thing, I have to rewrite the function like this:
$.ajax({ url: 'result.php', type: "POST", data: "name="+name+"&lastname="+lastname, success: function(data) { $("div#result").html(data); }}); |
As you can see $.ajax has a different and slightly more complex syntax. This as it allows us to pass a long series of parameters (and in fact more configurable than $.post and $.get); you will find the complete list of parameters in thedocumentation.
0 comments :
Post a Comment