普通ajax与使用微软ajax1.0控件对比

功能描述，在2个textbox中输入数值，相加后在textbox3内显示：

1，通用ajax方法： atlastest.aspx内容

<% ... @ Page Language="VB" AutoEventWireup="false" CodeFile="atlastest.aspx.vb" Inherits="atlastest"  %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title > 无标题页 </ title >
    
     < script  language ="javascript" > ...
    var xmlHttp;
    
    function creatXMLHttpRequest() ...{
         if(window.ActiveXObject) ...{
             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
             }
             else if (window.XMLHttpRequest) ...{
             xmlHttp=new XMLHttpRequest();
             }
             }
    function updateTotal() ...{
    frm =document.forms[0];
    url="atlastest2.aspx?A=" + frm.elements['A'].value + "&B=" + frm.elements['B'].value;
    xmlHttp.open("GET",url,true);
    xmlHttp.onreadystatechange=doUpdate;
    xmlHttp.send();
    return false;
    }
    
    function doUpdate() ...{
         if(xmlHttp.readyState==4) ...{
            document.forms[0].elements['TOT'].value=xmlHttp.responseText;
            }
            }       
             
     </ script >
</ head >
< body  onload ="creatXMLHttpRequest();" >
     < form >
     < div >
     < input  type ="text"  id ="A"  value ="0"  onkeyup ="updateTotal();"   /> +
     < input  type ="text"  id ="B"  value ="0"  onkeyup ="updateTotal();"   />
        = total
     < input  type ="text"  id ="TOT"  value ="0"   />
       
     </ div >
     </ form >
</ body >
</ html >

  

后台处理页面

atlastest2.aspx内容为空

atlastest2.aspx.vb内容 

Partial   Class atlastest2 Class atlastest2
    Inherits System.Web.UI.Page

    Protected Sub Page_Load()Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim a = 0
        Dim b = 0
        If (Request.QueryString("A") <> Nothing) Then
            a = Val(Request.QueryString("A"))
        End If
        If (Request.QueryString("B") <> Nothing) Then
            b = Val(Request.QueryString("B"))
        End If
        Response.Write(a + b)

    End Sub
End Class

________________________________________________________________________________

2,使用微软ajax1.0方式

testboxajax.aspx

<% ... @ Page Language="VB" AutoEventWireup="false" CodeFile="textboxajax.aspx.vb" Inherits="textboxajax"  %>
<% ... @ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp"  %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title > 无标题页 </ title >
</ head >
< body >
     < form  id ="form1"  runat ="server" >
     < div >
         < asp:ScriptManager  ID ="ScriptManager1"  runat ="server"  EnablePartialRendering ="true" >
         </ asp:ScriptManager >
         < br  />
         < asp:TextBox  ID ="TextBox1"  runat ="server"  AutoPostBack ="true" ></ asp:TextBox > +
         < asp:TextBox  ID ="TextBox2"  runat ="server"  AutoPostBack ="true" ></ asp:TextBox >
        
         < asp:UpdatePanel  ID ="UpdatePanel1"  runat ="server" >
             < ContentTemplate >                 
                 < asp:TextBox  ID ="TextBox3"  runat ="server" ></ asp:TextBox >                 
             </ ContentTemplate >
            
             < Triggers >
             < asp:AsyncPostBackTrigger   ControlID ="textbox1"  EventName ="TextChanged" />
             < asp:AsyncPostBackTrigger   ControlID ="textbox2"  EventName ="TextChanged"   />             
             </ Triggers >
         </ asp:UpdatePanel >
         < br  />
         < asp:UpdateProgress  ID ="UpdateProgress1"  runat ="server" >
         < ProgressTemplate >
         < asp:label  ID ="label1"  runat ="server"  Text ="label" >
        Updataing ...
         </ asp:label >
         </ ProgressTemplate >
         </ asp:UpdateProgress >
         &nbsp; </ div >
     </ form >
</ body >
</ html >

 

testboxajax.aspx.vb

Partial   Class textboxajax Class textboxajax
    Inherits System.Web.UI.Page

    Protected Sub TextBox1_TextChanged()Sub TextBox1_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles TextBox1.TextChanged
        With TextBox3
            .Text = Val(TextBox1.Text) + Val(TextBox2.Text)
        End With
    End Sub

    Protected Sub TextBox2_TextChanged()Sub TextBox2_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles TextBox2.TextChanged
        With TextBox3
            .Text = Val(TextBox1.Text) + Val(TextBox2.Text)
        End With
    End Sub
End Class

 

 

方法一反应比较快，刚输入完，textbox3就立刻显示值,估计是onkeyup的缘故.

缺点，需要写大量javascript

方法二反应略慢，需要离开输入框才会得值

优点，不需要写javascipt 只需要拖几个控件写写触发就ok了