Detailed explanation of how to implement ajax request in jquery

Ajax request

jQuery.ajax(options)

Load remote data through HTTP request. jQuery underlying AJAX implementation. For simple and easy-to-use high-level implementations, see .get, .post, etc.

.ajax() returns the XMLHttpRequest object it created. In most cases you will not need to manipulate this object directly, but in special cases it can be used to manually terminate the request. .ajax() has only one parameter: parameter key/value object, including each configuration and callback function information. See detailed parameter options below.

Note: If you specify the dataType option, please ensure that the server returns the correct MIME information (such as xml returns "text/xml"). Incorrect MIME types can cause unpredictable errors.

Note: If dataType is set to "script", then during remote requests (not under the same domain), all POST requests will be converted to GET requests. (Because the DOM script tag will be used to load)

In jQuery 1.2, you can load JSON data across domains. When using it, you need to set the data type to JSONP. When calling a function using JSONP format, such as "myurl?callback=?" jQuery will automatically replace ? with the correct function name to execute the callback function. When the data type is set to "jsonp", jQuery will automatically call the callback function.

Return value XMLHttpRequest

Parameters

options (optional): AJAX request settings. All options are optional.

Options

(1), async (Boolean): (Default: true)
Under the default settings, all requests are asynchronous requests. If you need to send synchronous requests, set this option to false. Note that a synchronous request will lock the browser, and the user must wait for the request to complete before other operations can be performed.

(2) beforeSend (Function): A function that can modify the XMLHttpRequest object before sending the request, such as adding a custom HTTP header.
The XMLHttpRequest object is the only parameter. This is an Ajax event. If false is returned, this ajax request can be canceled.

(3), cache (Boolean): (default: true, default is false when dataType is script)
jQuery 1.2 new feature, set to false will not load from the browser cacheRequestInformation.

(4), complete (Function): callback function after the request is completed (called when the request succeeds or fails).
Parameters: XMLHttpRequest object and a string describing the successful request type. This is an Ajax event

(5), contentType (String): (Default: "application/x-www-form-urlencoded") Content encoding type when sending information to the server. The default value is suitable for most applications.

(6), data (Object,String): Data sent to the server. Will be automatically converted to request string format. Appended to the URL in GET requests. See the processData option description to disable this automatic conversion.
Must be in Key/Value format. If it is an array, jQuery will automatically assign the same name to different values. For example, {foo:["bar1", "bar2"]} is converted to '&foo=bar1&foo=bar2'.

(7), dataFilter (Function): A function that preprocesses the original data returned by Ajax. Provide two parameters, data and type: data is the original data returned by Ajax, and type is the dataType parameter provided when calling jQuery.ajax. The value returned by the function will be further processed by jQuery.

(8), dataType (String): (Default value: intelligent judgment of xml or html)
The data type expected to be returned by the server. If not specified, jQuery will automatically return responseXML or responseText based on the HTTP package MIME information and pass it as the callback Function parameter, available values:

"xml": Returns an XML document, which can be processed by jQuery .
"html": Returns plain text HTML information; the included script tag will be executed when inserted into the dom.
"script": Returns plain text JavaScript code. Results are not cached automatically. Unless the "cache" parameter is set. Note: When making remote requests (not under the same domain), all POST requests will be converted into GET requests. (Because the DOM script tag will be used to load)
"json": Returns JSON data.
"jsonp": JSONP format. When calling a function using JSONP format, such as "myurl?callback=?" jQuery will automatically replace ? with the correct function name to execute the callback function.
"text": Returns a plain text string

(9), error (Function): (Default: automatic judgment (xml or html)) The time to call when the request fails. There are three parameters: XMLHttpRequest object, error message, and (optional) captured error object. If an error occurs, the error message (the second parameter) may be "timeout", "error", "notmodified" and "parsererror" in addition to null. Ajax events.

(10), global (Boolean): (Default: true) Whether to trigger global AJAX events. Setting to false will not trigger global AJAX events such as ajaxStart or ajaxStop which can be used to control different Ajax events.

(11), ifModified (Boolean): (Default: false) Only obtain new data when the server data changes. Use HTTP packet Last-Modified header information to determine.

(12), jsonp (String): Rewrite the name of the callback function in a jsonp request. This value is used to replace the "callback" part of the URL parameter in a GET or POST request such as "callback=?". For example, {jsonp:'onJsonPLoad'} will cause "onJsonPLoad=?" to be passed to the server.

(13), password (String): Password used to respond to HTTP access authentication request

(14), processData (Boolean): (Default: true) By default, sent The data will be converted to an object (not technically a string) to match the default content type "application/x-www-form-urlencoded". Set to false if you want to send DOM tree information or other information that you don't want to convert.

(15), scriptCharset (String): Only when the dataType is "jsonp" or "script" during the request, and the type is "GET", it will be used to force the charset to be modified. Usually used when the local and remote content encodings are different.

(16), success (Function): callback function after the request is successful. Parameters: Data returned by the server and processed according to the dataType parameter; a string describing the status. Ajax events.

(17), timeout (Number): Set the request timeout (milliseconds). This setting overrides the global setting.

(18), type (String): (Default: "GET") Request method ("POST" or "GET"), default is "GET". Note: Other HTTP request methods, such as PUT and DELETE can also be used, but are only supported by some browsers.

(19), url (String): (Default: current page address) The address to send the request.

(20), username (String): Username used to respond to HTTP access authentication request

(21), xhr (Function): Need to return an XMLHttpRequest object. The default is ActiveXObject under IE and XMLHttpRequest in other cases. Used to override or provide an enhanced XMLHttpRequest object. This parameter was not available before jQuery 1.3.

Use jQuery.ajax() method to obtain data, the code is as follows:

$.ajax({
 url: "http://www.php.cn", //请求的url地址
 dataType: "json", //返回格式为json
 async: true, //请求是否异步，默认为异步，这也是ajax重要特性
 data: { "id": "value" }, //参数值
 type: "GET", //请求方式
 beforeSend: function() {
  //请求前的处理
 },
 success: function(req) {
  //请求成功时处理
 },
 complete: function() {
  //请求完成的处理
 },
 error: function() {
  //请求出错处理
 }
});

The above is the detailed content of Detailed explanation of how to implement ajax request in jquery. For more information, please follow other related articles on the PHP Chinese website!