jQuery ajax tutorial example

→ Are you a new visitor? Please visit the page guidance for new visitors ←

jQuery ajax tutorial example

This is probably the most interesting and yet complicated thing from our tutorial series. This is the magic that modern websites are using in order to update in real time their content, database, etc.

What is AJAX ?

Ajax stands for Asynchronous JavaScript and XML. From Wikipedia, it is a group of interrelated web development techniques used on the client-side to create asynchronous web applications. With Ajax, web applications can send data to, and retrieve data from, a server asynchronously (in the background) without interfering with the display and behaviour of the existing page. Shortly, it is a group of client and server technologies that are used together in order to communicate in the background.

AJAX in examples

First, don’t be scared! It is a little overwhelming at the first sight but will be clear in a minute. So, we will see an example with detailed parameters. I chose this because I wanted to show you all the possibilities you have with ajax:

Well, this is the ajax call written in an older version of jQuery, older than 2.0 (not the latest, at the time of this article the jQuery version was 2.0). Let’s examine the code line by line, but remember that AJAX can have more parameters than described above. I will illustrate a minimal working ajax call.

On the first line, we store in an “user” variable what we get from an user input for instance, so it is a string value. We will use this just for transport from javascript to php.

Then the ajax object is constructed. This object has multiple parameters:

– First is “type”, which tell what should be used for transport, POST or GET. You should be familiar with these two before digging into ajax.

– The second one is “dataType” which tell what answer is our application expecting (html or json). You can return an array from PHP in a JSON format, or you can return plain HTML, it is your choice.

– The third one is “url” which is important because let’s us define the PHP file that will be triggered on this AJAX call. In our case we have “takeData.php” and you put the path to it.

– Then we have the actual data that we are sending to PHP. In our case we are sending our stored variable from above, the “user” that we captured from the input. We will identify that on PHP based on its given name “dataToReceive”.

– The final two things that we have here is the “success” and “error” case. Your PHP file will send a response back to the javascript. That response will be captured on “success” or “error” based on the returned values.

We fire the ajax when we click to a button with id “trigger”, to the PHP file that we setup in the “url” parameter . There! the client part is done, we took our information, wrapped it and sent to the PHP for further manipulation. Now, let’s see what is happening on the other side, the server side:

On our PHP file, we use the same method for receiving the data as we setup in the javascript file in the “type” parameter of the ajax call, in our case $_POST, and store that into a variable called $receivedData. Next we check that, and return a HTML message with “echo”. Why html ? because in the ajax call, we told that we are expecting and html response from the PHP (in the “dataType” parameter of the ajax call).

Debugging ajax

If you followed the above steps, the response is returned on “SUCCESS” case and you should obtain when you click the firing button of the ajax call an alert with the message returned from PHP (success or error). But, if you have typing errors or malformed data returned, the function will enter on “ERROR” case and will output the errors in an alert.

Various possibilities

Now, you can imagine what you can do with the data captured from the DOM. You can send it to PHP, manipulate it, put it in a database or stuff like that. If you return an entire  HTML, on success case, you can put it in the page, display new elements, update existing ones, pretty much everything you want. You are limited only by your imagination, so test it, play with it and use it right 🙂

Request an article ←