Comprehensive analysis of $. Ajax () method parameters (recommended) _ajax related

Let me introduce you to the AJAX concept.

Ajax, "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), refers to a web development technology that creates interactive Web applications.

AJAX = Asynchronous JavaScript and XML (a subset of standard generic markup languages).

AJAX is a technique for creating fast-moving web pages.

AJAX enables asynchronous updating of Web pages by making a small amount of data exchange in the background with the server. This means you can update portions of a Web page without reloading the entire page.

Traditional Web pages (without AJAX) if you need to update the content, you must overload the entire page page.

Ajax methods

The $.ajax () method is the most low-level AJAX implementation of jquery. Its structure is:

$.ajax (Options)

The method has only one parameter, but the object contains information such as request settings and callback functions required by the $.ajax () method, and the parameters are in the form of Key/value, and all parameters are optional. Common parameters are shown in the following table:

1.url

Requires that the requested page be sent as a string parameter, which defaults to the current address.

2.type

A parameter of type string is required, and the request method (post or get) defaults to get. Note that other HTTP request methods, such as put and delete, are also available, but only partially supported by browsers.

3.timeout

Requires a parameter of type number that sets the request timeout (in milliseconds). This setting overrides the global setting of the $.ajaxsetup () method.

4.async

A parameter of type Boolean is required, the default setting is true, and all requests are asynchronous requests. Set this option to False if you need to synchronize your request. Note that the synchronization request will lock the browser, and other actions must wait for the request to complete before it can be executed.

5.cache

The request is a Boolean parameter, the default is true (the default is False when datatype is script), and setting false does not load the requested information from the browser cache.

6.data

Requires data that is sent to the server for an object or string type of parameter. If it is not a string, it is automatically converted to a string format. The GET request is appended to the URL. To prevent this automatic conversion, you can view the ProcessData option. The object must be in key/value format, for example {foo1: "Bar1", Foo2: "Bar2"} to &foo1=bar1&foo2=bar2. If it is an array, jquery will automatically correspond to the same name for different values. For example, {foo:["bar1", "Bar2"]} is converted to &FOO=BAR1&FOO=BAR2.

7.dataType

A parameter of type string that is expected to be the data type returned by the server. If not specified, jquery will automatically return Responsexml or responsetext based on the mine information of the HTTP packet and pass as a callback function parameter. The available types are as follows:

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 that when a remote request is not in the same domain, all post requests are converted to get requests.

JSON: Returns JSON data.

Jsonp:json format. When calling a function using the Jsonp form, for example, Myurl?callback=?,jquery will automatically replace the latter "?" To the correct function name to execute the callback function.

Text: Returns a plain text string.

8.beforeSend

Requires a parameter of a function type, you can modify the function of the XMLHttpRequest object before sending the request, such as adding custom HTTP headers. If you return False in Beforesend, you can cancel this Ajax request. The XMLHttpRequest object is the only parameter.

function (XMLHttpRequest) {
this;//The Options argument passed when invoking this Ajax request
}

9.complete

A parameter that requires a function type, and a callback function called after the request completes (both the request succeeds and the failure is called). Parameters: XMLHttpRequest object and a string that describes the type of successful request.

function (xmlhttprequest,textstatus) {
this;//The options parameter passed when invoking this Ajax request
}

10.success

A parameter that requires a function type, and a callback function called after the success of the request, with two parameters.

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

(2) A string describing the state.

11.error

A parameter called a function type that is called when a request fails. The function has 3 parameters, that is, an XMLHttpRequest object, an error message, a captured Error object (optional). The Ajax event functions are as follows:

function (Xmlhttprequest,textstatus,errorthrown) {
//usually Textstatus and Errorthrown only one of them contains information this
; The options argument passed when invoking this Ajax request
}

12.contentType

A parameter of type string is required when sending information to the server. The content encoding type defaults to "application/x-www-form-urlencoded". This default value is appropriate for most applications.

13.dataFilter

A function that requires preprocessing of the original data returned by Ajax for parameters of the function type. Provides data and type two parameters. Data is the original source returned by Ajax, and type is the datatype parameter provided when the Jquery.ajax is invoked. The value returned by the function will be further processed by jquery.

function (data,type) {
//return data after processing
;
}

14.global

A parameter of the Boolean type is required, and the default is true. Indicates whether global AJAX events are triggered. Setting to FALSE will not trigger global AJAX events, and Ajaxstart and ajaxstop can be used to control various AJAX events.

15.ifModified

A parameter of the Boolean type is required, and the default is False. Gets new data only when the server data changes. The server data change judgment is based on last-modified header information. The default value is False, which is to ignore header information.

16.jsonp

Requires an argument of type string to override the name of the callback function in a JSONP request. This value is used in place of the "callback=?" The "callback" section of the URL parameter in this get or POST request, for example {jsonp: ' onjsonpload '}, causes the "onjsonpload=?" passed to the server.

17.username

A parameter of type string that is required to respond to the HTTP access authentication request user.

18.password

A parameter of type string required to respond to the password of an HTTP access authentication request.

19.processData

A parameter of the Boolean type is required, and the default is true. By default, the data sent is converted to objects (technically rather than strings) 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.

20.scriptCharset

Requires a parameter of type string that is used to force the character set (charset) only when the request is datatype to "JSONP" or "script" and type is get. Typically used when local and remote content encodings are different.

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: the $.each () function is different from each () method of the JQuery object, which is a global function that does not manipulate the jquery object. The function receives two arguments, the 1th argument is an array or object, and the 2nd parameter is a callback function. The callback function has two parameters: the 1th parameter is the index of the array or the member of the object, and the 2nd parameter is the corresponding variable or content.

$.each (Data,function (commentindex,comment) {
  //dosomething;
 })

2, Ajaxstart () and Ajaxstop (): When the AJAX request starts, it triggers the callback function of the Ajaxstart () method. When the AJAX request ends, the callback function of the Ajaxstop () method is triggered. These methods are global methods, so wherever the code that creates them is located, they are triggered whenever an AJAX request occurs.

Sometimes the page needs to load some pictures, may be slow back, if the loading process, not to provide users with some hints and feedback information, it is easy to let users mistakenly think button click Useless, so that users lose information on the site.

At this point, we need to add a message to the page, the common message is "Loading ...", the code is as follows:

<div id= "Loading" > Loading ...</div>

When the AJAX request begins, the element is displayed to prompt the user that the AJAX request is in progress, and when the AJAX request is finished, the element is hidden. The code is as follows:

$ ("#loading"). Ajaxstart (function () {
$ (this). Show ();
}). Ajaxstop (function () {
 $ (this). Hide ();
 })

Okay, let's share a case code here:

$ (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 small series for you to introduce a comprehensive analysis of $. Ajax () method parameters (recommended), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!