JQuery Ajax application summary and jqueryajax Summary

JQuery Ajax application summary and jqueryajax Summary

 JQuery provides simple and powerful selector functions, and provides good support for Ajax operations. In addition to providing the underlying jQuery. Ajax () method, jQuery also provides the following simple method:

(1) jQuery. get (url,[Data],[Callback],[Type])

(2) jQuery. getJSON (url,[Data],[Callback])

(3) jQuery. getScript (url,[Callback])

(4) jQuery. post (url,[Data],[Callback],[Type])

Because jQuery. ajax () has powerful functions and many configurable parameters, we will summarize the precautions for this method.

1. jQuery. ajax () is requested asynchronously by default. If synchronization is required, set async to false. Because some applications must synchronize the request data. For example, in some Flash and JS interaction applications, to request a JS function, you need to get the returned data immediately. In this case, you must use the synchronous Ajax call method.

2. if Ajax is a Get request, the returned data is generally cached by the browser. If you do not want to be cached, you can set the cache parameter to false; or send a request with a timestamp, in this way, the browser will consider it as a new request and reload data from the server. Of course, requests sent by POST will not be cached.

3.DataType:Expected data type returned by the server. If this parameter is not specified, jQuery will automatically return responseXML or responseText Based on the MIME information of the HTTP package and pass it as a callback function parameter. Available values:

(1) "xml": returns an XML document, which can be processed by jQuery.

(2) "html": returns plain text HTML information. The script tag is executed when the dom is inserted.

(3) "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 will be converted to GET requests. (Because the script tag of DOM will be used for loading)

(4) "json": Return JSON data.

(5) "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.

(6) "text": returns a plain text string.

Among them, "script", "Json"Setting can solve Ajax Problems.

4. If the server returns a string or value, you can use a normal ajax call.

If the server returns a JSON object, you 'd better use jQuery. getJSON or setDataType = json. Because it takes time for the browser to parse the JSON object and directly return the JSON object, saving the parsing time. This can avoid errors that are clearly returned on the server but not obtained by the browser.

5. Ajax calls take time, So we usually put all the processing code after Ajax calls in the callback method. This method cannot be used:

Function getMyPrizeList (){

If (isNotEmpty (uid )){

Var obj = new Object ();

Try {

JQuery. ajax ({type: "GET", url: "someurl", async: false, cache: false, dataType: "script", scriptCharset: "gbk", success: function (json ){

Obj = json;

}

});

} Catch (e ){}

Obj = eval ("(" + obj + ")");

// Alert (obj );

Var str = "";

For (var I in obj)

{

Str + = '<tr>' + '<th>' + prizearray [obj [I]. prizeno] + '</th>'

Str + = '<td>' + 'CD-KEY: '+ obj [I]. cdkey +' </td>'

Str + = '<td>' + 'term:' + obj [I]. expiratedate + '</td> </tr> ';

}

JQuery ("# prizelist"). append (str );

}

}

This must be done: Put the processing code into the success function!

Function getMyPrizeList (){

If (isNotEmpty (uid )){

Var obj = new Array ();

Try {

JQuery. ajax ({type: "GET", url: "someurl ",

Cache: false,

DataType: "script ",

ScriptCharset: "gbk ",

Success: function (json ){

Try {

Obj = result;

} Catch (e ){}

JQuery ("# prizelist" ).html ("");

Var str = "";

For (var I = 0; I <obj. length; I ++ ){

Str + = '<tr> <th>' + prizearray [obj [I]. prizeno] + '</th> ';

Str + = '<td> CD-KEY:' + obj [I]. cdkey + '</td> ';

Str + = '<td> term:' + obj [I]. expiratedate + 'before </td> </tr> ';

}

JQuery ("# prizelist"). append (str );

}

});

} Catch (e ){}

}

}

6. jQuery. getJSON instance:

// Internal function to load and set the detailed information of the debtor

Function innerShowDetail (){

// Obtain data in JSON format

$. GetJSON ('Load. do ', {id: userId}, function (json ){

// Set value based on key

For (key in json ){

If (key = 'id '){

$ ('# DetailDiv #' + key). val (json [key]);

} Else {

If (json [key] = ''){

// No value is set to null

$ ('# DetailDiv #' + key).html ('');

} Else if (key = 'sex '){

$ ('# DetailDiv #' + key).html (json [key] = '0 '? Female: male ');

} Else if (key = 'group '){

If (json [key]! = Null ){

$ ('# DetailDiv #' + keydomain.html (json [key] ['groupname']);

}

} Else {

$ ('# DetailDiv #' + key).html (json [key]);

}

}

}

// Set the dialog box title and content

$ ('# DetailDiv'). removeAttr ('class ');

Dialog. setTitle ('viewer ['+ json ['username'] +'] ');

Dialog.setcontent(('{detaildiv'{.html ());

});

}