Implementation of Ajax Application by Jquery
Asynchronous request of data using load() method
The load() method is used to load the data from the server through an Ajax request and place the returned data into the specified element in the format of the call:
load(url,[data],[callback])
The parameter url is the loading server address, the optional data parameter is the data sent when the request is made, and the callback parameter is the callback function executed after the data request is successful.
Example code:
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Use load()Method asynchronous request data</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">My favorite fruit</span>
<span class="fr">
<input id="btnShow" type="button" value="Load" />
</span>
</div>
<ul></ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);//Convert button to Jquery object
$("ul")
.html("<img src='Images/Loading.gif' alt=''/>")//Before calling the load() method, set a picture for the ul tag
.load("http://www.imooc.com/data/fruit_part.html",function(){
$this.attr("disabled", "true");
});//Request data from http://www.imooc.com/data/fruit_part.html and place the returned data in the ul tag
})
});
</script>
</body>
</html>$(function(){ (}) function
This is the built-in function of JQuery, which is the syntax of JQuery, $denotes JQuery objects and can be used in several ways. For example, transfer selector string, page object, etc. If the function body is directly passed in, it means that the page will be executed after loading. Same as JAVASCRIPT's original one:
window.onload=function() {// execution function}
Equivalent to $(document).ready(function(){})
Or:
<body onload="XXX">
It's also a meaning.
Asynchronous loading of JSON data using getJSON() method
Using getJSON() method, the data in the server can be obtained by Ajax asynchronous request, and the data obtained can be parsed and displayed on the page. Its calling format is as follows:
jQuery.getJSON(url,[data],[callback])or $.getJSON(url,[data],[callback])
Among them, the url parameter is the server address of the request to load the json format file, the optional data parameter is the data sent when the request is made, and the callback parameter is the callback function executed after the data request is successful.
Sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Use getJSON()Method Asynchronous Loading JSON Format data</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">My favorite sport</span>
<span class="fr">
<input id="btnShow" type="button" value="Load" />
</span>
</div>
<ul></ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.getJSON("http://www.imooc.com/data/sport.json",function(data){
$this.attr("disabled", "true");
$.each(data, function (index, sport) {
if(index==3)
$("ul").append("<li>" + sport["name"] + "</li>");
});
});
})
});
</script>
</body>
</html>Getting data from the server by GET using get() method
When using get() method, it requests data from the server in GET mode and returns the requested data through the parameters of the callback function in the method. Its calling format is as follows:
$.get(url,[callback])
The parameter url is the server request address, and the optional callback parameter is the callback function executed after the request succeeds.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Use get()Method to GET How to get data from the server</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="divtest">
<div class="title">
<span class="fl">My Personal Data</span>
<span class="fr">
<input id="btnShow" type="button" value="Load" />
</span>
</div>
<ul></ul>
</div>
<script type="text/javascript">
$(function () {
$("#btnShow").bind("click", function () {
var $this = $(this);
$.get('http://www.imooc.com/data/info_f.php',function(data) {
$this.attr("disabled", "true");
$("ul").append("<li>My name is:" + data.name + "</li>");
$("ul").append("<li>My boyfriend said to me:" + data.say + "</li>");
}, "json");
})
});
</script>
</body>
</html>Send data from server by POST using post() method
Compared with get() method, post() method is mostly used to send data to the server in POST mode. After the server receives the data, it processes it and returns the result to the page. The format of the call is as follows:
$.post(url,[data],[callback])
The parameter url is the server request address, the optional data is the data sent to the server when the request is made, and the optional callback parameter is the callback function executed after the request is successful.
Loading server data using ajax() method
Using ajax() method is the lowest and most powerful method of requesting server data. It can not only get the data returned by the server, but also send requests to the server and pass values. Its calling format is as follows:
jQuery.ajax([settings])or $.ajax([settings])
The parameter settings is the configuration object when sending the ajax request. In this object, url represents the path of the server request, data is the data transferred when requesting, dataType is the data type returned by the server, success is the callback function for the successful execution of the request, type is the way of sending the data request, default is get.
Use the ajaxSetup() method to set global Ajax defaults
Using the ajaxSetup() method, you can set some global option values for Ajax requests. When the setting is completed, the subsequent Ajax requests will not need to add these option values. The format of the call is as follows:
jQuery.ajaxSetup([options])or $.ajaxSetup([options])
The optional options parameter is an object through which the global option values for Ajax requests are set.
If you need to submit to more than one handler, it's not easy to implement with ajax alone. Use ajaxSetup to set the settings of the public part 
Using ajaxStart() and ajaxStop() methods
The ajaxStart() and ajaxStop() methods are binding Ajax events. The ajaxStart() method is used to trigger functions before the Ajax request is sent, and the ajaxStop() method is used to trigger functions after the Ajax request is completed. Their call format is:
(selector).ajaxStart(function()) and (selector).ajaxStop(function())
The parentheses in both methods are bound functions. When the function bound by the ajaxStart() method is executed before sending an Ajax request, the function bound by the ajaxStop () method is executed after the request is successful.
For example, before calling the ajax() method to request server data, an animation is used to show that the server data is being loaded, and when the request is successful, the animation is automatically hidden, as shown in the following figure 
Question: "Should the ajaxStart() method bind elements that trigger ajax requests?"
Query Official Document Description: Whenever an AJAX request is to be sent, jQuery checks for other active (unfinished) AJAX requests. If no other active AJAX request is found in the process, jQuery triggers the ajaxStart event. At this point, all event handlers bound by the ajaxStart() function will be executed. ajaxStart() is a global function