Introduction to AJAX event execution sequence in jquery

Source: Internet
Author: User
Tags error handling http post http request json script tag string format

Event execution Order We are as follows, from direction to bottom

1.ajaxStart (Global event)
2.beforeSend
3.ajaxSend (Global event)
4.success
5.ajaxSuccess (Global event)
6.error
7.ajaxError (Global event)
8.complete
9.ajaxComplete (Global event)
10.ajaxStop (Global event)

Add Ajax


jQuery AJAX Request


Request Description
$ (selector). Load (url,data,callback) loads the remote data into the selected element
$.ajax (options) loads the remote data into the XMLHttpRequest object
$.get (Url,data,callback,type) uses HTTP get to load remote data
$.post (Url,data,callback,type) uses HTTP post to load remote data
$.getjson (url,data,callback) uses HTTP get to load remote JSON data
$.getscript (Url,callback) loads and executes remote JavaScript files

(URL) The URL (address) of the data being loaded

(data) A key/value object sent to the server

(callback) The function that is executed when the data is loaded

(type) The types of data returned (Html,xml,json,jasonp,script,text)

(options) all key/value pairs for full AJAX requests


The Ajax () method loads remote data through an HTTP request.

The approach is the jQuery-bottom AJAX implementation. Simple and easy-to-use high-level implementation see $.get, $.post, etc. $.ajax () returns the XMLHttpRequest object that it created. Most of the time you don't have to manipulate the function directly, unless you need to manipulate the infrequently used options for more flexibility.

In the simplest case, $.ajax () can be used directly without any parameters.

Note: All options can be set globally through the $.ajaxsetup () function.

Grammar
Jquery.ajax ([Settings]) parameter description
settings are optional. A collection of key-value pairs used to configure AJAX requests.

You can set the default value for any option by $.ajaxsetup ().

Parameters
Options
Type: Object

Optional. AJAX request settings. All options are optional.

Async
Type: Boolean

Default value: True. All requests are asynchronous requests under the default settings. If you need to send a sync request, set this option to false.

Note that the synchronization request will lock the browser and the user's other actions must wait for the request to complete before it can be executed.

Beforesend (XHR)
Type: Function

You can modify the functions of 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 you return False, you can cancel this Ajax request.

Cache
Type: Boolean

Default value: False when True,datatype is script and Jsonp. Set to False to not cache this page.

JQuery 1.2 new features.

Complete (XHR, TS)
Type: Function

The callback function (called after the request succeeds or fails) after the request completes.

Parameters: XMLHttpRequest object and a string that describes the request type.

This is an Ajax event.

ContentType
Type: String

Default value: "Application/x-www-form-urlencoded". Content encoding type when sending information to the server.

Default values are appropriate for most situations. If you explicitly pass a content-type to $.ajax () then it will definitely be sent to the server (even if there is no data to send).

Context
Type: Object

This object is used to set the context of Ajax-related callback functions. That is, let this point in the callback function refer to this object (if this argument is not set, this will point to the options argument passed when the AJAX request is invoked). For example, a DOM element is specified as the context parameter, so that the success callback function is set to this DOM element.

Just like this:

$.ajax ({url: "test.html", Context:document.body, Success:function () {
$ (this). AddClass ("Done");
}});
Data
Type: String

Data sent to the server. is automatically converted to the request string format. The GET request is appended to the URL. View the ProcessData option description to prevent this automatic conversion. Must be in the Key/value format. If you are an array, JQuery will automatically correspond to the same name for different values. such as {foo:["bar1", "Bar2"]} is converted to ' &foo=bar1&foo=bar2 '.

Datafilter
Type: Function

A function to preprocess the raw data returned by Ajax. Provides data and type two parameters: Data is the original source 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.

DataType
Type: String

The type of data expected to be returned by the server. If not specified, JQuery will automatically intelligently judge against HTTP packet mime information, such as XML MIME types being recognized as XML. In 1.4, JSON generates a JavaScript object, and script executes it. The data returned by the server side is then parsed against this value and passed to the callback function. Available values:

• "XML": Returns an XML document that can be processed with jQuery.
• "HTML": Returns plain text HTML information, and the included script tag executes when the DOM is inserted.
• "Script": Returns the plain text JavaScript code. Results are not automatically cached. Unless the "cache" parameter is set. Note: On remote requests (not in the same domain), all POST requests are converted to get requests. (because it will be loaded using the DOM's script tag)
• "JSON": Returns JSON data.
• "JSONP": Jsonp format. When calling a function using JSONP form, such as "myurl?callback=?" JQuery is automatically replaced? To the correct function name to execute the callback function.
• "Text": Returns a plain text string
Error
Type: Function

Default value: Automatic Judgment (XML or HTML). Call this function when a request fails.

There are three parameters: XMLHttpRequest object, error message, optionally caught exception object.

If an error occurs, the error message (the second argument) may be "timeout", "error", "Notmodified", and "ParserError" in addition to being null.

This is an Ajax event.

Global
Type: Boolean

Whether to trigger global AJAX events. Default value: True. Setting to FALSE will not trigger global AJAX events, such as Ajaxstart or ajaxstop, that can be used to control different AJAX events.

Ifmodified
Type: Boolean

Gets new data only when the server data changes. Default value: False. Use HTTP packet last-modified header information to determine. In JQuery 1.4, it also checks the server-specified ' ETag ' to determine that the data has not been modified.

Jsonp
Type: String

Overrides the name of the callback function in a JSONP request. This value is substituted for the "callback" section of the URL parameter in the GET or POST request in "callback=?", such as {jsonp: ' onjsonpload ' will cause "onjsonpload=?" to be passed to the server.

Jsonpcallback
Type: String

Specifies a callback function name for the JSONP request. This value will be used to replace the random function name that jQuery automatically generates. This is primarily used to allow jQuery to generate unique function names, which makes it easier to manage requests and easily provides callback functions and error handling. You can also specify this callback function name when you want the browser to cache a GET request.

Password
Type: String

The password used to respond to HTTP access authentication requests

ProcessData
Type: Boolean

Default value: True. By default, data that is passed in through the data option, if it is an object (technically, as long as it is not a string), is processed into a query 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 do not want to convert.

Scriptcharset
Type: String

Only DataType is "JSONP" or "script" when requested, and type "get" is used to force modification of CharSet. Usually used only when the local and remote content encoding is different.

Success
Type: Function

The callback function after the request succeeds.

Parameters: Data returned by the server, processed according to the DataType parameter, and a string describing the state.

This is an Ajax event.

Traditional
Type: Boolean

If you want to serialize data in a traditional way, set it to true. Please refer to the Jquery.param method below for tool classification.

Timeout
Type: Number

Sets the request timeout (in milliseconds). This setting overrides the global setting.

Type
Type: String

Default value: "Get"). Request Mode ("POST" or "get"), default to "get". Note: Other HTTP request methods, such as put and DELETE, are also available, but only partially supported by browsers.

Url
Type: String

Default value: Current page address. The address where the request was sent.

Username
Type: String

The user name used to respond to HTTP access authentication requests.

Xhr
Type: Function

A XMLHttpRequest object needs to be returned. The default is ActiveXObject under IE, and in other cases it is xmlhttprequest. Used to override or provide an enhanced XMLHttpRequest object. This parameter is not available until JQuery 1.3.
callback function
If you want to process data from $.ajax (), you need to use a callback function: Beforesend, error, Datafilter, success, complete.

Beforesend
Called before the request is sent, and a xmlhttprequest is passed in as an argument.

Error
Called when an error is requested. Incoming XMLHttpRequest object, describing the type of error string and an exception object (if any)

Datafilter
Called after the request succeeds. Incoming data returned and the value of the "DataType" parameter. and must return the new data (possibly processed) to the success callback function.

Success
Called after the request. Incoming data returned, and a string containing the success code.

Complete
This function is called after the request completes, regardless of success or failure. The incoming XMLHttpRequest object, and a string containing the success or error code.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.