Detailed Parameter Parsing in jQuery. ajax () method

Detailed Parameter Parsing in jQuery. ajax () method
Preface

In project development, jQuery. ajax is the most frequently used method to initiate asynchronous requests to the server. The requirement at the beginning is relatively simple. The parameters to be passed when the jQuery. ajax method is called are also the common parameters: url/data/dataType/type/cache/timeout. At that time, I felt that this interface was very easy to use. I found myself wrong when I needed to send formData to the server in a recent project .... In the past, in addition to the ones I used in jQuery. ajax, there were so many more !! So I decided to go to the jQuery official website to check which parameters I don't know!

Parameter Parsing

Parameters in the jQuery. ajax () method can be divided into two types:

The first type is parameters related to the processing functions of ajax events (local events), including success/error/beforeSend/complete. These parameters are well understood and will not be discussed in this article. If you are interested, please refer to my other article "ajax event Summary In jquery";

The other type is parameters closely related to Ajax requests. This is the parameter I want to focus on in this article.
Note: These parameters are optional. If you do not manually set these parameters, jquery uses the default values of these parameters.

1. url

Default Value: the url of the current page.
Type: string)
Meaning: the destination address (server address) for sending an ajax request)

2. type

Default Value: 'get'
Type: string)
Description: Request Method. Optional values: POST, GET, PUT, and HEADER.

3. data

Default Value: None
Type: PlainObject or String or Array
Description: data sent to the server.
By default, before sending the message, jQuery processes the data in the format of query string, for example, "key1 = value1 & key2 = value2" (because contentType defaults to 'application/x-www-form-urlencoded; charset = UTF-8 ');
If you do not want jQuery to perform automatic conversion (convert data to the format specified by contentType), you can set processData to false so that jQuery will not process the data format.

4. dataFilter

Type: function (data, type)
Meaning: further filter the response data returned by the server

5. accepts

Default Value: the value of the dataType parameter.
Type: plainObject (Simple Object)
Meaning: the client tells the server to receive response data of those types.
(How to Use ???)

6. async

Default Value: true
Type: boolean)
Meaning: indicates whether the ajax request is asynchronous or synchronous. Asynchronous indicates that once this request is sent
Synchronization means that after a request is sent, the program will pause waiting for the server to respond, and the subsequent code will be blocked.
The subsequent code is not executed until the server receives the response.
You only need to set async to false, but this method will block the browser, so it is not recommended to use;

Note: Cross-origin ajax requests and dataType: jsonp ajax requests do not support synchronous ajax requests.

7. cache

Default Value: true (but when dataType is 'jsonp' or 'script', the default value of cache is false)
Type: boolean)
Meaning: When the cache is false, the browser will not cache pages requested. Of course, if you request 'jsonp' or 'script', the browser will not cache by default.

Note: this parameter is valid only when the cache value of the HEADER/GET ajax request is set to false.
(This parameter is not required for other types of ajax requests ???)

8. contentType:

Default Value: 'application/x-www-form-urlencoded; charset = UTF-8'
Type: Boolean or String (Boolean/String)
Meaning: this parameter is used when the client sends data to the server (including get and post ). ContentType tells the server 'Type of data sent by the Client 'to help the server parse data. If the data you send is not the data type specified by contentType, jQuery automatically converts the data to the data type specified by contentType.

Set contentType to false. jQuery does not add the contentType field to the HTTP header.

Note:
1. If this parameter is explicitly set, the ajax request will be sent no matter whether there is any data.
2. The data charset sent by the client can only be a UTF-8, even if you change to another value, it will still use the UTF-8.
3. For cross-origin requests, when contentType is not 'application/x-www-form-urlencoded', 'multipart/form-data', or 'text/plain, the browser sends an OPTIONS request to the server before sending the Ajax request.

9. dataType

Default Value: None
Type: string
Meaning: the data type you want to receive. If this parameter is explicitly set in the ajax request, but the data type returned by the server is not the type specified by dataType, jQuery will automatically process the returned data in the dataType format. By default, if this parameter is not set, jQuery processes the returned data (equivalent to using contenType as the dataType) according to the contentType Header of response ).

The value of dataType directly affects the data parameter of the successful callback function of success:

DataType = 'xml ':
JQuery processes the returned data as an XMLDocument object. In this case, data is an XMLDocument object. You can use DOM APIs to directly operate data;
It can be obtained through jqXHR. responseXML;

DataType = 'html' or 'text ':
JQuery does not process the returned data. data is plain text and cannot be directly operated on data using DOM APIs;
It can be obtained through jqXHR. responseText;

DataType = 'json ':
JQuery processes the returned data as javascript objects and data as javascript objects. If the returned data is null, an error is returned. If no data is returned, null or {} is returned {};
It can be obtained through jqXHR. responseJSON;

DataType = 'script ':
JQuery does not process the returned data. data is plain text.
However, before jQuery passes the data to a successful callback, it will first execute the script text;

DataType = 'jsonp ':
By default (when the jsonp parameter is not explicitly set), jQuery automatically adds "callback =?" at the end of the request URL ?";
The server returns javascript text data and jQuery converts it to json data;
Before passing json data to a successful callback function, jQuery executes the javascript code and calls the jsonpCallback callback function;

You will find that there are actually two types of returned data: XML and text (json data is also a string text). Therefore, ajax request responses are only divided into two types: responseText and responseXML.

10. global

Default Value: true
Type: boolean
Meaning: determines whether the ajax request will trigger ajax global events such as ajaxStop/ajaxStart. When an ajax request is a cross-origin script request or a JSONP request, global is automatically set to false;

11. headers

Default Value :{}
Type: plainObject Simple Object
Meaning: add additional header fields to the request header.
Note: The header field added by this parameter can be overwritten in the beforeSend method.

12. ifModified

Default Value: false
Type: boolean
Meaning: When this parameter is set to false, jQuery will not check the Last-Modified and etag fields of the Response header. If this parameter is set to true, jQuery checks the two fields to check whether the data has changed. The success callback is triggered only when the data changes.

13. processData

Default Value: true
Type: boolean
Meaning: If this parameter is set to true, jQuery will process the value of the data parameter as the format type specified by the contentType parameter. The default value of contentType is 'application/x-www-form-urlencoded; charset = UTF-8 ', so when the data parameter value is of the object or array type, jQuery automatically converts data to data in the 'Application/x-www-form-urlencoded; charset = UTF-8 'format (that is, the query string type ). When you want to send DOMDocument or formData, set processData to false to prevent jQuery from performing automatic format conversion on data.

14. statusCode

Default Value :{}
Type: plainObject
Meaning: defines the callback function for each HTTP response status code. Example:

$.ajax({  statusCode: {   404: function() {     alert( page not found );   }  }}); 

15. timeout

Default Value: None
Type: number (unit: milliseconds)
Meaning: defines the ajax request timeout time. The error event of jquery ajax is triggered after the time specified by timeout is counted from the time when the ajax request has not been returned (the native XMLHttpRequest triggers the ontimeout event ).

16. context

Default Value: ajax setting object (Yes . AjaxSetting and pass Objects after the. ajax setting parameters are merged)
Type: Object
Meaning: it refers to this in various ajax callback processing functions. Example:

$. Ajax ({url: test.html, context: document. body }). done (function () {$ (this ). addClass (done); // this indicates the body object });

17. mimeType

Default Value: None
Type: string
Meaning: similar to the native XMLHttpRequest. overrideMimeType (), it is used to overwrite the MIME type of the data returned by the server. For example, if you want to process and parse the returned data as 'text/xml', you only need to set mimeType to 'text/xml' even if the server does not specify it '.