How To : Use AJAX With jQuery [Tutorial]
What is AJAX and Why Its Important ?
AJAX stands for asynchronous JavaScript and XML. If you see another term XHR, which is shorthand for XML HTTP request, it’s the same thing. Don’t be afraid of this jargon; AJAX is not rocket science.
Why Use With jQuery ?
Using core ajax is bit a long process and also little complicated to use for everyone but with jQuery its easier than expectation there’re 4 easy functions to use ajax with jQuery.
$.get()
$.get(“dtricks.php”,{“name”:”mohit bumb”},function(response){ //Do Something });
This one line code is enough to send a GET Request to dtricks.php page with variable “name” and value “mohit bumb”, You can get response of that page in response variable and when you get that response you can do some action with it.
$.post()
$.post(“dtricks.php”,{“name”:”mohit bumb”},function(response){ //Do Something });
As i said that both functions are similar so this function can also do same thing but only difference is it sends POST Request instead of GET Request.
Don’t Forget With jQuery
Don’t forget to wrap this function document.ready when using this otherwise it may not work
$(document).ready(function(){
//Your jQuery Function
});
AJAX stands for asynchronous JavaScript and XML. If you see another term XHR, which is shorthand for XML HTTP request, it’s the same thing. Don’t be afraid of this jargon; AJAX is not rocket science.
- In Gmail, switch from inbox to draft. Part of the page is changed, but the page is not refreshed. You remain on the same page. Url has not changed (except for the #draft at the end of the url, but that’s still the same webpage).
- In Google Reader, select a feed. The content changes, but you are not redirected to another url.
- In Google Maps, zoom in or zoom out. The map has changed, but you remain on the same page.
Why Use With jQuery ?
Using core ajax is bit a long process and also little complicated to use for everyone but with jQuery its easier than expectation there’re 4 easy functions to use ajax with jQuery.
- $.get()
- $.post()
- $.ajax()
- $.load()
$.get()
$.get(“dtricks.php”,{“name”:”mohit bumb”},function(response){ //Do Something });
This one line code is enough to send a GET Request to dtricks.php page with variable “name” and value “mohit bumb”, You can get response of that page in response variable and when you get that response you can do some action with it.
$.post()
$.post(“dtricks.php”,{“name”:”mohit bumb”},function(response){ //Do Something });
As i said that both functions are similar so this function can also do same thing but only difference is it sends POST Request instead of GET Request.
Don’t Forget With jQuery
Don’t forget to wrap this function document.ready when using this otherwise it may not work
$(document).ready(function(){
//Your jQuery Function
});
Comments