asp.net ajax 类,asp.net ajax 简单实例

asp.net ajax 类,asp.net ajax 简单实例实例需求:利用Ajax技术实现一个页面不刷新的,并且验证一个用户名是否被注册过的过程。要求:在页面中添加一个文本框标签用于输入用户名,添加一个按钮用于提交用户数据。验证的结果被直接打印在页面上。操作步骤如下:1)打开VisualStudio(笔者使用的是VisualStudio2008Beta2,因为VS2008在页面的布局方面更好控制),建立一个网站,如图2-5所示。图2-5新建立一个网站...

实例需求:

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

要求:

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

操作步骤如下:

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

357c84f9ee244f5d2238998d3a4b993a.png

图2-5新建立一个网站

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

0c4da408f60b74a8e9d5a6345a6a423b.png

图2-6 VS2008的编辑窗口

2)在VS2008工具箱的HTML栏中添加一个

3da4754fb0ff704f5e64eed67b7858ed.png控件及

ae87a51ded899731e80993d985f42187.png控件。如图2-7所示。

af4de98618126b77b9264a2ee3664640.png

图2-7 添加表单控件

3) 在

中加入标签,以便进行Ajax引擎的编写,并在基本定义一个XMLHttpRequest对象,但是并不进行初始化操作。如图2-8所示。

4e0dcc550e993be95ea60a5b2db58cfe.png

图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所示。

cff00a6e56ac7dc5422ed564dbd16934.png

图2-9 添加代码

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

function OnMessageBack()

{

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

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

{

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

document .write (xmlhttp .responsetext);

}

}

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

8ab00fe39c801d2d556b5e9ee57425ba.png

图2-10添加代码

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

="Validation()" value="button" />

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

1cfe208cad4fe2e77106499e92b68217.png

图2-11 后台C#代码

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

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

b50d525ed325c7cad9084110df789d41.png

图2-12 测试一

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

da041d320b990dd21bb63e5cc6d42bd2.png

图2-13 测试二

架构君码字不易,如需转载,请注明出处:https://javajgs.com/archives/210058
0
   

发表评论