This is the second article in the “jQuery Revolution in Ajax Field” series.As I told you in the first article, we are going to see more closely the Ajax handling by jQuery with some examples to better understand the utility functions used to handle/manipulate data from the server.
Load response from server-side resource
More about load()
Last time we have seen a simple glimpse about how jQuery can handle Ajax with a clean manner.
We stopped at the load(); the basic function which initiates an Ajax request.
Now the thing which I did not said - normal, it was just a glimpse: is that jQuery provides you the ability to filter the elements which are in the response.
You did not understand, ok, here is an example:
Suppose that I want only div elements of the response which will be inserted in the ourAjaxDiv div. This means that I don’t prefer to have the complete response enclosed in my principal div which is supposed to wrap this response.
This is what we call; to filter response elements.
The code will be like so:
$('#ourAjaxDiv').load('/server/application/url #div');
It is not enough, I need more
In this same context of data handling, let’s talk now about another more advanced function called serialize().
This function collects information from form control elements (considered as request parameters) for the wrapped set in a sort of string.
NB: serialize() requires that form fields have a name attribute.
Based on the simple example of serialize() given in the official jQuery documentation, here is how it works:
I think that there is nothing to develop after this schema. It shows clearly what is the result you can get when using serialize() applied to a classic form.If the serialize() function result is not convenient for you because it is a string, you can use serializeArray() which puts the values of all successful form controls into an array of objects containing the names and values of the controls like this:
[{name: 'Salutation', value: 'Mrs'}, {name: 'Radio', value: 'No'}]
More control of the response
Now, what if we don’t need jQuery to put the response in an HTML content (ourAjaxDiv div)?
In other words, we want simply to handle or to do what we want of this data returned from the server.
Answer: Let’s try $.get() function which returns an XHR instance.
As its name implies, this function initiates a GET request to the server. For more details, check the official documentation here.
An example to show how to use this function will be helpful:
Download the full example hereIf you run this example in your server, you will obviously find that it is simple.
Once you click on the following hyperlink:
<body>
<a href="#" id="link">About Me?</a>
</body>
The GET request is made to server.php as shown above. This server resource will make an idiom containing the tree parameters values passed in the request before returning this idiom in the response.
server.php
<?php
$aboutme = "Hey! I am " .$_GET['Name']. ". I am " .$_GET['Age']. " years old and I live in " .$_GET['Country'];
echo $aboutme;
?>
The alert function will be triggered as soon as the data from the server is ready in order to display this data.
The alert function is inside what we call; the callback function.
More complicated response handling
About JSON?
JSON (JavaScript Object Notation) is a lightweight data-interchange format. For more details about JSON, you can check the official site of JSON.
There is another function called $.getJSON() which returns an XHR instance.
This function initiates too the GET request with the same command syntax as $.get(). However, the response is interpreted as a JSON string before it will be passed to the callback function.
Why we need this function?
In many cases, we find ourselves requested to deal with an XML returned from the server. As a data transfer mechanism, if the XML is not suitable, JSON is recommended to be used. It avoids dealing directly with the complexity of handling the XML.
I suggest that we dedicate the coming Ajax revolution article to talk only about $.getJSON() utility function. I will build with you a personal computers retail web application.
The idea is to build an application in which the major care is to keep the end-user with most up-to-date information about what the “PC Company” has in its products stock.
I believe that the coming example will be enough to cover this section.
So, please don’t miss the third article about $.getJSON().
I have only 4 invitations (should have probably more in the coming days).
Alert boxes are well-known in all kind of applications. A stylish alert box is a good way to show you creativity but of course before that; get the full user’s attention.
This following entry is dedicated to Linux users (Debian, Fedora, Ubuntu…). This is my collection of some beautiful desktop wallpapers for this week.
In this selection I am glad to present you 5 AM Gender, Calluna Regular, Diavlo, Evolution True Type, Grayscale Basic, Mank Sans, Neuropol X Exp Light Italic, Special K, Steiner, Times New dirty Roman and Vegur. The full selection of fonts is free to use. You can have a look at their associated license agreements.
I am 
