AJAX stands for “Asynchronous JavaScript and XML”. AJAX technology helps for partial loading. Which improve the performance of a Web page. Example of few AJAX based web applications are YouTube, Gmail, Google Maps & Facebook tabs. If you are looking to implement AJAX using Jquery then you required to know Jquery inbuilt AJAX methods. Using these methods you can request HTML, JSON, XML & TEXT based Files data from a remote server. In below let us discuss more about the most frequently used jQuery AJAX example using Load(), Get() & Post() methods.
load() Method
Jquery AJAX Load() method is simple and powerful. It is easy to implement but using this method you can do much complex jobs easier. We use load method to fetch data from server and can bind those data to HTML elements. Syntax for load method is as below.
Syntax: $(selector).load(URL,data,callback);
Jquery AJAX load method accepts 3 parameters URL, data & callback. URL is nothing but the physical file path of the file you want to load. Rest 2 parameters are Optional. Data parameter comes with Key & Value pair. It passes through the request as querystring. Callback parameter is the name of a function which you want to execute after the load() method is completed.
Example:
$("#div").load("employee_details.txt");
employee_details.txt
<h2>AJAX using Jquery</h2> <p id="paragraph">This is sample text in a paragraph.</p>
$.get() Method
As you know in client server architecture we use Get method to fetch data from the server. In Jquery $.get() method we use with HTTP GET request. Syntax for Jquery Get method is as below.
Syntax: $.get(URL,callback);
Jquery $.get() method accepts 2 parameters URL & Callback. URL is the file path from which you want to read the data. Callback is the parameter of a function name which you want to execute after the sucessful Call.
Example:
$("button").click(function(){
$.get("employee_details.asp", function(data, status) {
alert("Records: " + data + "\nStatus: " + status);
});
});
employee_details.asp
<%
response.write("This is some text from an external ASP file.")
%>
$.post() Method
Like Get method Post is one more useful method of Client Server architecture. Using Post method we send data to Server from Client. Syntax for Post method is as below.
Syntax: $.post(URL,data,callback);
Jquery $.post() method accepts 3 parameters URL, Data & Callback. URL is the server file to which file you want to post data from Client end. Rest 2 parameters are optional. Using data parameter you can send any data in key value pair while sending request to the server. The optional callback parameter is the name of a function to be executed if the request succeeds.
Example:
$("button").click(function(){
$.post("sample_post.asp",
{
empname: "Raghav",
city: "Washigton DC"
},
function(data, status){
alert("Records: " + data + "\nStatus: " + status);
});
});
sample_post.asp
<%
dim f_name, city
f_name = Request.Form("empname ")
city = Request.Form("city")
Response.Write("Dear " & f_name & ". ")
Response.Write("Hope you live well in " & city & ".")
%>
