Download a simple jquery. Ajax application instance with an instance

Let's take a look at the simple introduction of jquery. Ajax (options:

Load remote data using HTTP requests.

Jquery underlying Ajax implementation. For easy-to-use high-level implementation, see $. Get, $. Post, and so on.

$. Ajax () returns the created XMLHTTPRequest object. In most cases, you do not need to directly operate on this object, but in special cases it can be used to manually terminate the request.

$. Ajax () has only one parameter: The parameter key/value object, which contains information about various configurations and callback functions.

 

Return Value:

XMLHttpRequest

 

Parameters:

Options(Optional): Ajax request settings. All options are optional.

 

Option (only the options used for this instance are explained ):

Type(String): (default: "Get") Request Method ("Post" or "get"). The default value is "get ". Note: Other HTTP request methods, such as put and delete, can also be used, but are only supported by some browsers.

URL(String): (default: Current page address) the address of the request sent.

Data(Object, string): the data sent to the server. Will be automatically converted to the request string format. The GET request will be appended to the URL. View the description of the processdata option to disable automatic conversion.

It must be in key/value format. If it is an array, jquery automatically corresponds to the same name for different values. For example, {FOO: ["bar1", "bar2"]} is converted to '& Foo = bar1 & Foo = bar2 '.

Beforesend(Function): Before sending a request, you can modify the function of the XMLHTTPRequest object, for example, adding a custom HTTP header. The XMLHTTPRequest object is a unique parameter. Ajax events.

Success(Function): callback function after the request is successful. Parameter: The data returned by the server, in the data format. Ajax events.

Instance:

Use $. Ajax () to submit two values and return the sum of the two values.

This example uses the jquery 1.4.2 class library.

First look at the HTML fileCode:

 

< Body >
< Form ID = " Form1 " Runat = " Server " >
< Div Style = " Font-size: 12px; padding-left: 15px; padding-top: 15px; " >
< Input type = " Button " ID = " Btn_ OK " Value = " Test " Onclick = " Funajax () "   />
& Nbsp; & Nbsp;
< SPAN ID = " Span_content " > Display result </ Span >
</ Div >
</ Form >
</ Body >

 

 

The funajax function is triggered when you click "test". The code of this function is as follows:

 

Function Funajax ()
{
$. Ajax ({
Type: " Post " ,
URL: " Jqueryajaxtest. ashx " ,
Data: " Begin = 1 & End = 9 " ,
Beforesend: Function (){
$ ( " # Span_content " ). Text ( " Processing... " );
},
Success: Function (MSG ){
$ ( " # Span_content " ). Text ( " The sum of two numbers: "   + MSG );
}
});
}

 

 

Use the funajax function $. ajax () calls jqueryajaxtest. the ashx file, and send the data option to jqueryajaxtest. the ashx file contains two values: Begin = 1 & End = 9 and jqueryajaxtest. the ashx file returns the result of adding the two values, jqueryajaxtest. part of the ashx file code:

 

// Return type
Context. response. contenttype =   " Text/plain " ;

Int Ibegin =   0 ;
Int Iend =   0 ;
// Receiving Parameters
Int . Tryparse (context. request [ " Begin " ]. Tostring (), Out Ibegin );
Int . Tryparse (context. request [ " End " ]. Tostring (), Out Iend );

Thread. Sleep (1000);//To reflect the loading process, I willProgramDelayed for one second

//Calculate and return results
Context. response. Write (ibegin+Iend). tostring ());

 

 

This instance is only a simple application of $. Ajax (), but it greatly simplifies Ajax development and allows users to retrieve data from the server without refreshing pages.

Download this instance.