This time I wanted to write something for Jquery.
Jquery is a very good Javascript library. It reduces much of your coding time.
So here is how you do AJAX with Jquery
Step 1 -: Download the latest version of jquery from
here. This is Jquery 1.4 minified version.
Step 2 -:
$.get(url,'',function(data){
alert("Data from ajax is "+data);
});
Done !!!
Now I will explain it-
1.The "$" is nothing but a shorthand notation for jQuery.
2.Then comes "get" , this can be replaced with post as well, as this is the method by which the http request will be sent to the server.
3.Next is "url". This is the url of the page you are requesting.
4.After url I have the next parameter is left as '' . This parameter is just for adding the parameters (query strings) to the url. It is left to the programmer that he wants to use this parameter or not . You can club your query string in the Url also.
5.Finally we have a callback function which is called after ajax has happend. The "data" is the parameter which the holds the data obtained from the server.
Now finally an Example to understand better-
Let's suppose I have to get the data from the url="http://www.example.com/foo/bar"
and the parameters (query string ) are "car=merz&efficency=80"
so we do ajax as-
$.get("http://www.example.com/foo/bar",{"car:merz","efficency:80"},function(data){
alert(data);
});
OR
the other way around is-
$.get("http://www.example.com/foo/bar?car=merz&efficiency=80",'',function(data){
alert(data);
});
Both are correct.
By Jquery you also do not have to worry about cross browser compatibility. Jquery takes care of that.
Further Jquery has a lot of options for doing ajax . The example here shown is just for learning. You can always refer the jQuery API for further options.
Jquery is a very good Javascript library. It reduces much of your coding time.
So here is how you do AJAX with Jquery
Step 1 -: Download the latest version of jquery from
here. This is Jquery 1.4 minified version.
Step 2 -:
$.get(url,'',function(data){
alert("Data from ajax is "+data);
});
Done !!!
Now I will explain it-
1.The "$" is nothing but a shorthand notation for jQuery.
2.Then comes "get" , this can be replaced with post as well, as this is the method by which the http request will be sent to the server.
3.Next is "url". This is the url of the page you are requesting.
4.After url I have the next parameter is left as '' . This parameter is just for adding the parameters (query strings) to the url. It is left to the programmer that he wants to use this parameter or not . You can club your query string in the Url also.
5.Finally we have a callback function which is called after ajax has happend. The "data" is the parameter which the holds the data obtained from the server.
Now finally an Example to understand better-
Let's suppose I have to get the data from the url="http://www.example.com/foo/bar"
and the parameters (query string ) are "car=merz&efficency=80"
so we do ajax as-
$.get("http://www.example.com/foo/bar",{"car:merz","efficency:80"},function(data){
alert(data);
});
OR
the other way around is-
$.get("http://www.example.com/foo/bar?car=merz&efficiency=80",'',function(data){
alert(data);
});
Both are correct.
By Jquery you also do not have to worry about cross browser compatibility. Jquery takes care of that.
Further Jquery has a lot of options for doing ajax . The example here shown is just for learning. You can always refer the jQuery API for further options.
Comments
Post a Comment