Comprehensive Analysis of $. Ajax () method parameters (recommended), comprehensive analysis of. ajax

Comprehensive Analysis of $. Ajax () method parameters (recommended), comprehensive analysis of. ajax

Let's introduce the Ajax concept first.

AJAX is "Asynchronous Javascript And XML" (Asynchronous JavaScript And XML), which is a Web page development technology used to create interactive web applications.

AJAX = Asynchronous JavaScript and XML (subset of standard General Markup Language ).

AJAX is a technology used to create fast dynamic web pages.

By performing a small amount of data exchange with the server in the background, AJAX can implement asynchronous updates on webpages. This means that you can update a part of a webpage without reloading the entire webpage.

If you need to update the content of a traditional web page (without AJAX), you must reload the entire web page.

Ajax Method

$. Ajax () is the underlying Ajax Implementation of jQuery. Its structure is as follows:

$. Ajax (options)

This method has only one parameter, but this object contains $. the request settings and callback functions required by the ajax () method. parameters exist in the form of key/value. All parameters are optional. Common parameters are shown in the following table:

1. url

It must be a String parameter (the default address is the current address.

2. type

The request method (post or get) is get by default. Note that other http request methods, such as put and delete, can also be used, but are only supported by some browsers.

3. timeout

Set the request timeout time (in milliseconds) for a Number parameter ). This setting overwrites the global settings of the $. ajaxSetup () method.

4. async

A Boolean parameter is required. The default value is true. All requests are asynchronous requests. To synchronize requests, set this option to false. Note: The synchronous request locks the browser. Other operations can be performed only after the request is completed.

5. cache

A parameter of the Boolean type is required. The default value is true (when dataType is set to Script, the default value is false). If it is set to false, request information is not loaded from the browser cache.

6. data

The data sent to the server must be of the Object or String type. If it is not a string, it is automatically converted to the string format. The get request will be appended to the URL. To prevent this automatic conversion, you can view the processData option. The object must be in the key/value format. For example, {foo1: "bar1", foo2: "bar2"} is converted to & foo1 = bar1 & foo2 = bar2. If it is an array, JQuery automatically corresponds to the same name for different values. For example, {foo: ["bar1", "bar2"]} is converted to & foo = bar1 & foo = bar2.

7. dataType

It must be a String parameter. The data type returned by the server is expected. If this parameter is not specified, jQuery will automatically return responseXML or responseText Based on the HTTP package's mine information and pass it as a callback function parameter. The available types are as follows:

Xml: the XML document is returned and can be processed by jQuery.

Html: returns plain text HTML information. 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 parameters are set. Note that during remote requests (not in the same domain), all post requests will be converted to get requests.

Json: Return JSON data.

Jsonp: JSON format. When calling a function in the form of JSONP, such as myurl? Callback = ?, JQuery will automatically Replace the last "?" For the correct function name to execute the callback function.

Text: returns a plain text string.

8. beforeSend

A parameter of the Function type is required. Before sending a request, you can modify the Function of the XMLHttpRequest object, for example, adding a custom HTTP header. In beforeSend, if false is returned, the ajax request can be canceled. The XMLHttpRequest object is a unique parameter.

Function (XMLHttpRequest) {this; // The options parameter passed when calling this ajax request}

9. complete

A parameter of the Function type is required. The callback Function called after the request is complete (the callback Function is called if the request is successful or fails ). Parameter: XMLHttpRequest object and a string that describes the successful request type.

Function (XMLHttpRequest, textStatus) {this; // The options parameter passed when calling this ajax request}

10. success

A parameter of the Function type is required. The callback Function called after the request is successful has two parameters.

(1) data returned by the server and processed according to the dataType parameter.

(2) A string describing the status.

Function (data, textStatus) {// data may be this such as xmlDoc, jsonObj, html, and text; // The options parameter passed when calling this ajax request}

11. error

A parameter of the Function type is required. The Function called when the request fails. This function has three parameters: XMLHttpRequest object, error message, and captured error object (optional ). Ajax event functions are as follows:

Function (XMLHttpRequest, textStatus, errorThrown) {// generally, textStatus and errorThrown have only one of them containing information this; // The options parameter passed when calling this ajax request}

12. contentType

It must be a String-type parameter when sending information to the server. The default Content Encoding type is "application/x-www-form-urlencoded ". This default value is suitable for most applications.

13. dataFilter

A Function that requires a Function type parameter to pre-process the original data returned by Ajax. Provides two parameters: data and type. Data is the original data returned by Ajax, and type is the dataTYpe parameter provided when jQuery. ajax is called. The value returned by the function will be further processed by jQuery.

Function (data, type) {// return the processed data return data ;}

14. global

It must be a Boolean parameter. The default value is true. Indicates whether to trigger a global ajax event. Setting false does not trigger global ajax events. ajaxStart and ajaxStop can be used to control various ajax events.

15. ifModified

It must be a Boolean parameter. The default value is false. Obtain New data only when the server data changes. The server data change judgment is based on the Last-Modified header information. The default value is false, indicating that the header information is ignored.

16. jsonp

A parameter of the String type is required. The name of the callback function is rewritten in a jsonp request. This value is used to replace "callback =? "Callback" in the URL parameter of this GET or POST request, for example, {jsonp: 'onjsonpload'} causes "onJsonPLoad =? "To the server.

17. username

It must be a String type parameter, which is used to respond to HTTP access authentication requests.

18. password

It must be a String type parameter, used to respond to the password of the HTTP access authentication request.

19. processData

It must be a Boolean parameter. The default value is true. By default, the sent data is converted to an object (technically speaking, rather than a string) to work with the default content type "application/x-www-form-urlencoded ". If you want to send DOM tree information or other information that does not want to be converted, set it to false.

20. scriptCharset

A parameter of the String type is required. It is used to force charset modification only when dataType is "jsonp" or "script" and type is GET ). Generally, the local and remote content encoding is not used at the same time.

Case code:

$ (Function () {$ ('# send '). click (function () {$. ajax ({type: "GET", url: "test. json ", data: {username: $ (" # username "). val (), content: $ ("# content "). val ()}, dataType: "json", success: function (data) {$ ('# resText '). empty (); // clear all content in resText var html = ''; $. each (data, function (commentIndex, comment) {html + = '<div class = "comment"> 
Knowledge link:
1. $. each () function: $. each () function is different from the each () method of the jQuery object. It is a global function and does not operate on jQuery objects. This function receives two parameters. 1st parameters are an array or object, and 2nd parameters are a callback function. The callback function has two parameters: 1st parameters are the index of an array or a member of an object, and 2nd parameters are the corresponding variables or content.
　　$.each(data,function(commentIndex,comment){  //doSomething; })
2. ajaxStart () and ajaxStop (): When an Ajax request starts, the callback function of the ajaxStart () method is triggered. When an Ajax request ends, the callback function of the ajaxStop () method is triggered. These methods are global methods. Therefore, no matter where the code to create them is located, Ajax requests are triggered whenever they occur.
Sometimes some images need to be loaded on the page, and the speed may be slow. If some prompts and feedback are not provided during the loading process, it is easy for users to mistakenly think that button clicking is useless, this will cause the user to lose information about the website.
In this case, we need to add a prompt for the webpage. The common prompt is "loading...". The Code is as follows:
<Div id = "loading"> loading... </div>
When an Ajax request starts, this element is displayed to indicate that the Ajax request is in progress. When the Ajax request ends, this element is hidden. The Code is as follows:
$("#loading").ajaxStart(function(){　　　　$(this).show();　　}).ajaxStop(function(){ $(this).hide(); })
Now, I will share with you the code of the case:

$ (Function () {$ ('# send '). click (function () {$. ajax ({type: "GET", url: "test. json ", data: {username: $ (" # username "). val (), content: $ ("# content "). val ()}, dataType: "json", success: function (data) {$ ('# resText '). empty (); // clear all content in resText var html = ''; $. each (data, function (commentIndex, comment) {html + = '<div class = "comment"> 
End. The Code ends here.
The above is a comprehensive analysis of $. ajax () method parameters (recommended), hope to help you, if you have any questions, please leave a message, xiaobian will reply to you in a timely manner. Thank you very much for your support for the help House website!