Practical tips for using jquery to implement AJAX solutions based on ASP.net

Whether it is jquery or Ajax in today's discussion has been very backward, there are a lot of information on the Internet, but there are still a lot of beginners are very confused. This article in the simplest way for beginners to demonstrate how to use jquery to implement AJAX technology (so this article is designed for beginners, the old birds do not spray, the great God omitted here 10,000 words). As for what is jquery and what is Ajax, go Google yourself.

First, create a new ASP.net web empty application that is called Ajax, as shown in the following figure in the project directory.

where the. ashx file is a general handler, you don't need to know what it is for now, you'll know it later. Jquery-1.7.1.js can be downloaded here.

We first clarify the function we want to implement: WebForm1 page every second to the HANDLER1 process to send a request, Handler1 return data to WebForm1 page, WebForm1 page through Ajax technology to achieve local refresh effect.

First look at Handler1 's main code:

Copy Code code as follows:

public void ProcessRequest (HttpContext context)
{
Random rand = new Random ();
int num = rand. Next (1,10);
Context. Response.Write (num);
}

The main is to change the ProcessRequest this method into the above appearance, produce a 1~9 random integer returned to the request page.

Let's look at the main code for WebForm1.aspx:

Copy Code code 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're going to use jquery, we need to refer to the Jqury-1.7.1.js file we just downloaded, and the following code should be able to read it? If this also does not understand, that must first to fill the base of JS.

Add such a code to the page:

Copy Code code as follows:

<p id= "Datashow" ></p>

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

Finished! So much! If normal, you can see in the browser a random change from 1 to 9 of the number, note that this is not the entire page refresh! If not, you can give <p> label a margin, let it show up when the browser height of the scroll bar, if the data changes when the scroll bar does not return to the top description is local refresh.

As for the more advanced function, it is necessary for the reader to look up the data research, this is just a simple introductory article.