aspnet结合ajax开发实例

《aspnet结合ajax开发实例》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、作者：王宇为大家写了一个简单的ajax制作实例，纯手工编写AJAX引擎大家要是有什么问题，给我发Email：warensoft@foxmail.com  如果想了解更多关于DotNet方面的技术资料,文章以及视频，请到本团队的主页：www.warensoft.cn实例需求：利用Ajax技术实现一个页面不刷新的，并且验证一个用户名是否被注册过的过程。要求：在页面中添加一个文本框标签用于输入用户名，添加一个按钮用于提交用户数据。验证的结果被直接打印在页面上。操作步骤如下：1）打开VisualStudio（笔者使用的是VisualStu

2、dio2008Beta2，因为VS2008在页面的布局方面更好控制），建立一个网站，如图2-5所示。图2-5新建立一个网站项目建立好之后，大家会看到VS2008中基本上已经将ExpressWeb的功能集成，可以将HTML的设计视图和HTML的代码进行上下分开显示。如图2-6所示。图2-6VS2008的编辑窗口2）在VS2008工具箱的HTML栏中添加一个控件及控件。如图2-7所示。图2-7添加表单控件3)在中加入标签，以便进行A

3、jax引擎的编写，并在基本定义一个XMLHttpRequest对象，但是并不进行初始化操作。如图2-8所示。图2-8添加新标签3）定义两个函数Validation()及OnMessageBack(),前者用于初始化XMLHttpRequest对象，后者则在服务器的数据返回被调用。在Validation（）函数中加入如下Javascript代码：//实例化XMLHttpRequest对象       xmlhttp=newActiveXObject("Microsoft.XMLHTTP");       //找到名为“Text1”的

4、文本框       varname=document.getElementById("Text1");       //利用Open方法向指定URL       //查询字符串“name”将文本框中的数据传送到目标页面       xmlhttp.open("Post","default.aspx?name="+name.value);       //设置当服务器响应返回时用于处理响应的函数名       xmlhttp.onreadystatechange=OnMessageBack;       //送发请求       x

5、mlhttp.send(null);代码添加完毕后，Html页面内容如图2-9所示。图2-9添加代码4）添加OnMessageBack()函数的内容。代码如下：functionOnMessageBack()   {       //判断请求状态及HTTP状态是否都能满足条件       if(xmlhttp.readystate==4&&xmlhttp.status==200)       {           //将返回的文本打印到页面上           document.write(xmlhttp.responsetex

6、t);       }   }代码添加完毕后，Html页面内容如图2-9所示。图2-10添加代码5） 下面为Button1添加事件代码，将其标签修改为6）页面中的Ajax引擎已经编写完毕。在图2-10所示的第18行代码中，大家可以看到该用户名是通过一个名为“name”的查询字符串进行传递的，该查询字符串传递到服务器后需要进行后台处理，因此，要对“Default.aspx.cs”中的Page_L

7、oad方法添加一些ADO.NET代码。这里的数据库使用的是“Northwind”示例数据库。如图2-11所示。图2-11后台C#代码这里要注意，当服务器利用Response.Write()方法向客户端发出响应后，客户端的Ajax引擎就截获该响应流，并在我们事先定义的“OnMessageBack()”方法中进行处理。7）下面按F5进行调试。在文本框中输入“ALFKI”，点击按钮，页面中会显示“该用户名已经被占用，请使用其他用户名！”，如图2-12所示。图2-12测试一再在文本框中输入一个用户名“ABC”，会显示“该用户名可以使用”，

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