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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

功能描述,在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
    
Inherits System.Web.UI.Page

    
Protected Sub Page_Load(ByVal sender As ObjectByVal e As System.EventArgs) Handles Me.Load
        
Dim a = 0
        
Dim b = 0
        
If (Request.QueryString("A"<> NothingThen
            a 
= Val(Request.QueryString("A"))
        
End If
        
If (Request.QueryString("B"<> NothingThen
            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
    
Inherits System.Web.UI.Page

    
Protected Sub TextBox1_TextChanged(ByVal sender As ObjectByVal 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 ObjectByVal 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了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值