Application of jquery and Ajax 2

1. Two global methods

 $. Getscript (path, function (){});

Purpose: dynamically load the script.

Path: scriptAddress.

Callback: Optional. Run the script after the Javascript file is successfully loaded.

Code:

$ ( Function (){
$. Getscript ( ' Jquery. color. js ' , Function (){
$ ( " # Go " ). Click ( Function ){
$ ( " . Block " ). Animate ({backgroundcolor: ' Pink ' }, 1000 ). Animate ({backgroundcolor: ' Blue ' }, 1000 )
});
});
});

 

 $. Getjson (URL, function (data ){});

Purpose: load a JSON file.

URL: Target URL

Callback: Optional.

Data: The JSON clip of the returned content.

Code:

 

$ ( Function (){
$ ( ' # Send ' ). Click ( Function (){
$. Getjson ( ' Test. JSON ' , Function (Data ){
$ (( ' # Restext ' ). Empty ();
VaR Html =   '' ;
$. Each (data, Function (Commentindex, comment ){
Html + = ' <Div class = "comment"> <H6> ' +
Comment [ ' Username ' ] + ' : </H6> <P class = "para"> ' + Commnet [ ' Content ' ] + ' </P> </div> ' ;
});
$ ( ' # Restext ' Pai.html (HTML );
})
})
});

PS: usage of the global function $. Each (data, function (commentindex, comment. Used to traverse arrays or object sets.

Data is an array or an object.

Commentindex indicates the index, and comment indicates the variable or content corresponding to the index.

 

2. jquery underlying Ajax implementation

$. Ajax () is the underlying Ajax Implementation of jquery.

Its structure is: $. Ajax (options)

The options parameter exists in the form of key/value.

URL: String sending request address.

Type: the default request method is get.

Timeout: timeout, in milliseconds.

Data: the data sent to the server, object or string.

Datatype: The expected data type returned by the server. If this parameter is not specified, reponsexml or reponsetext will be returned Based on the mime information of the http package.

Beforesend: before sending a request, you can modify the XMLHTTPRequest object function, for example, adding a custom HTTP header. If the return value is false, the Ajax request can be canceled.

Complete: the callback function when the request is completed.

Success: the callback function when the request is successful.

Error: the callback function when the request fails.

Global: whether to trigger a global Ajax event. The default value is true;

 

Code:

$ ( Function (){
$ ( ' # Send ' ). Click ( Function (){
#. Ajax ({
Type: " Get " ,
URL: " Test. js " ,
Datatype: " Script "
});
});
});

 

3. serialize Elements

 Serialize () method

Purpose: Act on a jquery object and serialize the content of the DOM element to a string. Usually used for Ajax form submission.

Returns a string.

 

< Form ID = "Form1" Action = "#" >
< P > Comment: </ P >
< P > Name: < Input Type = "Text" Name = "Username" ID = "Username" /> </ P >
< P > Content: < Input Type = "Text" Name = "Content" ID = "Content" /> </ P >
< P > Content: < Input Type = "Button" ID = "Send" Value = "Submit" /> </ P >
</ Form >

 

$ ( ' # Send ' ). Click ( Function (){
$. Get ( " Get1.php " , $ ( ' # Form1 ' ). Serialize (), Function (Data, textstatus ){
#( ' # Restext ' Pai.html (data );
})
});

 

 The core of the serialize () function is the $. Param () method.

Purpose: serialize an array or object by key/value.

 

VaR OBJ = {: 1 , B: 2 , C: 3 };
VaR K = $. Param (OBJ );
Alert (k ); // Output A = 1 & B = 2% c = 3

 

4. Global Ajax events in jquery

When Ajax starts a request, the callback function of the ajaxstart () method is triggered. When the request ends, the ajaxstop callback function is requested.

Ajaxstart (callback) starts request execution

Ajaxstop (callback) Request end execution

Executed when the ajaxcomplete (callback) request is complete

Run the command when an error occurs in ajaxerror (callback ).

Ajaxsend (callback) Request executed before sending

Executed when the ajaxsuccess (callback) request is successful

To prevent an Ajax request from being affected by the global method, set global in the parameter to false.