Summary of JQuery AJAX methods:

The main Ajax method in jquery:

First, Load:

$ (selector). Load (Url,[data],[callback]), load data from the server and put the returned data in the selected element.

Parameter meaning:

URL: For the URL you want to load, you can add the jquery selector to the URL parameter.

Data: For the parameter passed in for the request, the key value pair

Callback:success (DATA,STATUS,XHR) (callback function is called only when the request is successful, and the failed processing requires the use of an AJAX function)

data: contains the result content when the call succeeds

Status : return "success" on success, return "error" On failure

XHR: Returns the XMLHttpRequest object, which gets readyState and statues based on the object

By looking at the source, we can see that the nature of load is implemented by AJAX methods, by default, by the Get method, if the second parameter params is a function, and if the object is the Post method.

Cases:

1.function Handleclick ()
{
$ ("#responsediv"). Load ("server.php", function (RESPONSTXT,STATUSTXT,XHR) {
if (statustxt = = = "Error")
This.innerhtml= "error!";
});
}

Send As Get:

2.function Handleclick ()
{
$ ("#responsediv"). Load ("server.php", {"name": "LH"},function (RESPONSTXT,STATUSTXT,XHR) {
if (statustxt = = = "Error")
This.innerhtml= "error!";
});
}

Send As Post:

The JQuery load function has the following source code:

jQuery.fn.load = function (URL, params, callback) {
if (typeof url!== "string" && _load) {
Return _load.apply (this, arguments);
}

var selector, type, response,
Self = this,
Off = Url.indexof ("");
if (off >= 0) {
selector = Jquery.trim (Url.slice (off));
url = url.slice (0, off);
}

If it ' s a function
if (jquery.isfunction (params)) {

We assume that it ' s the callback
callback = params;
params = undefined;

Otherwise, build a param string
} else if (params && typeof params = = = = "Object") {
Type = "POST";
}

If we have elements to modify, make the request
if (Self.length > 0) {
Jquery.ajax ({
Url:url,
If "type" variable is undefined and then "GET" method would be used
Type:type,
DataType: "HTML",
Data:params
}). Done (function (responsetext) {

Save response for use with complete callback
Response = arguments;

Self.html (selector?

If A selector is specified, locate the right elements in a dummy div
Exclude scripts to avoid IE ' Permission Denied ' errors
JQuery ("<div>"). Append (jquery.parsehtml (responsetext)). Find (selector):

Otherwise use of the full result
ResponseText);

}). Complete (callback && function (JQXHR, status) {
Self.each (callback, Response | | [Jqxhr.responsetext, status, Jqxhr]);
});
}

return this;
};

II, $.get () and $.post ()

Get

$.get (Url,[data],[callback],[type]); Request data from the server via the HTTP GET method.

Parameters:

URL: The URL address of the request page

Data: Request parameter, where the parameters are appended to the HTTP request header URL

Callback: Callback function, 3 parameters of the callback function:success (DATA,STATUS,XHR) (callback function is called only when the request succeeds, and the failed processing requires AJAX functions)

Type: request return data converted to this data type

Post

$.post (Url,[data],[callback],[type]); Requests data from the server via the HTTP POST method.

Parameters:

URL: The URL address of the request page

Data: Request parameters, where the parameters are placed inside the HTTP message.

Callback: Callback function, 3 parameters of the callback function:success (DATA,STATUS,XHR)(callback function is called only when the request succeeds, and the failed processing requires AJAX functions)

Type: request return data converted to this data type

Get and post jquery source code:

Jquery.each (["Get", "post"], function (I, method) {
jquery[Method] = function (URL, data, callback, type) {
Shift arguments if data argument was omitted
if (jquery.isfunction (data)) {
Type = Type | | Callback
callback = data;
data = undefined;
}

Return Jquery.ajax ({
Url:url,
Type:method,
Datatype:type,
Data:data,
Success:callback
});
};
});

Get and Post differences:

When a static page is requested, the GET request browser caches the data and the post does not cache

Iii. Getjson and Getscript

Getjson:

$.getjson (Url,[data],[callback]); The JSON data is loaded via an HTTP GET request.

Parameters:

URL: Request page address

Data: Request Parameters

Callback: Callback function, Success (DATA,STATUS,XHR)(callback function is called only when the request succeeds, the failed processing requires AJAX function)

JQuery Source code:

Getjson:function (URL, data, callback) {
Return Jquery.get (URL, data, callback, "JSON");
}

GetScript:

$.getscript (Url,[callback]); To load the JS script via an HTTP GET request and execute the script after loading

Parameters:

URL: Request Link

Callback: Callback function, Success (DATA,STATUS,XHR)(callback function is called only when the request succeeds, the failed processing requires AJAX function)

JQuery Source code:

Getscript:function (URL, callback) {
Return jquery.get (URL, undefined, callback, "script");
}

Advantages of loading scripts with Getscript:

As her characteristics, the advantages are obvious, that is, the asynchronous request, the page quickly loaded into the 1KB of basic JS, and then sequentially loaded into 100KB script, of course, this is hypothetical situation. We are familiar with the QQ space is the use of such a principle, step after step deployment of the environment, to reduce the pressure on the client, and the page rendering will not be because of the large JS and stop or halt.

Disadvantages:

Increase the number of client requests to the server;

Iv. Ajax

$.ajax ([setting]); jquery Ajax basic functions, from the previous jquery source can be seen Get,post,load essence is called Ajax () function to achieve.

The parameters are all optional:

1. Data parameters:

URL: The requested page address, the default value is the current page address

Type:http Request Type Get/post

Data: Key-value pairs to pass request parameters

Async: Default is True, asynchronous request, false for synchronous request

DataType: The data type of the data returned by the server. If not specified, JQuery automatically intelligently judges the HTTP packet mime information

• "XML": Returns an XML document that can be processed with jQuery.

• HTML: Returns plain text HTML information, and the included script tag is executed when the DOM is inserted.

• "Script": Returns plain text JavaScript code. Results are not automatically cached. Unless the "cache" parameter is set. Note: On remote requests (not in the same domain), all POST requests are converted to GET requests. (because the script tag of the DOM will be used to load)

• "JSON": Returns the JSON data.

• "JSONP": Jsonp format. When calling a function using JSONP form, such as "myurl?callback=?" JQuery is automatically replaced? is the correct function name to execute the callback function.

• "Text": Returns a plain text string

2. Callback function:

Beforesend: Called before sending a request, the XMLHttpRequest object is a unique parameter, and you can generally modify the XMLHttpRequest object before sending the request, such as adding a custom HTTP header.

Error: The request failed when the calling parameter has three: The Xmlhttprequset object, the error message, and (optionally) the catch exception object.

Datafilter: Called after the request succeeds. The returned data is passed in as well as the value of the "DataType" parameter. Passed to the success callback function.

Success: The callback function after the successful request, there are 3 parameters: the data is processed according to the DataType parameter, the string describing the state, the XMLHttpRequest object.

Complete: The callback function after the request is completed (called after the request succeeds or fails). The parameter is a XMLHttpRequest object and a string that describes the request type.

Summary of JQuery AJAX methods: