AJAX jobs with jQuery

Like I said in previous posts, AJAX is just the "normal" way to move a website nowadays. AJAX stands for Asynchronous JavaScript and XML and it's a software development technique that lets the client and the server communicate in background, serving new content, solve new queries and much more without reload a web page. It's a ninja, simple.

Today I want to show you how you can do AJAX stuff with jQuery using the .ajax() instruction. Let's learn the basic function useful for you web apps.


Load simple HTML

A simple ajax job could be loading some HTML code saved on another web page. In fast words, we have to call that webpage, take its content and paste in on our DOM. Let's do this.

$.ajax({
    url: 'web-page.html',
    cache: 'false',
    success: function(data){
        $('body').append(data);
    })
});


What we've done here is simple. The AJAX methods has some parameters:

  • url: the link to our page. jQuery will try to call this page and tries to get a response from it;
  • cache: we wan't that the browser give us cached content;
  • success: a function that will run if the response from our ajax call will be 200 OK. Of course, like said before we want append to our body the HTML from our ajax function.

Send an e-mail

Another simple stuff done nowadays with AJAX is sending mails. For this job you need a server side function that send you the real email, for example the mail() function offered by PHP and for the javascript side, the codes could be like this:

var data = {  
    // object with serialized form data
};

$.ajax({
    url: 'send-mail.php',
    type: 'POST',
    data: data,
    success: function(){
        console.log('message sent! :D');
    }
});


Let's comment some code:

  • url: this time we gonna call a PHP file. This file has a script that send mail received by our AJAX call;
  • type: we send our data using POST method;
  • data: we want provide some data to send our email, so using this parameter to send information to our PHP script on "send-mail.php";
  • success: simple callback at the end of our job.

Interact with your database

A last example of using AJAX tech is another server side job like writing or reading your db and take care about the process. Again, we need a server side language that could run a script and an SQL query.

var paramsForQuerySQL = {  
    // object with serialized data
};

$.ajax({
    url: 'read-db.php',
    type: 'GET',
    data: paramsForQuerySQL,
    success: function(jsonResponse){
        var json = JSON.parse(jsonResponse);
        console.log(json.name);
    },
    error: function(){
        alert('E-E-E-RROR!');
    }
});


Again, some explanation:

  • url: we want to call a PHP file that runs a SQL query for reading our database;
  • type: this time we try to pass data via GET;
  • data: some data used by our PHP script;
  • success: callback for success status. We have a parameter that is the response from our script, this time a JSON data;
  • error: callback for error status (Oooooh s**t!).

This is just a simple introduction to the .ajax() function. If you want to discover more, here you can find the full documentation.

For any question or integration, fell free to drop a comment below. Cheers!



Daniele Petrarolo

Daniele Petrarolo

http://www.danielepetrarolo.com

In love with #JavaScript, #PHP and #Python / Web Developer / There's no place like 127.0.0.1.

View Comments