The Load () method is often used to get static data files from the Web server, but this does not reflect the full value of Ajax.
In a project, if you need to pass some parameters to the page in the server, you can use either the $.get () or the $.post () method (or the $.ajax () method)
The $.get () method uses the Get method to make asynchronous requests. Structure is: $.get (URL [, data] [, callback] [, type])
The $.get () method parameter is interpreted as follows:
Parameter name |
Type |
Description |
Url |
String |
URL address of the requested HTML page |
Data (optional) |
Object |
Key/value data sent to the server is appended to the request URL as a querystring |
Callback (optional) |
Function |
The callback function (called only when the response return state is success) automatically passes the request result and state to the method when the load succeeds |
Type (optional) |
String |
The format of the server-side return content, including XML, HTML, script, JSON, text, and _default |
$.post () method.
The $.post () and $.get () methods are structured and used in the same way, but they still have the following differences:
A GET request passes the parameter after the URL, and the POST request is sent as the entity content of the HTTP message to the Web server.
Get mode has a size limit (usually less than 2KB) to the transmitted data, and the amount of data passed by post is much larger than get mode (theoretically unrestricted)
The data requested by the Get method is cached by the browser, so other people can read the data from the browser's history, such as the account number and password. In some cases, the Get method poses a serious security problem, and post is a relatively safe way to avoid these problems
The Get and post method of data passed on the server side is also different.
$.getscript ():jquery provides this method to load JS files directly, as easy as loading an HTML fragment, and does not require JavaScript files to be processed, JavaScript files are automatically executed.
The jquery code is as follows:
Copy Code code as follows:
$ (function () {
$ ("#send"). Click (function () {
$.getscript ("Test.js");
});
})
As with other Ajax methods, the $.getscript () method also has a callback function that runs after the JavaScript file is loaded successfully.
For example: Want to load the jquery official Color animation plug-in (Jquery.color.js), after success to the element binding color change Animation:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<script type= "Text/javascript" src= ". /.. /js/jquery-2.1.3.js "></script>
<style>
* {margin:0; padding:0;}
body {font-size:12px;}
. comment {margin-top:10px; padding:10px border:1px solid #ccc; background: #DDD;}
. Comment h6 {font-weight:700; font-size:14px;}
. para {margin-top:5px; Text-indent:2em;background: #DDD;}
. Block{width:80px;height:80px;background: #DDD;}
</style>
<title></title>
<body>
<button id= "Go" > Run </button>
<div class= "Block" ></div>
</body>
<script type= "Text/javascript" >
$ (function () {
$.getscript ("Jquery.color.js", function () {
$ ("#go"). Click (function () {
$ (". Block"). Animate ({backgroundcolor: ' Pink '}, 1000)
. Animate ({backgroundcolor: ' Blue '}, 1000);
});
})
})
</script>
$.getjson (): This method is used to load a JSON file, using the same usage as $.getscript ().
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<script src= ". /.. /js/jquery-2.1.3.js "></script>
<style>
* {margin:0; padding:0;}
body {font-size:12px;}
. comment {margin-top:10px; padding:10px border:1px solid #ccc; background: #DDD;}
. Comment h6 {font-weight:700; font-size:14px;}
. para {margin-top:5px; Text-indent:2em;background: #DDD;}
</style>
<title></title>
<body>
<br/>
<p>
<input type= "button" id= "send" value= "Load"/>
</p>
<div class= "comment" > has commented:</div>
<div id= "ResText" >
</div>
</body>
<script type= "Text/javascript" >
$ (function () {
$ (' #send '). Click (function () {
$.getjson (' Test.json ', function (data) {
$ (' #resText '). empty ();
var html = ';
$.each (data, function (Commentindex, comment) {
html + + ' <div class= ' comment ' >})
$ (' #resText '). HTML (HTML);
})
})
})
</script>
The Test.json file is:
Copy Code code as follows:
[
{
"username": "John",
"Content": "Sofa."
},
{
"username": "Dick",
"Content": "The bench."
},
{
"username": "Harry",
"Content": "Floor."
}
]
Use the callback function in JSONP form to load the JSON data for the other web site. For example:
Copy Code code as follows:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<script src= ". /.. /js/jquery-2.1.3.js "></script>
<style>
* {margin:0; padding:0;}
body {font-size:12px;}
. para {
width:100px;
height:100px;
margin:5px;
border:0;
}
</style>
<title></title>
<body>
<p>
<input type= "button" id= "send" value= "Load"/>
</p>
<div id= "ResText" >
</div>
</body>
<script type= "Text/javascript" >
$ (function () {
$ (' #send '). Click (function () {
$.getjson ("Https://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json &jsoncallback=? ",
function (data) {
$.each (Data.items, function (I,item) {
$ ("if (i = = 3) {
return false;
}
});
}
);
})
})
/**
* JSONP (JSON with Padding) is an unofficial protocol that allows the server-side integration script tags to be returned to the client and Cross-domain access through JavaScript callback
* The above URL address can not request the data, only as a description.
* */
</script>
Attention:
jquery will automatically put the callback function in the URL, such as "url?callback=?" The last "?" in the Replace with the correct function name to perform the callback function.
JSONP (JSON with Padding) is an unofficial protocol that allows the integration of script tags on the server side to return to the client, enabling Cross-domain access in the form of JavaScript callback. Because JSON is just plain text with a simple bracket structure, many channels can exchange JSON messages. Because of the restriction of homologous policy, developers cannot use XMLHttpRequest when communicating with external servers. Jsonp is a way to circumvent the same-origin policy by returning executable JavaScript function calls or JavaScript objects directly from the server side by using a combination of JSON and <script> tags. Currently, JSONP has become the Web application Cross-domain preferred for major companies.
The $.ajax () method is the most low-level AJAX implementation of jquery. Its structure is:
$.ajax (Options). The method has only one parameter, but in this object contains information such as the request settings required by the $.ajax () method and the callback function, the parameters are in the form of Key/value, and all parameters are optional.
The list of commonly used parameters is:
Parameter name |
Type |
Description |
Url |
String |
(Defaults to the current page address) sending the requested address |
Type |
String |
The request method (post or get) defaults to get. Note that other HTTP request methods, such as put or delete, can also be used, but only some browsers support |
Timeout |
Number |
Sets the request timeout (in milliseconds). This setting overrides the global setting of the $.ajaxsetup () method |
Data |
Object or String |
Data sent to the server. If it is not a string, it is automatically converted to a string format. The GET request is appended to the URL. To prevent this automatic conversion, you can view the ProcessData option. The object must be in key/value format, for example {foo1: "Bar1", Foo2: "Bar2"} to &foo1=bar1&foo2=bar2. If it is an array, jquery will automatically correspond to the same name for different values. For example {foo:["Bar1", "Bar2"]} converted to &FOO=BAR1&FOO=BAR2 |
DataType |
String |
The type of data expected to be returned by the server. If not specified, jquery automatically returns Responsexml or ResponseText based on the HTTP packet mime information and is passed as a callback function parameter. The available types are as follows. XML: Returns an XML document that can be processed with jquery HTML: Returns plain text HTML information; The included script tag executes when the DOM is inserted Script: Returns the plain text JavaScript code. Results are not automatically cached. Unless the cache parameter is set. Note that when a remote request is not in the same domain, all post requests are converted to get requests. JSON: Returning JSON data JSONP:JSONP format. When calling a function using the Jsonp form, for example, Myurl?callback=?,jquery will automatically replace the latter "?" To the correct function name to execute the callback function. Text: Returns a plain text string |
Beforesend |
Function |
You can modify the functions of the XMLHttpRequest object before sending the request, such as adding custom HTTP headers. If you return False in Beforesend, you can cancel this Ajax request. The XMLHttpRequest object is the only parameter. function (XMLHttpRequest) { this;//The options parameters that are passed when the AJAX request is invoked } |
Complete |
Function |
callback function called after the request completes (called when the request succeeds or fails) Parameters: XMLHttpRequest object and a string that describes the type of successful request. function (XMLHttpRequest, textstatue) { this;//The options parameters that are passed when the AJAX request is invoked } |
Success |
Function |
A callback function called after a successful request has two parameters. (1) The data returned by the server and processed according to the datatype parameter (2) A string describing the state function (data, textstatus) { Data may be xmldoc, jsonobj, HTML, text, etc. this;//The options parameters that are passed when the AJAX request is invoked } |
Error |
Function |
The function that was called when the request failed. The function has 3 parameters, that is, an XMLHttpRequest object, an error message, a captured Error object (optional). The Ajax event functions are as follows: function (XMLHttpRequest, textstatus, Errorthrown) { Usually only one of the Textstatus and Errorthrown contains information this;//The options parameters that are passed when the AJAX request is invoked } |
Global |
Boolean |
The default is true. Indicates whether global AJAX events are triggered. Set to false will not trigger global AJAX events, Ajaxstart or ajaxstop can be used to control various AJAX events |