jquery Source Analysis---AJAX analysis

The Ajax common method of 7.1 jquery

No in-depth analysis of Ajax principles. jquery will certainly provide AJAX implementations as well. For AJAX requests, you can divide them into the following steps:

1. Generate Ajax object XHR through new XMLHttpRequest or other forms (ie).

2. Establish a connection through the form of Xhr.open (type, URL, async, username, password).

3, through the setRequestHeader set the XHR request headers (requests header).

4. Request server-side data through send.

5. Perform the onreadystatechange callback processing returned data registered on the XHR.

Any lib is the extension of these steps to achieve its own function. In these steps, for the URL, we have to consider how to do cross-domain requests, Ajax for security considerations do not support Cross-domain requests, then for this problem, jquery and ext are the way to use Scripttag.

jquery primarily solves the problem above, and then expands on that basis, such as Getscript,getjson functions. An important task for Ajax is to submit a form. Jquery Ajax provides an example of a prototype form in which the serializeelements of the form is serialized as a request string. This is the helper method of Ajax.

For AJAX applications, regardless of how the returned data is handled, the ultimate goal is to fall on the display of the page, but also on one or some DOM elements. So I start with this DOM element that needs to change the content, and get the data through Ajax to do some processing and finally populate the given element. This is similar to the Ajax.updata in prototype.

Load

The load (URL, params, callback) function of the JQuery object is to do this kind of work.

Loads the remote HTML file code and inserts it into the DOM.
Use the Get method by default-when passing additional parameters is automatically converted to POST mode. In JQuery 1.2,
You can specify a selector to filter the loaded HTML document, and only the filtered HTML code will be inserted into the DOM.
Syntax is like "URL #some > selector".
Load:function (URL, params, callback) {
if (typeof url!= ' string ') return This._load (URL);
var off = Url.indexof ("");//Find First space
if (off >= 0) {①
var selector = Url.slice (off, url.length);//characters after the first space
url = url.slice (0, off);//The character before the first space
}
Callback = Callback | | function () {
};
var type = "Get";/the default is get type
Here is the second argument, if it's FN, then it means callback.
If it is object, then it means data.load (URL, [Data],[callback])
if (params)
if (jquery.isfunction (params)) {
callback = params; params = null;}
else if (typeof params = = ' object ') {
params = Jquery.param (params); type = "POST"; Ii
}
var self = this;
Jquery.ajax ({//ajax request ③
Url:url, Type:type,datatype: "html", Data:params,
Complete:function (res, status) {
Successful injection of HTML into all matching elements
if (status = = "Success" | | status = = "Notmodified")
is selector specified? Nothing is the whole story.
As specified, the form of the DOM document is generated, and the element that satisfies the condition is found in the middle.
This middle deletion scripts is to avoid the ' Permission Denied ' error in IE
Self.html (selector? jQuery ("<div/>") ④
. Append (Res.responseText.replace (/<script) (. | s) *?/script>/g, "")
. Find (Selector): Res.responsetext);
Self.each (callback, [Res.responsetext, Status, Res]); Execute callback ⑤
}
});
return this;
},