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.

  • 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.

The key to AJAX’s concept is “asynchronous”. This means something happens to the page after it’s loaded. Traditionally, when a page is loaded, the content remains the same until the user leaves the page. With AJAX, JavaScript grabs new content from the server and makes changes to the current page. This all happena within the lifetime of the page, no refresh or redirection is needed.
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()

Well today i’m going to discuss about 2 methods of them which i really love to use and easier than other two which is $.get and $.post, using both is almost similar.
$.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
});