Ajax functions encapsulated in jQuery in Ajax_04, ajax_04jquery

Ajax functions encapsulated in jQuery in Ajax_04, ajax_04jquery

1. json_encode encoding rules in PHP:
PHP Index Array encoded as JSON: [...]
PHP associated array encoded as JSON :{...}
2. load of AJAX encapsulated functions in jQuery:

① Use: $ ('selector '). load (url, [data], [fn]);
$ ('Selector '). load (url );

② Purpose: Create an XHR object and initiate an asynchronous request to the specified URL. The request parameter is data. If the response is successful, the specified callback function fn is automatically called, replace the response body data (which must be an HTML segment) with the innerHTML of the currently selected element, and the existing content will be overwritten;

3. $. get of AJAX encapsulated functions in jQuery:

① Use: $. get (url, [data], [fn]);

② Meaning: Create an XHR object and initiate an asynchronous GET request to the specified URL. The request parameter is data (for example, k = v & k = v or {k: v, k: v}). If the response is successful, the specified callback function fn is automatically called (the response data must be processed in this callback function -- doResponse );

4. $. post:

① Use: $. post (url, data, [fn]);

② Purpose: Create an XHR object and initiate an asynchronous POST request to the specified URL. The request parameter is data (for example, k = v & k = v or {k: v, k: v}), appended to the Request body. If the response is successful, the specified callback function fn is automatically called (the response data must be processed in this callback function -- doResponse (txt, msg, xhr ););

③ Form serialization: Serialize concatenates all input fields and values in the form with the name attribute into strings in the format of "k1 = v1 & k2 = v2, can be directly used for HTTP request messages (var data = $ ("# formId "). serialize (););

5. $. getJSON of AJAX encapsulated functions in jQuery:

① Use: $. getJSON (url, [data], [fn]);

② Purpose: Create an XHR object and initiate an asynchronous GET request to the specified URL. The request parameter is data (for example, k = v & k = v or {k: v, k: v}). After the URL is appended, if the response is successful, the specified callback function fn is automatically called (the response data must be processed in this callback function -- doResponse (txt, msg, xhr ););

* (This function requires that the response data must be of the application/json type. JSON. parse (xhr. responseText) will be automatically called for parsing );
6. $. getScript of AJAX encapsulated functions in jQuery:

① Use: $. getScript (url, [data], [fn]);
$. GetScript (url );

② Purpose: Create an XHR object and initiate an asynchronous GET request to the specified URL. The request parameter is data (for example, k = v & k = v or {k: v, k: v}). If the response is successful after the URL is appended, the specified callback function fn is automatically called;

* (This function requires the response data to be of the application/javascript type and will automatically call eval (xhr. responseText) for execution );
7. $. AJAX:

① Usage:
$. Ajax ({
Type: 'get', // POST/PUT/DELETE/HEAD
Url: 'x. php ',
Data: 'K = v & k = V', // {k: v} request data
BeforeSend: function () {}, // callback before the request is sent
Success: function () {}, // callback for successful response
Error: function () {}, // callback of the failed response
Complete: function () {}// callback for response completion
});

② Corresponding to the native AJAX code:
Var xhr = new XMLHttpRequest ();
Xhr. onreadystatechange = function (){
If (xhr. readyState === 4 ){
If (xhr. status === 200) {success ();}
Else {error ();}
Complete ();
}
}
Xhr. open ();
BeforeSend ();
Xhr. send ();
8. Summary:
① $ ('Selector '). load (url); -- only receives html response;

② $. Get (url, data, fn); -- depends on the content type declared in the response message. If it is declared as application/json, JSON is automatically called. parse (); If declared as application/javascript, eval () is automatically called; If declared as text/plain, it will not be executed automatically;

③ $. Post (url, data, fn );

④ $. GetJSON (url, data, fn); -- receives only the json response. JSON is automatically called no matter what type of response message. parse () sets xhr. responseText parse to get the JS object;

⑤ $. GetScript (url); -- only receives the script response. No matter what type of response message, eval is automatically called to execute xhr. responseText;