jQuery AJAX methods | A complete tutorial with examples

jQuery AJAX methods (Load, Get, Post ..) : Tutorial for beginners.

A JavaScript library called jQuery is one of most useful for creating such type of animations in our web pages. You can use it as so many different ways to give your web pages amazing looks. Here I have some jQuery AJAX methods tips for you to increase your knowledge and be a good programmer.

Introduction : jQuery AJAX

As we talked about jQuery, it is a JavaScript library which is having so many effective methods to use it on our web pages.

AJAX is short form of Asynchronous JavaScript and XML. It means AJAX is a asynchronously combination of JavaScript and XML. It is a type of technique to fast exchanging dynamic web pages without loading whole page. The best real examples of AJAX are social sites like Gmail, Facebook, Youtube etc. So, Here we are going to talk about jQuery AJAX. That means using jQuery with AJAX.

jQuery has some extra functional methods for AJAX. Methods like jQuery AJAX Load, Get and Post. We can use HTTP Get and HTTP Post  as request text, HTML, XML etc for remoter server and load those functionalities externally to direct on our web pages.

1) jQuery AJAX get():

jQuery AJAX get() method is used to retrieve(getting) specific data from specific source(server). If you want to retrieve any type of data from the server without loading whole page then you should use $.get() method with AJAX by HTTP get. Lets have a look on a syntax of this method below.

$.get(URL, function_name);

In above syntax, request URL is the parameter of the specific source which you want to retrieve from.

The function_name is the name of that function which you want to execute if request process succeeds.

Simple Example:

<!DOCTYPE html>
<html>
<head>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”>
</script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$.get(“demo_file.asp”,function(data,status){
alert(“Data: ” + data + “nStatus: ” + status);
});
});
});
</script>
</head>
<body><button>Click to Send an HTTP GET request</button></body>
</html>

The above code is just a simple example of jQuery AJAX $.get() method. The demo_file_name.asp is just file name which can run on web. It’s just a simple code which you can put into your created runnable file.

2) jQuery AJAX post():

jQuery AJAX post() method is used to request data from specific server to retrieve that data by using HTTP post. If you want to retrieve any data you must have to request first by using $.post() method with jQuery AJAX. Lets have a look on a syntax of this method below.

$.post(URL, function_name);

In above syntax, request URL is the parameter of the specific source which you want to request data to specific server. You can send data by passing URL to using $.post() method.

The function_name is the name of that function which you want to execute if request process succeeds.

Simple Example:

<!DOCTYPE html>
<html>
<head>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”>
</script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$.post(“demo_test_file.asp”,
{
name:”Neel Khambhayata”,
city:”Rajkot (India)”
},
function(data,status){
alert(“Data: ” + data + “nStatus: ” + status);
});
});
});
</script>
</head>
<body><button>Click here to Send an HTTP POST request to a page</button></body>
</html>

The above code is just a simple example of jQuery AJAX $.post() method. The demo_file_name.asp is a file name which can run on web. It’s just a simple code which you can put into your created runnable file for request data from source.

3) jQuery AJAX load():

jQuery AJAX load() methods is a powerful method of the jQuery for loading data on our web pages without loading whole page. We can use it for loading some selected elements in our web pages without exchanging complete source. The $().load() is just use for loading specific data which are requesting and retrieving by HTTP post and HTTP get.  Lets have a look on a syntax of this method below.

$(selector).load(URL, function_name);

In above syntax, request URL is the parameter of the specific source which you want to load or returning selected data from specific server. You can load data by passing URL to using $().load() method. Selector is the name of selected elements which you want to load.

The function_name is the name of that function which you want to execute after the load() method is completed.

Simple Example:

<!DOCTYPE html>
<html>
<head>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”>
</script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“#div1”).load(“demo_file.txt”,function(responseTxt,statusTxt,xhr){
if(statusTxt==”success”)
alert(“External content loaded successfully!”);
if(statusTxt==”error”)
alert(“Error: “+xhr.status+”: “+xhr.statusText);
});
});
});
</script>
</head>
<body><div id=”div1”><h2>Click to jQuery AJAX Change This Text by load method</h2></div>
<button>Get External Content</button></body>
</html>

So, these are the simple jQuery AJAX methods tutorial. I just wrote in a simple language which can help and learn to any beginner programmer. If you really liked it then don’t forget to share this article by just sharing buttons below. 🙂

Leave a Reply

Techdevotee © 2015