asp.net ajax 简单实例

最新推荐文章于 2021-08-06 11:50:03 发布

原创最新推荐文章于 2021-08-06 11:50:03 发布 · 5.5k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #asp.net #xmlhttprequest #validation #button #html

本文介绍了一个简单的Ajax实例，通过纯手工编写的方式实现了AJAX引擎。该实例能够在页面不刷新的情况下验证用户名是否已被注册。

作者：王宇

为大家写了一个简单的ajax制作实例，纯手工编写AJAX引擎

大家要是有什么问题，给我发Email：warensoft@foxmail.com

如果想了解更多关于DotNet方面的技术资料,文章以及视频，请到本团队的主页：www.warensoft.cn

实例需求：

利用Ajax技术实现一个页面不刷新的，并且验证一个用户名是否被注册过的过程。

要求：

在页面中添加一个文本框标签用于输入用户名，添加一个按钮用于提交用户数据。验证的结果被直接打印在页面上。

操作步骤如下：

1）打开Visual Studio（笔者使用的是Visual Studio2008 Beta2，因为VS2008在页面的布局方面更好控制），建立一个网站，如图2-5所示。

图2-5新建立一个网站

项目建立好之后，大家会看到VS2008中基本上已经将Express Web的功能集成，可以将HTML的设计视图和HTML的代码进行上下分开显示。如图2-6所示。

图2-6 VS2008的编辑窗口

2）在VS2008工具箱的HTML栏中添加一个控件及控件。如图2-7所示。

图2-7 添加表单控件

3) 在<Head></Head>中加入<script type ="text/javascript"></script>标签，以便进行 Ajax引擎的编写，并在基本定义一个XMLHttpRequest对象，但是并不进行初始化操作。如图2-8所示。

图 2-8 添加新标签

3）定义两个函数 Validation()及OnMessageBack(),前者用于初始化XMLHttpRequest对象，后者则在服务器的数据返回被调用。在Validation（）函数中加入如下Javascript代码：

// 实例化XMLHttpRequest对象

        xmlhttp =new ActiveXObject ("Microsoft.XMLHTTP");

        // 找到名为 “ Text1 ” 的文本框

        var name=document .getElementById ("Text1");

        // 利用Open方法向指定URL

        // 查询字符串 “ name ” 将文本框中的数据传送到目标页面

        xmlhttp .open("Post","default.aspx?name="+name.value);

        // 设置当服务器响应返回时用于处理响应的函数名

        xmlhttp .onreadystatechange=OnMessageBack;

        // 送发请求

        xmlhttp .send(null);

代码添加完毕后，Html页面内容如图2-9所示。

图2-9 添加代码

4）添加OnMessageBack()函数的内容。代码如下：

function OnMessageBack()

    {

        // 判断请求状态及HTTP状态是否都能满足条件

        if (xmlhttp .readystate==4&&xmlhttp .status==200)

        {

            // 将返回的文本打印到页面上

            document .write (xmlhttp .responsetext);

        }

    }

代码添加完毕后，Html页面内容如图2-9所示。

图2-10添加代码

5）下面为Button1添加事件代码，将其标签修改为

< input id="Button1" type="button" onclick ="Validation()" value="button" />

6）页面中的 Ajax引擎已经编写完毕。在图2-10所示的第18行代码中，大家可以看到该用户名是通过一个名为“name”的查询字符串进行传递的，该查询字符串传递到服务器后需要进行后台处理，因此，要对“Default.aspx.cs”中的Page_Load方法添加一些ADO.NET代码。这里的数据库使用的是“Northwind”示例数据库。如图2-11所示。

图 2-11 后台C#代码

这里要注意，当服务器利用 Response.Write()方法向客户端发出响应后，客户端的Ajax引擎就截获该响应流，并在我们事先定义的“OnMessageBack()”方法中进行处理。

7）下面按 F5进行调试。在文本框中输入“ALFKI”，点击按钮，页面中会显示“该用户名已经被占用，请使用其他用户名！”，如图2-12所示。

图 2-12 测试一

再在文本框中输入一个用户名“ ABC”，会显示“该用户名可以使用”，如图2-13所示。

图 2-13 测试二
但是，在第二次测试时，大家会奇怪的发现页面出现了两组相同的表单。这是因为我们目前还没有