|
Ajax is most easy thing with jQuery. jQuery has a number of beautiful functions to make easy stuff more easier and compelx stuff as simple as possible. |
|
.load() This function load a chunck of code dynamically into a page. $(“#button”).click(function(){ $.post() && $.get() $.get(url, [data], [callback], [type]) or $.post(url, [data], [callback], [type]) url: (String) The URL of the page to load. data (Optional): (Map) Key/value pairs that will be sent to the server. callback (Optional): (Function) A function to be executed whenever the data is loaded successfully. type (Optional): (String) Type of data to be returned to callback function: “xml”, “html”, “script”, “json”, “jsonp”, or “text”. Often, we simply need to pass some parameters to a page on the server. We have to choose between $.post() and $.get(), depending on which method you need. |
$.post(
'send-to-friend.php',
{your_name:$('#your_name').val(),
your_email:$('#your_email').val()
comments:$('#comments').val()
}
,function(result){
$('#div').html(result);
//here you call your function based upon ajax response.
});
$.get(
'send-to-friend.php',
{your_name:$('#your_name').val(),
your_email:$('#your_email').val()
comments:$('#comments').val()
}
,function(result){
$('#div').html(result);
//here you call your function based upon ajax response.
});
$.ajax()
To do something complex with ajax scripting, you can use $.ajax(). If you have specified xml,html,script, or json, and jQuery automatically prepares the result for your callback function so that you can use it right away
$.ajax({
url: 'test.php',
type: 'GET',
dataType: 'html',
timeout: 1000,
error: function(){
alert('Error loading HTML document');
},
success: function(html){
// do something with html
}
});
$.getJSON()
“JSON short for JavaScript Object Notation, is a lightweight compuer data interchange format. It is a text-based, human-readable format for representing simple data structures and associative arrays. JSON has became very popular since that web pages have became interactive using AJAX. JSON format is easy to create from the server and easy to parse at client as it is the basic object representation in JavaScript.” [source: Wikipedia]
JQuery provides a function that can be used to make an AJAX call and get the data in JSON format
$.getJSON( url, params, callback)
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("![]()
").attr("src", item.media.m).appendTo("#images");
});
});
$.getScript()
Loads, and executes, a local JavaScript file using an HTTP GET request.
$.getScript(http://localhost:8081/js/jquery.datepick.js, function(){
$('#end_date').datepicker({
showOn: "both",
buttonImage: "../images/calendar.gif",
buttonImageOnly: true
});
});
$.getScript(http://localhost:8081/js/jquery.clockpick.1.2.4.pack.js, function(){
$("#end_time").clockpick({
starthour : 0,
endhour : 23,
showminutes : true
});
});
$.ajaxStart()
ajaxStart() method registers a function handler that will be called by jQuery internally whenever an AJAX call is made.
$.ajaxStart(function() {
$("div#loading").text("Loading...");
});
$.ajaxStart(function() {
$("div#loading").html("");
});
$.ajaxComplete()
In the same way, you can use ajaxComplete() method to register a handler function which jQuery calls when an AJAX request gets completed and no other active request is in progress
$.ajaxComplete(function() {
$("div#loading").text("");
});
$.ajaxError()
ajaxError() method registers a function handler that will be called by jQuery internally whenever an AJAX call fails.
$.ajaxError(function() {
$("div#error").text("Error in processing data. Please try again.");
});
$.ajaxSend()
ajaxSend() method registers a function handler that will be called by jQuery internally before an AJAX request is send .
var cnt=0;
$.ajaxSend(function() {
cnt++;
});
function ajaxSendTest() {
$.post(
'send-to-friend.php',
{count:cnt }
,function(result){
$('#div').html(result);
//here you call your function based upon ajax response.
});
}
$.ajaxStop()
ajaxStop() method registers a function handler that will be called by jQuery internally when all AJAX call ended .
var cnt=10;
function ajaxSendTest() {
$.post(
'send-to-friend.php',
{count:cnt }
,function(result){
$('#div').html(result);
//here you call your function based upon ajax response.
});
}
$.ajaxStop(function() {
cnt--;
});
$.ajaxSuccess()
ajaxSuccess() method registers a function handler that will be called by jQuery internally when an AJAX call complets successfully .
function ajaxSendTest() {
$.post(
'send-to-friend.php',
{count:cnt }
,function(result){
$('#div').html(result);
//here you call your function based upon ajax response.
});
}
$.ajaxSuccess(function() {
if($(this).hasClass('class1'))
{
$(this).removeClass('class1');
$(this).addClass('class2');
}
});
$(document).ready(function() {
//username availability checker
$('#usernameLoading').hide();
$('#usernameLoading').ajaxStart(function() {
$(this).removeClass('class2');
$(this).removeClass('class3');
$(this).addClass('class1');
}).ajaxStop(function() {
$(this).removeClass('class1');
$(this).removeClass('class3');
$(this).addClass('class2');
}).ajaxError(function() {
$(this).removeClass('class1');
$(this).removeClass('class2');
$(this).addClass('class3');
})
});