Jquery provides rich support for Ajax. For more information, see
The most basic element is $ Ajax (). with different parameters, this method supports various Ajax application scenarios. For example:
$. Ajax ({
URL: "test.html ",
Cache: false,
Success: function (HTML ){
$ ("# Results"). append (HTML );
}
});
For a complete list of parameters, see options.
Of course, these are commonly used:
- Load () -- directly use the Ajax request result as the jquery object content
- $. Get () -- GET request
- $. Post () -- submit in post Mode
- Ajaxstart ()/ajaxcomplete ()/ajaxerror ()...... -- Global Ajax Event Response
Demo:
Create a generichandler for Ajax request server: cubehandler. ashx <%@ Webhandler Language="C #"Class="Cubehandler" %>
UsingSystem;
UsingSystem. Web;
Public Class Cubehandler: ihttphandler {
Public Void Processrequest (httpcontext context ){
Context. response. contenttype = " Text/plain " ;
Int Number = 0 ;
Int . Tryparse (context. Request. Params [ " Number " ], Out Number );
Context. response. statuscode = 200 ;
Context. response. cache. setcacheability (httpcacheability. nocache );
Context. response. Write ( String . Format ( " {0} cubed is {1} " , Number, math. Pow (number, 3 )));
}
Public Bool Isreusable {
Get {
Return True ;
}
}
}
Because request. Params is used, this handler supports both get and post, <!Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< Html Xmlns = "Http://www.w3.org/1999/xhtml" >
< Head >
< Title > Ajax </ Title >
< Script SRC = "../Scripts/jquery-1.2.3.intellisense.js" Type = "Text/JavaScript" > </ Script >
< Script Type = "Text/JavaScript" >
$ ( Function (){
// Set indicator
$ ( ' # Divindicator ' ). Ajaxstart ( Function () {$ ( This ). Show ()})
. Ajaxsuccess ( Function () {$ ( This ). Hide ()})
. Ajaxerror ( Function (MSG) {$ ( This ). Hide (); alert (MSG );});
// Ajax GET request
$ ( ' # Btngetcubeinget ' ). Click ( Function (){
VaR Number = $ ( ' # Txtnumber ' ). Val ();
$. Get ( ' Cubehandler. ashx? Number = ' + Number, Function (Result ){
Alert (result );
});
});
// Ajax post submission
$ ( ' # Btngetcubeinpost ' ). Click ( Function (){
VaR Number = $ ( ' # Txtnumber ' ). Val ();
$. Get ( ' Cubehandler. ashx ' ,{ ' Number ' : Number }, Function (Result ){
Alert (result );
});
});
});
</ Script >
< Style Type = "Text/CSS" >
. Indicator
{
Color : # Ff0000 ;
Position : Absolute ;
Top : 0px ;
Right : 0px ;
Display : None ;
}
</ Style >
</ Head >
< Body >
< Div ID = "Divindicator" Class = "Indicator" >
< IMG SRC = "Indicator.gif" /> Loading </ Div >
Plz input a number: < Input ID = "Txtnumber" />
< Input Type = "Button" ID = "Btngetcubeinget" Value = "Get cube (get )" />
< Input Type = "Button" ID = "Btngetcubeinpost" Value = "Get cube (post )" />
</ Body >
</ Html >
Effect after clicking the button: