学习ajax基础心得体会（纯基础，大牛勿喷）

最新推荐文章于 2021-08-06 08:56:23 发布

weixin_34293059

最新推荐文章于 2021-08-06 08:56:23 发布

阅读量88

点赞数

文章标签： xhtml ui c#

原文链接：http://www.cnblogs.com/liu-nian-2014/p/3826905.html

版权

今天在实习公司做联系项目时，项目经理要求做一个注册页面用户名是否存在的无刷新的检测，这个肯定需要使用到AJAX技术，但是我确实一点AJAX基础都没有，稚嫩他硬着头皮先尝试着做。

先写注册页面的add2.asp。

  1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ADD2.aspx.cs" Inherits="YX.DEMO.Web.lmly_User.ADD2" %>
  2 
  3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4 
  5 <html xmlns="http://www.w3.org/1999/xhtml">
  6 <head runat="server">
  7 <script type="text/javascript" language="javascript">
  8 
  9 
 10     function showHint(str)
 11 {
 12 var xmlhttp;    
 13 if (str=="")
 14   {
 15   document.getElementById("txtHint").innerHTML="";
 16   return;
 17   }
 18 if (window.XMLHttpRequest)
 19   {// code for IE7+, Firefox, Chrome, Opera, Safari
 20   xmlhttp=new XMLHttpRequest();
 21   }
 22 else
 23   {// code for IE6, IE5
 24   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 25   }
 26 xmlhttp.onreadystatechange=function()
 27   {
 28   if (xmlhttp.readyState==4 && xmlhttp.status==200)
 29     {
 30     document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
 31     }
 32   }
 33 xmlhttp.open("GET", "user_select.aspx?w=" + str, true);
 34 xmlhttp.send();
 35 }
 36 
 37 
 38 function showHint2(str) {
 39     var xmlhttp;
 40     if (str == "") {
 41         document.getElementById("txtHint2").innerHTML = "";
 42         return;
 43     }
 44     if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
 45         xmlhttp = new XMLHttpRequest();
 46     }
 47     else {// code for IE6, IE5
 48         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 49     }
 50     xmlhttp.onreadystatechange = function () {
 51         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
 52             document.getElementById("txtHint2").innerHTML = xmlhttp.responseText;
 53         }
 54     }
 55     xmlhttp.open("GET", "ajax_email.aspx?q=" + str, true);
 56     xmlhttp.send();
 57 }
 58 
 59 function showHint3(str) {
 60     var xmlhttp;
 61     if (str == "") {
 62         document.getElementById("txtHint").innerHTML = "";
 63         return;
 64     }
 65     if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
 66         xmlhttp = new XMLHttpRequest();
 67     }
 68     else {// code for IE6, IE5
 69         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 70     }
 71     xmlhttp.onreadystatechange = function () {
 72         if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
 73             document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
 74         }
 75     }
 76     xmlhttp.open("GET", "ajax_email.aspx?e=" + str, true);
 77     xmlhttp.send();
 78 }
 79 
 80 
 81 </script>
 82 
 83     <title></title>
 84 </head>
 85 <body>
 86     <form id="form1" runat="server">
 87     <div>
 88     
 89         <asp:Label ID="Label1" runat="server" Text="请输入用户名"></asp:Label>
 90         <asp:TextBox ID="txtUser_name" runat="server" onBlur="showHint(txtUser_name.value);" ></asp:TextBox>
 91         <asp:Label ID="txtHint" runat="server" Visible="True"></asp:Label>
 92     
 93     </div>
 94     <asp:Label ID="Label3" runat="server" Text="请输入密码"></asp:Label>
 95     <asp:TextBox ID="txtUser_pwd" runat="server" TextMode="Password" ></asp:TextBox>
 96     <asp:Label ID="passwordvalidate" runat="server" Visible="False"></asp:Label>
 97     <br />
 98     <asp:Label ID="Label5" runat="server" Text="请输入邮箱"></asp:Label>
 99     <asp:TextBox ID="txtUser_email" runat="server" onBlur="showHint2(txtUser_email.value);" ></asp:TextBox>
100     <asp:Label ID="txtHint2" runat="server" Visible="True"></asp:Label>
101     <asp:Label ID="Label8" runat="server" Visible="True"></asp:Label>
102     <br />
103     <asp:Button ID="Button1" runat="server" οnclick="Button1_Click" Text="注册" />
104     <asp:Label ID="Msg" runat="server" Text="Msg"></asp:Label>
105     </form>
106 </body>
107 </html>

function showHint方法是用来将查询结果显示在文本框后面的label空间上的。

在新建了一个空的ASP user_select.aspx。

将里面的html代码全部删除，

整个页面就留下这么一句代码。

“

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="user_select.aspx.cs" Inherits="YX.DEMO.Web.lmly_User.user_select" %>

”

然后在页面的初始化事件中写入代码如下：

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.UI;
 6 using System.Web.UI.WebControls;
 7 using Maticsoft.DBUtility;
 8 using System.Data.SqlClient;
 9 using System.Data;
10 
11 namespace YX.DEMO.Web.lmly_User
12 {
13     public partial class user_select : System.Web.UI.Page
14     {
15         protected void Page_Load(object sender, EventArgs e)
16         {
17              string ass = Request["w"];
18             //string b="";
19             string result = "";
20             DataSet re = new DataSet();
21             string a="select * from lmly_User where User_name='"+ass+"'";
22 
23             if (DbHelperSQL.GetSingle(a) == null)
24             {
25                 result = "该用户未被注册";
26 
27             }
28             else {
29                 result = "该用户已被注册";
30             }
31             Response.Write(result);
32         }
33         }
34     }

当add2页面中的一个txtUser_name文本框中输入字符然后失去焦点后，触发showHint()方法，然后showHint()将txtUser_name中的内容提交给user_select.aspx页面，当user_select.aspx处理玩查询后将查询结果返回给add2页面，并显示在labe控件中。

邮箱重复性验证方法雷同。

而邮箱格式的真确性验证则是使用AJAX和正则表达式的方法来验证

1             if (Regex.IsMatch(ass,
2               @"^(?("")("".+?""@)|(([0-9a-zA-Z]((\.(?!\.))|[-!#\$%&'\*\+/=\?\^`\{\}\|~\w])*)(?<=[0-9a-zA-Z])@))" +
3               @"(?(\[)(\[(\d{1,3}\.){3}\d{1,3}\])|(([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,6}))$") == false) {
4                   Response.Write("错误");
5             
6             }

再次声明，本人是菜鸟，目前还是大三在实习。本人的博客只为自己日常工作学习过程中的一种收获总结，可能有些内容过于简单，大牛勿喷，谢谢，无版权，随意转发，不需备注。

转载于:https://www.cnblogs.com/liu-nian-2014/p/3826905.html

weixin_34293059

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习ajax基础心得体会（纯基础，大牛勿喷）

今天在实习公司做联系项目时，项目经理要求做一个注册页面用户名是否存在的无刷新的检测，这个肯定需要使用到AJAX技术，但是我确实一点AJAX基础都没有，稚嫩他硬着头皮先尝试着做。先写注册页面的add2.asp。 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ADD2.aspx.cs" Inherits...
复制链接

扫一扫