One of the Ajax intro articles

[Learning goals]

F use Asp.netajax core components for no refresh and local update effects

F Mastering the use of the AutoComplete control and using it to implement auto-complete functions

" Introduction to this chapter "

Ajax is based on browser technologies that are already widely used, including asynchronous JavaScript and XML. The concept of Ajax became popular soon after, as it made the functionality of Web applications and the user interface (UI) much closer to desktop applications.

The main idea of Ajax is to enable a Web page to send HTTP requests in the background (or asynchronously) without having to re-read the entire page (in the case of ASP. No round trip or postback is required). Ajax allows the use of JavaScript, Dom (Document Object model), CSS (cascading style sheets), and so on.

1.1Ajax Overview

1.1.1 Ajax Typical applications

In the process of promoting the development of Ajax technology, Google has played a very big role, many of its online applications are heavily using AJAX technology, such as: Google Suggest, Google Maps and so on. Let me take a look at two specific examples.

1.Google Suggest (Search suggestions)

With the search suggestions, we only need to enter the first few words of the keyword or pinyin, you can put the relevant hot keywords are displayed. The rest of the keywords section can be selected to complete. For example, enter "Ajax" four letters, search suggestions will immediately give "Ajax technology, basic AJAX Tutorial" and other options. This non-refreshing way, and our traditional way of browsing, input, submission, refresh is completely different.

2.Google Maps (MAP)

Similarly, Google Maps offers a very handy way to zoom in and out of the map, as shown in 1-2, and its no-refresh data update dramatically improves the user experience. It is important to note that every time we drag or zoom the data updates are taken from the remote server. This effect is inconceivable for traditional Web applications.

1.1.2 Ajax-related Basics

To create Ajax pages with client-side programming, you need to understand the JavaScript, DOM, and XMLHttpRequest objects (which handle requests sent from the client to the server). This book uses the ASP. NET AJAX framework, which can be properly simplified in the. NET environment for AJAX programming. The purpose of ASP. NET AJAX is to avoid writing redundant code and combining the experience of the client developer with the experience of asp.net2.0 (3.5) developers, and bring the benefits of OOP to JavaScript.

While Asp.netajax provides a lot of benefits for developers who need to create client-side scripts for AJAX applications, it's not just writing JavaScript to make asynchronous calls to the server. Because ASP. NET AJAX was created by the ASP. NET. asp, the salient feature is that it is integrated with the net 2.

Like the ASP. NET itself, you don't need to master Ajax technology to get some AJAX functionality, because the design of ASP. NET AJAX is designed to help you do the job. Like ASP. Net. NET AJAX can also manage the functionality of Ajax, such as postback, state management, and client-side scripting needed to make ASP.

1.1.3 Asp.netajax's Bag

Many different packages are available on the ASP. NET AJAX Home page (Http://ajax.asp.net), and their focus is different.

N ASP. NET AJAX extension (ASP. NET AJAX Extensions)

Also known as "ASP. NET AJAX Core", this is the most important of all the packages of ASP. It is fully maintained by Microsoft and includes the infrastructure of ASP.

N ASP. NET AJAX Control set (ASP. Toolkit)

This package contains a large number of server components that allow you to get amazing AJAX functionality effortlessly. To ensure quality, Microsoft controls the entire project, but the control set is open source.

n ASP. Ajaxfutures

In this package, we can peek at some of the features that may or may not be ^.^ as part of the ASP. NET and Asp.netajax.

N Microsoft Ajax Library

This is a pure JavaScript library.

Microsoft provides all the source code of ASP. NET AJAX, which can be downloaded from http://ajax.asp.net/.

1.2 Installing ASP. NET AJAX and Control packages

One. Asp.netajax is integrated into the IDE after installation and VS2008 can be used directly. On the ASP. NET AJAX Home page (http://ajax.asp.net), you can find Microsoft ASP. 2.0 Ajax Extensions1.0 installation program, it is a installation package named Aspajaxextsetup.msi, click Download Installation.

Two. When the installation is complete, a new option for creating an ASP. NET AJAX Web site is displayed in Visual studio. This is the best way to start learning ASP. NET AJAX technology, because it puts all the required files in the appropriate directory. 1-3 is shown below:

1.3 The composition principle of ASP.

Ajax is actually a collection of four technologies such as JavaScript, CSS, DOM, and XMLHttpRequest, where XMLHttpRequest is the core object of Ajax technology, which can be said to be implemented asynchronously Get server data; Dom is the Document object model, and with DOM, we can conveniently locate any part of a html/xml document and perform related operations.

The basic principle of Ajax is that xmlhttprequst fetches data from the server (data server or Web server) into the client's memory, then JavaScript processes the resources according to actual needs and renders the interface layout to the browser via CSS and DOM, as shown in:

The life cycle of the 1.4 ASP. NET AJAX Page Figure 1-7 illustrates the basic structure of ASP. Web pages that use AJAX can continuously exchange data with the server, while standard Web pages require two steps (one for the request and the other for the response) to do the work. ASP. NET AJAX is helpful for both sides of the communication. Client-side scripting libraries (such as those that are dynamically read by the ScriptManager control, you'll soon see what's relevant) not only help the browser communicate with the Web server, but also make the client programming easier. The ASP. NET AJAX server-side assemblies not only receive and process XMLHttpRequest calls, but also implement some server-side controls that are easy to use. Therefore, programmers do not have to spend a lot of effort to let the client and the server side to exchange data.

The first time you request a page that uses ASP. NET AJAX (Figure 1-7, step and step Two), the ASP. NET AJAX client Framework (the bottom layer in the client component of Figure 1-7) is sent from the server to the browser. Subsequent requests to the server from the same page of the AJAX application can be made into HTTP requests that return text or XML (the third and fourth steps in Figure 1-7). An ASP. NET page can accomplish different tasks using either a full page postback or an asynchronous request.

Project One: Create a simple ASP. NET page without Ajax first create a simple page that does not use AJAX functionality, which requires only a label control and a server-side button control. The page is shown in Figure 1-8:

The current computer date and time is displayed when you click the button on the button page

The code for the button is as follows:

This. Label1.text=datetime.now.tostring ();

Before clicking the button, the code for the page is shown in Listing 1-1.

Program Listing 1-1 does not use the output of an AJAX page

<! DOCTYPE HTML PUBLIC "-//w3c//dtdxhtml 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Do not use ajax~ first ~

</title>

<body>

<form name= "Form1" method= "post" action= "default.aspx" Id= "Form1" >

<div>

<input type= "hidden" name= "__viewstate" id= "__viewstate" value= "/wepdwuklte2mjy5mty1nwrkkfm6oimzfbs+ 3tpo9gbopfjt6ku= "/>

</div>

<div>

<inputtype= "hidden" name= "__eventvalidation" id= "__eventvalidation" value= "/ wewagke3zimdqkm54rgblokglcfwq87mkrenlsqigo+fmv/"/>

</div>

<div>

<span id= "Label1" style= "DISPLAY:INLINE-BLOCK;WIDTH:234PX;" >Label</span><br/>

<input type= "Submit" Name= "Button1" value= "Do not use Ajax, get date and Time" id= "Button1"/></div>

</form>

</body>

This code has nothing to explain, it has a few viewstate and a normal form that is routed back to the DEFAULT.APSX page. When the end user clicks a button on the page, the complete process of server callbacks is performed, the entire page is re-processed, and the browser is returned to the customer.

Project two: Build a simple ASP. NET page without Ajax

1. On the basis of project one, two server controls need to be added: One is the Label control Label2, and one is the button control Button2. In addition to this, two ASP. NET AJAX controls need to be added.

From the Ajax Extensio tab of the Toolbox of Visual Studio 2005, add a ScriptManager server control to the top of the page, and add a UpdatePanel control Contains a second label control and a button control in UpdatePanel.

The UpdatePanel control is a template server control that allows any number of items to be included (as with other ASP. NET template server controls).

Build Good page 1-9 as shown:

The Click event Code for button two is:

Label2.text=datetime.now.tostring ();

1. After running the program, look at the source of the page, you will see the <asp:ScriptManager> elements will be replaced by the following code (those URLs may be different in the system).

<scriptsrc= "/1-2/webresource.axd?d=foo_tiuylzr0mqe-ihoh8w2&amp;t=633869615980000000" type= "text/ JavaScript "></script>

<scriptsrc= "/1-2/scriptresource.axd?d=ysmd6e17na_vgxcdnuyy9k0gwqte7rxhxn4gtgsevxcamqjc6auqi_ z6wyjq4dhukf3hi8qkjbsfpslmbjanhm43_gvfmx58f9j5k7cyojg1&amp;t=634051109080000000 "type=" Text/javascript "> </script>

<script src= "/1-2/scriptresource.axd?d=ysmd6e17na_vgxcdnuyy9k0gwqte7rxhxn4gtgsevxcamqjc6auqi_ z6wyjq4dhukf3hi8qkjbsfpslmbjanhkmnenf_n2zx19hbq55x-owmm6w9r4fna9gax_lkmjkf0&amp;t=634051109080000000 "type= "Text/javascript" ></script>

ASP. NET AJAX generates some JavaScript code to initialize some parts of the AJAX framework.

The ScriptManager control must be placed on any page where you want to use ASP.

2. Running effect: If you click Button1, the entire page will be sent, you will get the code in the response, the back button will be green, if you click Button2, the page will be partially refreshed, the back button will not refresh, still gray.

@ Summary of this chapter

1. This chapter describes the ASP. NET AJAX, which explains its relationship to Ajax and ASP. NET 2.0.

2. Guide How to install the relevant AJAX software and add a class library set.

3. Wrote a Web application using Ajax and learned two key server controls ScriptManager controls and UpdatePanel controls.

One of the Ajax intro articles