javascriptajax

AJAX explained in detail

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>');
}
});
Solution

  • 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 ;)