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

最新推荐文章于 2025-11-29 10:19:21 发布

原创最新推荐文章于 2025-11-29 10:19:21 发布 · 569 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #微软 #textbox #asp #server #triggers

本文介绍两种实现文本框中数值相加的方法：一种通过自定义JavaScript进行异步请求，另一种利用微软Ajax 1.0实现部分页面更新。前者响应迅速但需编写较多JavaScript；后者简化开发流程但响应略慢。

功能描述，在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">

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>

<form>

<div>

<input type="text" id="A" value="0" onkeyup="updateTotal();" />+

= total

</div>

</form>

</body>

</html>

后台处理页面

atlastest2.aspx内容为空

atlastest2.aspx.vb内容

Partial Class atlastest2

Inherits System.Web.UI.Page

Protected 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">

</head>

<body>

<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">

<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>

</ContentTemplate>

<asp:AsyncPostBackTrigger ControlID="textbox1" EventName="TextChanged"/>

<asp:AsyncPostBackTrigger ControlID="textbox2" EventName="TextChanged" />

</Triggers>

</asp:UpdatePanel>

<br />

<asp:UpdateProgress ID="UpdateProgress1" runat="server">

<asp:label ID="label1" runat="server" Text="label">

Updataing ...

</asp:label>

</ProgressTemplate>

</asp:UpdateProgress>

 </div>

</form>

</body>

</html>

testboxajax.aspx.vb

Partial Class textboxajax

Inherits System.Web.UI.Page

Protected 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(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了