Jquery's support for Ajax

The XMLHttpRequest handler is described in detail earlier.

Today, let's talk about jquery's support for Ajax. jquery encapsulates the underlying implementation of XMLHttpRequest and directly calls the provided method.

1. $. Ajax (options)

This method is jquery's most comprehensive support for Ajax, $. ajax (options) can send both get requests and post requests. Therefore, we can use this method to gain all control over Ajax interaction.

This method contains an options parameter in the form of {key1: val1, key2: val2, key3: val3....}, as shown in figure

{URL: deltagaction, data: {sendtime :( new date ()). gettime (), idstr: idstr}, type: "Post", async: false, datatype: "JSON", success: function (data) {If (data. success) {$ ("# Shield "). fadeouts (400); $ ("# subdetailwrapper "). fadeout (400); $ ("# Middle "). load (listtagaction, {sendtime :( new date ()). gettime (), currentpage: currentpage}) Alert ("operation successful !!! ");} Else {alert (" operation failed. Please contact the developer !!! ");}}}

The following describes the options that can be specified to send an Ajax request:

Common:
Async ----------------------------------- specifies whether asynchronous requests are used. The default value is true (asynchronous requests are used)

Beforesend ----------------------------- specifies that the specified function will be triggered before the request is sent. Through this function, we can add custom request headers or request status bars before the request,

Complete ------------------------------- specifies the callback function after Ajax interaction is completed. This function will be called after the callback function of succes or error. The function specified by this option is shown in the following figure:

Function (xhr, textstatus) {...}, xhr indicates the XMLHTTPRequest object for this interaction, and textstatus indicates the description of the corresponding status on the server.

Data ------------------------------------ Request Parameters for sending this Ajax request. The specified parameter format is {key1: val1, key2: val2, key3: val3 ....}

Datatype ------------------------------ specifies the server response type. If this parameter is not specified, jquery returns responsexml or responsetext based on the response header and sends the response to the corresponding callback function parameters. The optional values are as follows:

XML: returns XML documents that can be processed using jquery.

HTML: returns HTML text.

Script: returns a Javascript script. Note that the browser cache must be disabled.

JSON: returns a string in JSON format.

Text: returns a common text response.

Jsonp: Specifies to use jsonp to load JSON blocks. When using jsonp, you should add "? Callback = ?", Callback is the callback function.

Error --------------------------------- specify the callback function in which an error occurs in the server response. The specified function type is like function (xhr, textstatus, errorthrown ){..}, the xhr parameter indicates the XMLHTTPRequest object of the request, the textstatus parameter indicates the error information, and the errorthrown parameter indicates the error object that causes the error.

Success ------------------------------- specify the callback function after the server response is successful. The specified function type is like function (xhr, textstatus ){..}, the xhr parameter indicates the XMLHTTPRequest object, and the textstatus parameter indicates the server response status.

Timeout --------------------------------- set the Ajax request timeout period

Type ------------------------------------- set the request sending method. commonly used methods are "Post" and "get". The default value is "get"

URL --------------------------------------- specify the destination URL of the Ajax request

 

Others:

Cache ----------------------------------- whether to read the cache from the browser. The default value is true (read the cache). We generally do not want to read the cache by adding a time stamp to the sent parameter to cheat the browser.

Contenttype --------------------------- specifies the encoding format used for requests sent to the server. The default value is "application/X-WWW-form-urlencoded"

Datafilter ------------------------------ executes a callback function, which preprocessing the server-side response. The specified function is function (data, type ){....}, data indicates the response returned by the server, and type indicates the Data Type of the server response.

Global ---------------------------------- sets whether to trigger the global event processing function of Ajax. The default value is true.

Ifmodified -------------------------------- sets whether to retrieve new data only when the server data changes. The default value is false.

Jsonp ----------------------------------- the value specified for this model selection will overwrite the callback function requested in jsonp.

Username --------------------------------- specify the user name required for the target URL

Password ------------------------------- specify a password for the target URL

Processdata ---------------------------- specifies whether the request data needs to be processed. The default value is true (to be processed)

Xhr -------------------------------------- use your own method to create an XMLHTTPRequest object

Ajax with common options:

Function Update (deltagaction, listtagaction) {var tagid = $ ("# examid "). val (); var currentpage = $ ("# currentpage "). val (); // get the current page // alert (currentpage); var IDs = new array (); if ($ ("input [name = 'id']: checked "). size () = 0) {alert ("Check the option first! "); Return false ;}$ (" input [name = 'id']: checked "). each (function (I, OBJ) {IDs [I] = $ (OBJ ). val () ;}); var idstr = IDs. join ("-"); $. ajax ({URL: deltagaction, data: {sendtime: (new date ()). gettime (), idstr: idstr, tagid: tagid}, type: "Post", async: false, datatype: "JSON", success: function (data) {If (data. success) {$ ("# Middle "). load (listtagaction, {sendtime :( new date ()). gettime (), currentpage: currentpage }) Alert ("operation successful !!! ");} Else {alert (" operation failed. Please contact the developer !!! ");}}});}

Looking at the code above, you can see the use of a load method:

$ ("# Middle"). Load (listtagaction,
{
Sendtime :( new date (). gettime (),
Currentpage: currentpage
}
)

The load method is a very convenient Ajax interaction method. It can send an asynchronous request to a remote URL without specifying the callback function, you can specify an id css to automatically load the server's HTML response.

The method is described as follows: load (URL, [, data] [, callback]), data is a form such as {key1: val2, key2: val2, key3: val3 ...} and callback is the callback function. Both parameters are optional.

The following example:

// Display function show (tagaction, city) {$ ("# detail") by province "). empty (); $ ("# detail "). load (tagaction, {sendtime :( new date ()). gettime (), City: City });}

After the interaction, the data returned by the server is loaded to the position of the element whose ID is detail.

2. $. ajax (options) provides us with comprehensive control over Ajax request details, but the other aspect is complicated. Therefore, jquery provides several simple methods to send requests.

(1) $. get (URL, [data], [callback], [type]): Send a GET request to the server. The parameters are: URL: Address of the accessed server; data: a js object is equivalent to a specified request parameter;

Callback: the callback function after the server responds successfully. This function is like the function (data, statustext) {...}. data indicates the server response, and statustext indicates the server.

The description of the response type. type indicates the Data Type of the server response.

(2) $. Post (URL, [data], [callback], [type]): used to send a POST request to the server in the same way as $. Get ().

(3) $. getjson (URL, [data], [callback]): Same as $. Get (), but the default type is JSON.

(4) $. getscript (URL, [callback]): Same as $. Get (), it only specifies the type method as script by default.

The four methods are similar: sample code using the $. getjson (URL, [data], [callback]) Method

Function startexam () {// use ajax to interact with each other $. getjson (".. /adminpath/startexamaction. action ", {sendtime :( new date ()). gettime ()}, function (JSON) {If (JSON. success = true) {// alert (JSON. responsemsg); $ ("# rightcontent "). load (".. /adminpath/settingexam. action ", {sendtime: (new date ()). gettime (), PID: JSON. PID, tskid: JSON. tskid, examid: 0});} else {alert ("\ u64cd \ u4f5c \ u5931 \ u8d25 \ uff01 ");}});}