Original article:
Http://www.microsoft.com/china/msdn/library/webservices/asp.net/us0501ASPNETPerformance.mspx? Mfr = true
Applicable:
AJAX (Asynchronous JavaScript and XML)
Microsoft AJAX. NET
Microsoft ASP. NET
Abstract:Learn how to use AJAX (Asynchronous JavaScript and XML) in your Microsoft ASP. NET application to make it more interactive and responsive.
Download the code example AjaxASPNETCS. msi (in C)
Download the sample code AjaxASPNETVB. msi (in Visual Basic)
Content on this page
|
Introduction |
|
What Is AJAX? |
|
AJAX for ASP. NET |
|
AJAX at hand |
|
AJAX and you |
|
Conclusion |
Introduction
Since the beginning of Web programming, there have been many trade-offs between Web applications and desktop applications. For example, the user interface types provided by Web applications are generally not as rich as those provided by desktop applications. On the other hand, Web applications are independent platforms with simple development mechanisms. Providing more responsive applications seems to be a simple task, but it is always a field for Web developers.
Traditionally, you can only submit new requests to the Web server to retrieve the responses to user input. In some cases, developers can use JavaScript to load all responses on the client to provide a better user experience. A common example of this technology is to dynamically load a series of states or provinces based on the selected country/region. Unfortunately, in many cases, it is better not to return or load all responses to JavaScript. The return operation may cause too many UIS to be disconnected or excessive data is required on the client, which often leads to the generation of JavaScript that is not easy to read. AJAX provides a new intermediate choice that allows you to utilize server-based applications while maintaining timely response and flexibility.
Back to Top
What Is AJAX?
AJAX is short for Asynchronous JavaScript And XML (Asynchronous JavaScript And XML). It is not a technology, but a collection of many technologies. AJAX uses communication technology (usually SOAP and XML) to send and receive asynchronous requests/responses to the server, and then uses the Display Technology (JavaScript, DOM, HTML, and CSS) to process responses. Today, AJAX applications are legal because most browsers support this required technology. For more detailed AJAX definitions, visitAJAX Wikipedia entry(English ).
What Is AJAX? AJAX allows you to use JavaScript to call and execute server-side methods without refreshing the browser. It is regarded as a small request/response that occurs in the user's background. If you still do not know what AJAX is, see two common examples on Google:Google Suggests(English) andGoogle Maps(English ). If you are not familiar with AJAX, the response from these two applications will make you a little excited.
Back to Top
AJAX for ASP. NET
Many factors have prompted AJAX to emerge. You may not want to spend a few hours or a few days learning about the internal principles of AJAX. Instead, you want to create an AJAX-enabled application now, to meet the existing needs (if you really want to know how AJAX works internally, I am certainly not the one to ask ). There are many tools that developers can use to get started quickly. However, we will pay special attention to the free Ajax. NET open source code written by Michael Schwarz. Ajax. NET considers that all implementation details are based on. NET and can be extended. Microsoft ASP. NET 2.0Client callbackA unique asynchronous callback is introduced andRecently announcedAJAX code "Atlas" is being implemented.
The term may be a bit confusing, but when I introduced AJAX, I was introducing the overall framework for Asynchronously calling server-side functions from the client. When it comes to Ajax. NET, I mean the specific implementation that helps you create a solution that uses the AJAX framework.
For more information about ASP. NET 2.0 client callback, visitBertrand Le RoyBlog(English ).
Back to Top
AJAX at hand
The rest of this article will introduce three meaningful examples using Ajax. NET. This guide will contain code written in Microsoft C # and Microsoft Visual Basic. NET, sometimes both of which are provided at the same time, and sometimes only one of them. It is easy to implement all the code. C # developers can easily follow the code written only in Visual Basic. NET, and vice versa! The example C # and Visual Basic. NET projects in this article can be downloaded, and work code and run code are provided. Before learning examples, you must first understand how to install and use Ajax. NET.
Ajax. NET
AJAX. NETDocument(English) andWebsiteIt is very useful for developers to get started quickly. Before introducing specific examples of using this technology, we will briefly review the core steps you need to know.
FirstAJAX. NETProject WebsiteDownload and decompress the AJAX file, create an ASP. NET project in Visual Basic. NET or C # according to your preferences, and then open the AJAX. dll fileAdd reference(English ). The only additional configuration step is in<System. web>Element (located inWeb. configFile) Add the following code.
<configuration><system.web>
To make server-side functions available in JavaScript, two things must be done. First, the function to be used must be markedAjax. AjaxMethodAttribute. Second, during page loading events, you must call Ajax. Utility. RegisterTypeForAjaxTo register classes that contain these functions. It seems complicated, but don't worry. In fact, you only need to add two more lines in the code. Let's look at an example.
// C # public class Sample: System. web. UI. page {private void Page_Load (object sender, System. eventArgs e) {// register the Ajax class that we are interested in including server functions. utility. registerTypeForAjax (typeof (Sample);} [Ajax. ajaxMethod ()] public string GetMessageOfTheDay () {return "Experience is the mother of wisdom" ;}} 'vb. NETPublic Class SampleInherits System. web. UI. pagePrivate Sub Page_Load (sender AsObject, e As EventArgs) Handles MyBase. load 'register Ajax classes that we are interested in including server-side functions. utility. registerTypeForAjax (GetType (Sample) End Sub <Ajax. ajaxMethod ()> _ Public Function GetMessageOfTheDay () As StringReturn "Experience is the mother of wisdom" End FunctionEnd Class
The above example first tells Ajax. NET to find a friendly Ajax method in the Sample class. It is exactly the same class as the actual page, but it can be any. NET class, or multiple classes can be registered. Ajax. NET then browses the specified class to find the class markedAjaxMethodAttributeThe Sample class has oneGetMessageOfTheDay.
After that, the only thing you have to do is to use it in JavaScript. Ajax. NET automatically creates a JavaScript variable with the same name as the registered class (in this exampleSample), It providesAjaxMethodFunction with the same name (in this exampleGetMessageOfTheDay). As shown below.
<script language="javascript">Sample.GetMessageOfTheDay(GetMessageOfTheDay_CallBack);function GetMessageOfTheDay_CallBack(response){alert(response.value);}</script>
In addition to the JavaScript callback functionGetMessageOfTheDayYou also need to have the same parameters as the corresponding part of the server (in this case, there are no parameters) to execute and pass the response upon completion. Here, we can see the asynchronous feature of AJAX at work, becauseGetMessageOfTheDayDoes not hinder the execution of other JavaScript code, or prevent the user from continuing operations on the page. Ajax. NET calls the specified callback function when processing on the server.GetMessageOfTheDay_CallBackAnd pass a response composed of the return values of the server.
The ing between server-side code and JavaScript code may be messy. Figure 1 briefly shows the server-side code and JavaScript code, and the ing between them.
Figure1: Server code andJavaScriptCode ing
Of course, there are more interesting Ajax. NET content worth introducing, such as support for. NET types and rich callback responses (it is not just a value ). The following example will focus on some features and help you understand how AJAX helps you create a successful application.
Example1: Drop-down list of links
At the beginning of this article, we briefly discuss how to link twoDropDownList. When the selected index changes, return to the page; or load all possible data to the JavaScript array and display it dynamically. We hope you can see how AJAX can replace these two solutions.
First, let's take a look at our data interface and use the data interface driver example. Our data access layer provides two methods: the first method is to retrieve the list of countries/regions supported by the system, the second method gets the country ID and returns the list of States/provinces. Because this is pure data access, we only need to use this method.
//C#public static DataTable GetShippingCountries();public static DataView GetCountryStates(int countryId);'VB.NETPublic Shared Function GetShippingCountries() As DataTablePublic Shared Function GetCountryStates(ByVal countryId As Integer)As DataView
Now, let's go to the opposite side and create a simple Web form.
<asp:DropDownList ID="countries" Runat="server" /><asp:DropDownList ID="states" Runat="server" /><asp:Button ID="submit" Runat="server" Text="Submit" />
The Page_Load event is as simple as the preceding Web form. We use the data access layer to retrieve available countries/regions and bind themCountriesDropDownList.
//C#if (!Page.IsPostBack){countries.DataSource = DAL.GetShippingCountries();countries.DataTextField = "Country";countries.DataValueField = "Id";countries.DataBind();countries.Items.Insert(0, new ListItem("Please Select", "0"));}
Generally, the Code ends here. First, we will create the server-side function to be called from JavaScript.
'VB.NET<Ajax.AjaxMethod()> _Public Function GetStates (ByVal countryId As Integer) As DataViewReturn DAL.GetCountryStates(countryId)End Function