AJAX explained in detail

Question

I found allot of examples of AJAX and I think I can get some code with it to work on my own. If only I knew what the use of all the terms of the AJAX code where.

I think in general it lacks the availability of these guides or special pages where constructed code is explained in detail for new programmers.

This would help enormously because of the misunderstanding of the syntax in many cases. Me for example spend 8 hours a day on my internship to learn PHP, Jquery, HTML from scratch and there is allot of information out there but its not structured and in most cases to technical. Any tips on that maby ? :)

$.ajax({
type: 'POST',
url: 'http://kyleschaeffer.com/feed/',
data: { postVar1: 'theValue1', postVar2: 'theValue2' },
beforeSend:function(){
// this is where we append a loading image
$('#ajax-panel').html('<div class="loading"><img src="/images/loading.gif" alt="Loading..." /></div>');
},
success:function(data){
// successful request; do something with the data
$('#ajax-panel').empty();
$(data).find('item').each(function(i){
  $('#ajax-panel').append('<h4>' + $(this).find('title').text() + '</h4><p>' + $(this).find('link').text() + '</p>');
});
},
error:function(){
// failed request; give feedback to user
$('#ajax-panel').html('<p class="error"><strong>Oops!</strong> Try that again in a few moments.</p>');
}
});

Answer 1

Ajax is asynchronous, which mean you can use it to get new informations from the server without reloading the whole page.

Here's an explanation of your code :

$.ajax({

$ is the JQuery object, on which you're calling the ajax function

type: 'POST',

You're gonna send your data by post, which mean that you'll have to get them in php with $_POST['variable_name']. You could also put GET instead

url: 'http://kyleschaeffer.com/feed/',

the url you want to reach

data: { postVar1: 'theValue1', postVar2: 'theValue2' },

as you're sending your request with POST, you cannot pass data directly from the URL. So you have to pass them like that. { nameVar: 'value', .... } If you were sending with GET, you could directly write them into url like : "http://my_url.php?var1=val1&var2=val2 etc ...

beforeSend:function()

You can define an action before sending your ajax request

$('#ajax-panel').html('<div class="loading"><img src="/images/loading.gif" alt="Loading..." /></div>');

Here, inside your div "ajax-panel" you want to write some content. (a div "loading" and a picture inside "loading").

success:function(data)

If your request is successful, you can do something. By successful it means if server answer 200 i guess, anyway ... If you have a response from server... ;)

$('#ajax-panel').empty();

You delete content into ajax-panel

$(data).find('item').each(function(i){
  $('#ajax-panel').append('<h4>' + $(this).find('title').text() + '</h4><p>' + $(this).find('link').text() + '</p>');
});

You're adding some html AFTER (append) the ajax-panel div

error:function()

Not sure you were looking for that, hope that help you ;)

Answer 2

AJAX is an acronym standing for Asynchronous JavaScript and XML and this technology help us to load data from the server without a browser page refresh.

If you are new with AJAX, I would recommend you go through our Ajax Tutorial before proceeding further.

JQuery is a great tool which provides a rich set of AJAX methods to develope next generation web application

Take a took at this

$.ajax({
        type        : varType, //GET or POST or PUT or DELETE verb
        url         : varUrl, // Location of the service
        data        : varData, //Data sent to server
        contentType : varContentType, // content type sent to server
        dataType    : varDataType, //Expected data format from server
        processdata : varProcessData, //True or False
        success     : function(msg) {//On Successfull service call

        },
        error       : function() {// When Service call fails
                }
    });