The Ajax get, post and other methods in jquery are detailed _jquery

Source: Internet
Author: User
Tags getscript script tag string format

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.