Jquery Ajax
AJAX stands for Asynchronous JavaScript and XML, and it is a technique that allows us to load data from the Server without having to refresh the browser page.
If you're unfamiliar with AJAX, I recommend starting with our Ajax Tutorial.
JQuery is a fantastic tool for developing next-generation web apps because it includes many AJAX capabilities.
Simple Data Loading
JQuery AJAX makes it simple to load any static or dynamic data. To complete the task, JQuery provides the load() method.
Syntax
The load() method has the following simple syntax.
[selector].load( URL, [data], [callback] );
- The following is a list of all the parameters and their descriptions.
- The URL of the server-side resource that the request is directed to. It could be a CGI, ASP, JSP, or PHP script that pulls data from a database or generates data dynamically.
- Data This optional parameter specifies an object whose properties have been serialized and supplied to the request as properly encoded parameters. The request is made using the POST method if it is specified. If this parameter is left blank, the GET method is used.
- After the response data has been loaded into the elements of the matched set, a callback function is triggered. The answer text received from the Server is the first parameter supplied to this function, and the second parameter is the status code.
Example
Consider the HTML file below, which includes some JQuery scripting.
<![CDATA[
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$('#stage').load('/jquery/result.html');
});
});
</script>
</head>
<body>
<p>Click on the button to load /jquery/result.html file −</p>
<div id = "stage" style = "background-color:cc0;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
]]>
Here, load() makes an Ajax request to the /jquery/result.html file at the supplied URL. Following the loading of this file, all of the material will be loaded and tagged with the ID stage. Assume our /jquery/result.html file only contains one HTML line.
THIS IS THE END RESULT...
The result.html file is loaded when you click the specified button.
Obtaining JSON Information
In some cases, the Server will respond with a JSON string in response to your request. The JQuery utility function getJSON() parses the returned JSON string and passes it as the first parameter to the callback function for further processing.
Syntax
The [selector] method of the getJSON() method has a straightforward syntax.
getJSON(URL, [data], [callback]); getJSON(URL, [data], [callback]); getJSON(URL, [
- The following is a list of all the parameters and their descriptions.
- The URL of the GET technique's server-side resource was used to reach.
- Data An object whose properties serve as name/value pairs for constructing a query string to be attached to the URL or a query string that has been preformatted and encoded.
- When the request is completed, the callback function is called. The first parameter to this callback is the data value obtained by parsing the response body as a JSON string, and the second parameter is the status.
Example
Consider the HTML file below, which includes some JQuery scripting.
<![CDATA[
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.getJSON('/jquery/result.json', function(jd) {
$('#stage').html('<p> Name: ' + jd.name + '</p>');
$('#stage').append('<p>Age : ' + jd.age+ '</p>');
$('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
});
});
});
</script>
</head>
<body>
<p>Click on the button to load result.json file −</p>
<div id = "stage" style = "background-color:#eee;">
STAGE
</div>
<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>
]]>
The JQuery utility method getJSON() makes an Ajax request to the result.json file at the supplied URL. After loading this file, the callback method receives all of the content, which is then populated inside a stage marked with ID. Assuming, this is the outcome. The following json formatted material may be found in the json file: "name": "Zara Ali", "age": "67", "sex": "female"
The result appears when you click the supplied button.
The json file is read.
Data Transfer to the Server
You often collect user input and send it to the Server for processing. Using the data argument of any available Ajax method, JQuery AJAX made it simple to send collected data to the Server.
Example
This example shows how to send user input to a web server script, which will return the same result, which we will publish.
<![CDATA[
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#driver").click(function(event){
var name = $("#name").val();
$("#stage").load('/jquery/result.php', {"name":name} );
});
});
</script>
</head>
<body>
<p>Enter your name and click on the button:</p>
<input type = "input" id = "name" size = "40" /><br />
<div id = "stage" style = "background-color:cc0;">
STAGE
</div>
<input type = "button" id = "driver" value = "Show Result" />
</body>
</html>
]]>
