AJAX学习总结

最新推荐文章于 2024-07-18 10:15:56 发布

chuxue1342

最新推荐文章于 2024-07-18 10:15:56 发布

阅读量1.3k

点赞数

文章标签： ajax textbox server integer function asp

本文链接：https://blog.csdn.net/chuxue1342/article/details/1731346

版权

下面我主要从两个方面来讲述自己的学习过程:

1,通过发送如XMLhttprequest.open("GET","URL","TRUE")的方法

http://user.qzone.qq.com/113620916/blog/52

2,通过<ajax.ajaxmethod> _引用ajax方法

http://user.qzone.qq.com/113620916/blog/53

一:

AJAX简单应用(检测用户名)

评论/浏览(0/0)发表时间：2007年8月4日 10时27分

前台代码:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="reguser.aspx.vb" Inherits="reguser" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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" src="ajax/handler.ashx"></script>
</head>
<body>
    <form id="form1" method ="get" runat="server">
     <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>

    
    <table align ="center" style ="width:750px; cursor :default; background-image :url(images/back.gif);" >
        <tr>
            <th align ="left" background="images/BackgroundT.bmp">
                <asp:SiteMapPath ID="SiteMapPath1" runat="server">
                </asp:SiteMapPath>
            </th>
        </tr>
    <tr>
   <th background="images/BackgroundT.bmp">
    欢迎注册时运达论坛
   </th>
    </tr>
    <tr>
    <th align ="left" >

        用户名 :<input type ="text" id="username" name="username" onchange ="textchange();" runat ="server" /><asp:RequiredFieldValidator ID="userrf" ControlToValidate ="username" runat="server" ErrorMessage="*" Width="16px"></asp:RequiredFieldValidator>
        <label id="lb"></label> <br />
        用户密码:<asp:TextBox ID="password" TextMode ="password" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="passwordrf" ControlToValidate ="password" runat="server" ErrorMessage="*"></asp:RequiredFieldValidator>
        <br />
        重复密码:<asp:TextBox ID="repassword" TextMode ="password" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="repasswordrf" ControlToValidate ="repassword" runat="server" ErrorMessage="*"></asp:RequiredFieldValidator><asp:CompareValidator ID="CompareValidator1" ControlToValidate ="repassword" ControlToCompare ="password" runat="server" ErrorMessage="两次输入不一致,请重先输入"></asp:CompareValidator><br />
        Q Q 号码:<asp:TextBox ID="qq" runat="server"></asp:TextBox><br />
        邮箱号码:<asp:TextBox ID="Email" runat="server"></asp:TextBox><br />
        电话号码:<asp:TextBox ID="phone" runat="server"></asp:TextBox><br />
        <br />
        请选择头像:<asp:HiddenField ID="headhf" runat="server" /><br />
        <p style ="background-color :Azure ; vertical-align :baseline ;" >
        <asp:RadioButtonList ID="rb" RepeatColumns="4" runat ="server" ></asp:RadioButtonList>
        </p>
        <asp:Button ID="regbt" runat="server" OnClick ="regbt_click" Text="提交" BackColor="#C0C0FF" BorderStyle="Groove" />
        <asp:Button ID="reset" OnClick ="reset_click" runat="server" Text="重置" BackColor="#C0C0FF" BorderStyle="Groove" />

    </th>
    </tr>
    </table>

    </form>
</body>
</html>
JS代码:
<script type="text/javascript">
        var xmlHttp;
        function createXMLHttpRequest()
        {
            if(window.ActiveXObject)
            {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if(window.XMLHttpRequest)
            {
                xmlHttp = new XMLHttpRequest();
            }
        }
        function textchange()
        {
            createXMLHttpRequest();
            var url= "Handler.ashx?username="+escape(document.getElementById("username").value);
            xmlHttp.open("GET",url,true);
            xmlHttp.;
            xmlHttp.send(null);
        }
        function showResult()
        {
            if(xmlHttp.readyState==4)
            {
                if(xmlHttp.status==200)
                {
                    var content=xmlHttp.responsetext;
                    document.getElementById ("lb").innerHTML=content;
                    if( content.indexOf("对不起")!=-1 )
                    {
                    document.getElementById ("username").value="";
                    }
                }
            }
        }
    </script>
handler.ashx代码:
<%@ WebHandler Language="VB" Class="Handler" %>
Imports System
Imports System.Web
Imports System.Data
Imports System.Xml
Imports Ajax
Imports System.WeakReference
Imports System.Web.HttpContext

Public Class Handler : Implements IHttpHandler

    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        context.Response.ContentType = "text/plain"

        Dim username = context.Request.QueryString("username")
        Try
            Dim doc As New XmlDocument
            doc.Load(context.Server.MapPath("user.xml"))
            Dim xnl As XmlNodeList = doc.SelectNodes("//bbsuser/user/name")
            Dim xn As XmlNode
            Dim i As Integer = "0"
            For Each xn In xnl
                Dim xe As XmlElement = xn
                If xe.InnerText = username Then
                    i += 1
                Else
                    i += 0
                End If
            Next
            If i > 0 Then
               context.Response.Write("对不起! " & username & " 已经被注册,请重新选择用户名!")
            ElseIf i = 0 Then
               context.Response.Write("恭喜! " & username & " 没有被注册!")
            End If
        Catch ex As Exception
            context.Response.Write(ex)
        End Try

    End Sub

    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property
End Class

代码copy就可以了!对了.还忘记了一个xml文件:user.xml
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="user.xsl"?>
<bbsuser>
<user>
    <name>陈胜军</name>
    <password>chuxue</password>
    <groupid>2</groupid>
    <date>2007-07-02</date>
    <qq>113620916</qq>
    <email>chuxue1342@hotmail.com</email>
    <telephone>13450051690</telephone>
    <header>images/5.gif</header>
</user>
<user>
    <name>chuxue</name>
    <password>chuxue</password>
    <groupid>1</groupid>
    <date>2007-07-02</date>
    <qq>113620916</qq>
    <email>chuxue1342@hotmail.com</email>
    <telephone>13450051690</telephone>
    <header>images/6.gif</header>
</user>
<user>
    <name>guest</name>
    <password>guest</password>
    <groupid>1</groupid>
    <date>2007-7-17</date>
    <qq>113620916</qq>
    <email>
    </email>
    <telephone>
    </telephone>
    <header>images/12.gif</header>
</user>
<user>
    <name>admin</name>
    <password>admin</password>
    <groupid>1</groupid>
    <date>2007-7-17</date>
    <qq>530048772</qq>
    <email>chuxue1342@avl.com.cn</email>
    <telephone>13434023232</telephone>
    <header>images/13.gif</header>
</user>
</bbsuser>
最后
代码很简单.功能也简单.但有一点是要特别注意的.JS里面严格区分大小写.为这个我走了很多弯路,希望大家看了能够吸收我的教训,我用颜色特别标出的都要注意.比如indexOf这个函数,你要写成indexof就不行!呵呵!!

二:

Ajax方法返回值!

评论/浏览(0/0)发表时间：2007年8月8日 11时48分

      这篇文章主要讲的是.通过AJAX方法,用JS得到返回值.过程很简单.主要是想让大家知道这个原理.以后怎么样运用就看自己的了!!嘎嘎.一点经验分享了:
1,添加ajax引用.这个大家应该很清楚.找到ajax.dll文件引用
2,创建一个ajax.vb的类.代码如下:
Imports Microsoft.VisualBasic
Imports system.data
Imports system.data.sqlclient
Imports Ajax

Public Class ajaxmethod
    Inherits System.Web.UI.Page
#Region "returns"
    <Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)> _
     Public Function returnstr() As String
        Dim str As String = "Ajax返回成功!!!"
        Return str
    End Function
#End Region
#Region "total"
    <Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)> _
    Public Function total (ByVal a As Integer, ByVal b As Integer) As Integer
        Dim result As Integer = a + b
        Return result
    End Function
#End Region
End Class
我这里只有两个简单的方法,复杂的大家自己慢慢写吧!*_*
3,后台注册ajax方法,不然的话js中没有办法引用了!!
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyBase.Load
        Ajax.Utility.RegisterTypeForAjax(GetType(ajaxmethod))
    End Sub
4最后就是前台引用ajax方法了!!
控件很简单就是一个按钮一个label显示
<input type ="button" onclick ="returnbt();" value ="返回值" /> <label id="returns"></label>
JS代码如下:
         function returnbt()
        {
        document.all .returns.innerHTML=ajaxmethod.returnstr().value;    /这里我直接赋值
        var result=myclass1.total(1,2, call_result );                         //这里调用call_result这个方法赋值
        }


        function call_result(result)
        {
        if(result.error!=null)
        {
        document.all .returns.innerHTML+=result.error
        return;
        }
        document.all .returns.innerHTML+=result.value;
        }
如果没什么意思的话.应该显示正确了呀..呵呵:
       忘记提醒.一定要先安装ajax1.0.还要自己修改web.config中的配置.比较麻烦.我以前的文章里有讲到.我这里就不啰嗦了!!

chuxue1342

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
AJAX学习总结

下面我主要从两个方面来讲述自己的学习过程:1,通过发送如XMLhttprequest.open("GET","URL","TRUE")的方法http://user.qzone.qq.com/113620916/blog/522,通过 _引用ajax方法http://user.qzone.qq.com/113620916/blog/53一:
复制链接

扫一扫