Ajax in Asp.net

    Ajax是Asynchronous JavaScript and XML的缩写，是目前web开发领域中非常热门的一项技术，它的出现为web开发中客户端脚本和服务器语言之间搭起了一座桥梁。通俗的说，Ajax就是同过javascript在客户段调用服务端的方法。

    Ajax其实并不是什么新技术，他是几项技术的融合，他们按照一定的方式共同协作。这些技术包括   

1. 使用XHTML和CSS标准化呈现；
2. 使用DOM实现动态显示和交互；
3. 使用XML和XSLT进行数据交换和处理；
4. 使用XMLHttpRequest进行异步数据读取；
5. 最后使用JavaScript绑定和处理所有数据；

    AjaX的工作原理相当于在用户和服务器间添加了个中间层，使得用户操作和服务器相应异步化。并不是所有的用户请求都提交给服务器，比如像数据验证和数据处理等请求都交给Ajax引擎自己来做，只有确定需要从服务器读取新数据时，在由Ajax引擎代为向服务器提交请求。  

    Demo：一个简单的动态页面。两个数相加，使页面无刷新的求出和。

    首先下载一个Ajax.dll,是一个AJax框架。下载地址http://ajax.schwarz-interactive.de/ 

在web.config文件中添加如下设置：

< httpHandlers >
   < add  verb  = "POST,GET"  path  = "ajax/*.ashx"  type  = "Ajax.PageHandlerFactory,Ajax" />
   </ httpHandlers >

在.cs后台代码中添加如下代码

using  System;
using  System.Collections;
using  System.ComponentModel;
using  System.Data;
using  System.Drawing;
using  System.Web;
using  System.Web.SessionState;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.HtmlControls;
using  Ajax;

namespace  TestAjax
... {
    /**//// <summary>
    /// Summary description for WebForm1.
    /// </summary>
    public class WebForm1 : System.Web.UI.Page
    ...{
    
        private void Page_Load(object sender, System.EventArgs e)
        ...{
            Ajax.Utility.RegisterTypeForAjax(typeof(WebForm1));
        }

        [Ajax.AjaxMethod()]
        public int ServerSideAdd(int firstNumber,int secondNumber)
        ...{
            return firstNumber + secondNumber;
        }
                      }
}

HTML代码

 

<% ... @ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="TestAjax.WebForm1"  %>
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"  >
< HTML >
     < HEAD >
         < title > WebForm1 </ title >
         < meta  name ="GENERATOR"  Content ="Microsoft Visual Studio .NET 7.1" >
         < meta  name ="CODE_LANGUAGE"  Content ="C#" >
         < meta  name ="vs_defaultClientScript"  content ="JavaScript" >
         < meta  name ="vs_targetSchema"  content ="http://schemas.microsoft.com/intellisense/ie5" >
         < script > ...
        function ClientAdd()
        ...{
          var first = document.all("first");
          var second = document.all("second");
          var result = document.all("result");
          result.value = WebForm1.ServerSideAdd(first.value,second.value).value;
        }
         </ script >
     </ HEAD >
     < body  MS_POSITIONING ="GridLayout" >
         < form  id ="Form1"  method ="post"  runat ="server" >
             < input  id ="first"  type ="text"  size ="5" > + < input  id ="second"  type ="text"  size ="5" > = < input  id ="result"  type ="text"  size ="5" > &nbsp;
             < input  id ="calc"  type ="button"  value ="计算"  onclick ="ClientAdd()" >
         </ form >
     </ body >
</ HTML >