黑马程序员技术交流社区

标题: 怎么实现ajax的页面无刷新技术？ [打印本页]

作者: 赵刘滨 时间: 2012-8-18 11:32
标题: 怎么实现ajax的页面无刷新技术？
请高手用代码详细说明下（谢谢）

作者: 许庭洲 时间: 2012-8-19 14:12
利用ajax技术实现一个页面不刷新的，并且验证一个用户名是否被注册过的过程。
1，打开Visual Studio 2010建立一个ASP.NET网站，网站名为WebSite1;
2，通过VS2010工具箱，在设计模式下，添加一个TextBox1控件及Button1控件。
3，在<Head></Head>中加入<script type ="text/javascript"></script>标签，以便进行ajax引擎的编写，并在基本定义一个 XMLHttpRequest对象，但是并不进行初始化操作。如下代码所示。
   var xmlhttp;
   function Validation()
   {
         xmlhttp =new ActiveXObject ("Microsoft.XMLHTTP"); //实例化XMLHttpRequest对象
         var name=document .getElementById ("Text1");    //找到名为“Text1”的文本框
         xmlhttp.open("Post","AjaxTest.aspx?name="+name.value); //利用Open方法向指定URL，查询字符串“name”将文本框中的数据传送到目标页面
         xmlhttp .onreadystatechange=OnMessageBack; //设置当服务器响应返回时用于处理响应的函数名
         xmlhttp .send(null);       //送发请求
}
4，添加OnMessageBack()函数的内容。代码如下：
   function OnMessageBack()
   {
         //判断请求状态及HTTP状态是否都能满足条件
         if (xmlhttp .readystate==4&&xmlhttp .status==200)
         {
               //将返回的文本打印到页面上
               document .write (xmlhttp .responsetext);
         }
   }
5，下面为Button1添加事件代码，将其标签修改为
   <input id="Button1" type="button" value="button"font-weight: bold; color: Blue;">Validation()" />
6，页面中的Ajax引擎已经编写完毕。在上代码中，大家可以看到该用户名是通过一个名为“name”的查询字符串进行传递的，该查询字符串传递到服务器后需要进行后台处理，
   因此，要对“AjaxTest.aspx.cs”中的Page_Load方法添加一些ADO.NET代码。这里的数据库使用的是 “MyDB”数据库。代码如下所示。
   protected void Page_Load(object sender, EventArgs e)
{
         string name = Request.QueryString["name"];
         if (name != null)
         {
               SqlConnection con = new SqlConnection("");
               SqlCommand com = new SqlCommand();
               com.CommandText = "";
               com.Parameters.Add("@CustomerID",SqlDbType.NChar,5).Value =name;
               con.Open();
               int count = (int)com.ExecuteScalar();
               con.Close();
               if (count == 0)//当服务器利用 Response.Write()方法向客户端发出响应后，客户端的Ajax引擎就截获该响应流，并在我们事先定义的“OnMessageBack()” 方法中进行处理。
               {
                        Response.Write("<script>alert('该用户可以用!');</script>");
               }
               else
               {
                        Response.Write("<script>alert('该用户已经被占用，请使用其他用户名！');</script>");
               }
         }
   }

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2