用XMLHTTP來做一個異步請求數據裡實例
編輯：AJAX詳解
這個東西我想過很久，很早就想試試怎麼做的，但是依賴心理太強了，一直都是使用的網絡上流傳的Ajax.dll 或者AJaxPro.dll或者直接用微軟的Atlas到現在的AJax 1.0裡面的控件，感覺有的時候還好，能看到很多特殊的效果，但是在有些小的地方還是不那麼方便，看到別人的博客裡面寫的XMLHttp的Ajax例子他們好像寫的很高興，我也挺羨慕的，禁不住誘惑的我今天上午也寫了一個用戶注冊的時候可以用到的異步驗證（這個用Ajax.dll裡面的AJaxMethod也可以實現的哦）：
先要創建兩個頁面：沒有辦法，好像一定要創建兩個(Reg.aspx,RegCheck.aspx)頁面，在Reg.ASPx頁面中：
1
<Html XMLns="http://www.w3.org/1999/xHtml" >
2<head runat="server">
3 <title>Untitled Page</title>
4 <script>
5 var XMLhttp=false;
6 function GetXMLHttp()
7
{
8
try
9
{
10 XMLhttp=new ActiveXObject("Msxml 2.XMLHTTP3.0");
11
}
12 catch(e)
13 {
14 try
15 {
16 XMLhttp=new ActiveXObject("Microsoft.XMLHTTP");
17 }
18 catch(e)
19 {
20 XMLhttp=false;
21 }
22 }
23 return XMLhttp;
24
}
25 function uid(T)
26 {
27 var id=document.getElementById(T).value;
28 GetXMLHttp();
29 var url="RegCheck.ASPx?id="+id;
30 XMLhttp.onreadystatechange=callback;
31 XMLhttp.open("post",url,true);
32 XMLhttp.send();
33 }
34 //下面的XMLhttp.readyState有4種狀態
35 function callback()
36 {
37 if(XMLhttp.readystate==1)
38 {
39 alert("readyState");
40 }
41 else
42 if(XMLhttp.readyState==4)
43 {
44 alert(XMLhttp.responseText);
45
46 if(XMLhttp.responseText>0)
47 {
48 alert("您的用戶名被占用了")
49 XMLhttp=true;
50 }
51 else
52 {
53 XMLhttp=false;
54 }
55 }
56 XMLhttp.send(null);
57 }
58
59 </script>
60</head>
61<body>
62 <form id="Form1" method="post" runat="server">
63 <div style="text-align: center">
64 <table>
65 <tr>
66 <td style="width: 100px">
67 用戶名：</td>
68 <td style="width: 100px">
69 <ASP:TextBox ID="TextBox1" runat="server" Width="89px" onchange="uid('TextBox1')"></ASP:TextBox></td>
70 <td style="width: 100px">
71 </td>
72 </tr>
73 <tr>
74 <td style="width: 100px">
75 密碼：</td>
76 <td style="width: 100px">
77 <ASP:TextBox ID="TextBox2" runat="server" Width="89px"></ASP:TextBox></td>
78 <td style="width: 100px">
79 </td>
80 </tr>
81 </table>
82 </div>
83 </form>
84</body>
85</Html>
先要創建兩個頁面：沒有辦法，好像一定要創建兩個(Reg.aspx,RegCheck.aspx)頁面，在Reg.ASPx頁面中：
1
<Html XMLns="http://www.w3.org/1999/xHtml" >2
<head runat="server">3
<title>Untitled Page</title>4
<script>5
var XMLhttp=false;6
function GetXMLHttp()7
{8
try9
{10
XMLhttp=new ActiveXObject("Msxml 2.XMLHTTP3.0");11
}12
catch(e)13
{14
try15
{16
XMLhttp=new ActiveXObject("Microsoft.XMLHTTP");17
}18
catch(e)19
{20
XMLhttp=false;21
}22
}23
return XMLhttp;24
}25
function uid(T)26
{27
var id=document.getElementById(T).value;28
GetXMLHttp();29
var url="RegCheck.ASPx?id="+id;30
XMLhttp.onreadystatechange=callback;31
XMLhttp.open("post",url,true);32
XMLhttp.send();33
}34
//下面的XMLhttp.readyState有4種狀態35
function callback()36
{ 37
if(XMLhttp.readystate==1)38
{39
alert("readyState"); 40
}41
else42
if(XMLhttp.readyState==4)43
{44
alert(XMLhttp.responseText);45
46
if(XMLhttp.responseText>0)47
{48
alert("您的用戶名被占用了")49
XMLhttp=true;50
}51
else52
{53
XMLhttp=false;54
}55
}56
XMLhttp.send(null);57
}58
59
</script>60
</head>61
<body>62
<form id="Form1" method="post" runat="server">63
<div style="text-align: center">64
<table>65
<tr>66
<td style="width: 100px">67
用戶名：</td>68
<td style="width: 100px">69
<ASP:TextBox ID="TextBox1" runat="server" Width="89px" onchange="uid('TextBox1')"></ASP:TextBox></td>70
<td style="width: 100px">71
</td>72
</tr>73
<tr>74
<td style="width: 100px">75
密碼：</td>76
<td style="width: 100px">77
<ASP:TextBox ID="TextBox2" runat="server" Width="89px"></ASP:TextBox></td>78
<td style="width: 100px">79
</td>80
</tr> 81
</table>82
</div> 83
</form>84
</body>85
</Html>
小編推薦
熱門推薦