Skip to content

Instantly share code, notes, and snippets.

@carlkibler
Created February 10, 2013 16:14
Show Gist options
  • Save carlkibler/4750070 to your computer and use it in GitHub Desktop.
Save carlkibler/4750070 to your computer and use it in GitHub Desktop.
A nearly ideal Ajax request pattern using JQuery.
/* The "Perfect AJAX Request", credit to Kyle Schaeffer
http://kyleschaeffer.com/development/the-perfect-jquery-ajax-request/
*/
$.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>');
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment