10th: integrate AJAX applications

2010.9.10 su Peng

Content

-Ajax class library Introduction

-ASP. Net MVC2 use Ajax class library instances

 

Prerequisites

-Install Visual Studio 2010 Express

-Understand ASP. Net

-Basic Ajax knowledge

-Understand the basic concepts of the Design Mode

 

Use ASP. Net MVC

-Microsoft ASP. Net Ajax

-JQuery

 

Use scope of Ajax

-Suitable for Ajax scenarios

For example, a large portal website has a weather query module, and a weather forecast is displayed. If you re-render the entire page with this weather button, it will undoubtedly consume a lot of resources. When the server receives the request, the server returns several numbers, including the highest temperature, the lowest temperature, and the enumerated weather conditions. Ajax can be used in this case.

It has several advantages:

1. reduce data transmission and improve user response

2. Reduce data transmission and server load

3. The operation is completely asynchronous. When you send a request, the request is sent using JavaScript on the backend. The user's browsing page is still unaffected.

 

-Not Suitable for Ajax scenarios

It has several disadvantages:

1. Because Ajax is an asynchronous request, it will save the current Http scenario and status. According to the survey, the most common button on the browser is the "back" button. If you want to see the weather in Beijing and see the weather in Nanjing, you cannot return to the initial selection status. You can only select a new city. The reason is that it has no status to save the rollback button.

2. If you do not support JavaScript scripts (for example, JavaScript scripts are disabled), Ajax cannot be used. However, in the MVC Architecture, even if JavaScript scripts are disabled, users can solve this problem, so that the effect is the same as that of disabled, but it does not take asynchronous requests, but smooth transition from the user perspective

3. Ajax abuse. Too much Ajax causes too much server load

 

Ajax instance

-A specific Action is specified for each Ajax request.

-Action: determines whether the request comes from Ajax.

-A special View must be returned for Ajax requests.

 

Script enabling problems

The AjaxForm is used to replace the common Form, and its request becomes an Ajax request. Of course, there are two JavaScript class libraries to be loaded. The reason for writing the two libraries at the bottom is exquisite. Writing at the beginning will load the first two class libraries on the page, while writing at the lowest end will load the class libraries at the end. Loading JavaScript and class libraries is a blocking mode. When I load a JavaScript file, my request is fixed and the second one can be loaded only after it is loaded. This kind of tips can ensure better web page performance.

Action Code

Routing finds the corresponding Action for the Ajax method based on the Action name.

Html Generation Code

Once JavaScript is disabled, none of these tasks can be done.

If the asynchronous method cannot be implemented, synchronous is used.

The problem is that the server returns the same results for both Ajax requests (both return strings). If we return different results for Ajax requests and non-Ajax requests, the problem is solved. For example, if your request is an Ajax request, local variables are returned. Otherwise, the entire View is returned. Therefore, in either case, there is no difference between waiting to refresh a local page or refreshing the entire page.

Ajax requests call the XMLHttpRequest object instead of common Http requests. So there is a message in the HttpHandle header.

This is an extension of a common Request. Common requests do not have such information. In the preceding figure, the XMLHttpRequest mark is written in both parts, because the firewall sometimes removes the x-requestes mark. Therefore, to ensure security, this tag is directly added at the end of each string in the request.

Modify the Code:

The above methods have basically solved the problem, but the method is not perfect. Because the X-Requested-With keyword (Magic Word) is written in our method, we should encapsulate Ajax request determination using a function.

Here, IsAjaxRequest is already provided by the MVC Architecture, so we can use this function to determine it without writing it by ourselves.

 

Use PartialView to return

PartialView only has one Html Tag. It is used here to put the result in Table format to the user end.

When it is an Ajax request, we use PartialView to return, and when it is not an Ajax request, we use View to return.

 

Introduction to Microsoft ASP. Net Ajax

The ASP. Net Ajax architecture is not a huge architecture, and its complete size is only 98 KB.

Design Concept of ASP. Net Ajax:. NET for JavaScript

The goal of jQuery is to simplify the syntax. The goal of ASP. Net Ajax is completely different. It is to apply it to the. NET Framework. Its implementation makes you look like it is the same as. NET Framework.

 

Update with JQuery

 

AutoComplete TextBox

-Implemented using the ASP. Net Ajax class library

The label System. Web. Script. Services. ScriptService indicates that this WebService can be called by a Script, that is, JavaScript can call it.

Frontend call:

$ Get ('query') in the $ create method parameter indicates which text box is automatically matched.

In WebForm, we do not see loading so many JavaScript files because it has a ScriptManager, which calls all the corresponding scripts. You can write a JavaScript code to put all the file calls in it, and then you only need to call that JavaScript code to make it easier.

 

Filter data from the drop-down list

-Implemented using JQuery

Define Action first

View

 

The load method is an Ajax request.

 

Use modal window

 

Rating Control

The principle is to modify the RadioButton style.

Add Ajax features to rating controls

 

Summary

-Ajax class library Introduction

-ASP. Net MVC2 use Ajax class library instances

2010.10.3