Implementation of ajax using jquery under asp.net

Jquery and ajax have fallen behind in discussion today, and there are a lot of materials on the Internet, but many new users are still confused about this. This article demonstrates how to use jquery to implement ajax technology in the simplest way. (This article is designed for beginners, so do not spray it. Here, we omit 10 thousand words ). As for jquery and ajax, google Google.

First, create an asp.net web empty application named "Ajax", project directoryAs shown in.

Among them, the. ashx file is a general processing program. You don't need to know what it is for now. You will know it later. The jquery-1.7.1.js can be downloaded here.

First, let's clarify what we want to implement: The WebForm1 page sends a request to the Handler1 processing program every second, Handler1 returns data to the WebForm1 page, and the WebForm1 page implements partial refreshing through ajax technology.

First, let's take a look at the main code of Handler1:
Copy codeThe Code is as follows:
Public void ProcessRequest (HttpContext context)
{
Random rand = new Random ();
Int num = rand. Next (1, 10 );
Context. Response. Write (num );
}

It is mainly to change the ProcessRequest Method to the above format to generate a 1 ~ Return a random integer of 9 to the request page.

Let's take a look at the main code of WebForm1.aspx:
Copy codeThe Code is as follows:
<Script type = "text/javascript" src = "jQuery/jquery-1.7.1.js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
Function get (){
$. Ajax ({
Type: "Post ",
Url: "Handler1.ashx ",
Data :"",
Success: function (data ){
$ ("# DataShow"). text (data );
}
});
}
SetInterval (get, 1000 );
})
</Script>

If we want to use jquery, We need to reference the jqury-1.7.1.js file we just downloaded, the following code should be clear? If you cannot understand this, you need to complete the js basics first.

Add the following code on the page:
Copy codeThe Code is as follows:
<P id = "dataShow"> </p>

Is used to display the data returned by the Handler1 request.

Finished! That's all! If it is normal, you can see a number randomly changed from 1 to 9 in the browser. Note that the whole page is not refreshed here! If you do not believe it, you can give the <p> label a margin to display a scroll bar that exceeds the browser height. If the scroll bar does not return to the top when the data changes, it indicates a partial refresh.

For more advanced functions, you need to check your own data and research. This is just a simple entry-level article.