$. Ajax usage and Examples

The $. ajax method in jquery is used to load remote data through HTTP requests. This method is implemented by jQuery underlying AJAX. Some simplified methods include $. get, $. post, and $. getJSON. Because the $. ajax method is often used in the work, some common usage of this method is recorded.

The following is a commonly used $. ajax method:

$. Ajax ({type: 'get', url: 'http: // handle () {alert ('before request') ;}, success: function (data) {alert ('request succeeded ') ;}, error: function (msg) {alert ('request error occurred ');}});

The above Code only uses some common parameters and processing functions. The following lists all parameters and function objections in the $. ajax method:

Parameters:

Url type: String, default value: Current page address. The address where the request is sent.

Type: String, which can be "POST" or "GET". The default value is "GET ". Note: Other HTTP request methods, such as PUT and DELETE, can also be used, but are only supported by some browsers.

Async type: Boolean. The default value is true. By default, all requests are asynchronous requests (that is, when the ajax request is executed, the following code will continue to be executed no matter whether the request is executed successfully ). To send a synchronization request, set this option to false. If you encounter some processing code after the ajax request, and the processing depends on the ajax request results, it is best to set the value to false in this place. Note: The synchronous request locks the browser. Other operations can be performed only after the request is completed.

Cache type: Boolean. The default value is true. When the dataType parameter is set to script or jsonp, the default value is false. If this parameter is set to false, the data of the previous request is not cached for multiple requests. New Functions of jQuery 1.2.

ContentType: String, default value: "application/x-www-form-urlencoded ". The Content Encoding type when sending information to the server. You can also set it to "application/json; charset = UTF-8 ". The default value is applicable in most cases. If you explicitly pass a content-type to $. ajax (), it will certainly be sent to the server (even if there is no data to be sent ).

Data Type: String, the data sent to the server. The general format is {key1: value1, key2, value2}. 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'. If there is no value, it can be empty {}.

DataType type: String, which specifies the data type returned by the server. If this parameter is not specified, jQuery automatically determines Based on the MIME information of the HTTP package. For example, the xml mime type is recognized as XML. In 1.4, JSON will generate a JavaScript Object, and script will execute this script. The data returned by the server is parsed based on this value and passed to the callback function. The values of this parameter are optional:

"Xml": returns an XML document, which can be processed by jQuery.
"Html": returns plain text HTML information. The 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: During remote requests (not in the same domain), all POST requests are converted to GET requests. (Because the script tag of DOM will be used for loading)
"Json": Return JSON data.
"Jsonp": JSONP format. When calling a function in the form of JSONP, such as "myurl? Callback =? "Will jQuery be replaced automatically? For the correct function name to execute the callback function.
"Text": returns a plain text string.

IfModified type: Boolean. New data is obtained only when the server data changes. Default Value: false. Use the Last-Modified header information of the HTTP packet to determine. In jQuery 1.4, it also checks the 'etag' specified by the server to confirm that the data has not been modified.

Timeout type: Number, set the request timeout time (unit: milliseconds ). This setting overwrites the global setting.

Global: Boolean. Indicates whether to trigger a global AJAX event. Default Value: true. Setting false does not trigger global AJAX events. For example, ajaxStart or ajaxStop can be used to control different Ajax events.

ProcessData type: Boolean, default value: true. By default, data transmitted through the data option is converted into a query string if it is an object (technically, as long as it is not a string, with the default content type "application/x-www-form-urlencoded ". If you want to send the DOM tree information or other information that does not want to be converted, set it to false.

JsonpCallback specifies a callback function name for the jsonp request. This value is used to replace the random function name automatically generated by jQuery. This function is mainly used to make jQuery generate a unique function name, which makes it easier to manage requests and conveniently provide callback functions and error handling. You can also specify the callback function name when you want the browser to cache the GET request.

Processing functions:

Before sending a request, you can modify the function of the XMLHttpRequest object, such as adding a custom HTTP header. The XMLHttpRequest object is a unique parameter. This is an Ajax event. If false is returned, the ajax request can be canceled.

Callback Function after the complete (XHR, TS) request is completed (whether or not it is successful. Parameter: XMLHttpRequest object and a string that describes the request type.

DataFilter is a preprocessing function for the raw data returned by Ajax. Two parameters are provided: 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.

Default Value of error: Automatic judgment (xml or html ). This function is called when the request fails. There are three parameters: XMLHttpRequest object, error message, and (optional) caught exception object. If an error occurs, in addition to null, the error message (the second parameter) may also be "timeout", "error", "notmodified", and "parsererror ".

Callback Function after successful success request. Parameter: the data that is returned by the server and processed according to the dataType parameter; a string that describes the status.

Xhr needs to return an XMLHttpRequest object. ActiveXObject in IE and XMLHttpRequest in other cases by default. Used to override or provide an enhanced XMLHttpRequest object. This parameter is unavailable before jQuery 1.3.

Some of the parameters described above are not all parameters, and some are not commonly used. They are not written because they are not used much in the work.

Articles you may be interested in

• Jquery $. ajax $. post or $. get: How to submit the checkbox Value
• $. Post and $. ajax Usage Analysis in Jquery
• Several methods for implementing native ajax using javascript
• Example of backend asynchronous ajax Modification
• How jquery ajax prevents repeated submissions
• Jquery waits for the ajax execution to complete and then continues to execute the following code.
• Ajax timeout processing in jquery
• Php defense against XSS and ajax cross-origin attacks