功能描述,在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 > </ 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了