不用jquery等框架实现ajax无刷新登录
1 <script type="text/javascript"> 2 window.onload = function () { 3 4 document.getElementById("btn").onclick = function () { 5 6 var username = document.getElementById("uname").value; 7 var password = document.getElementById("pwd").value; 8 var xmh = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); 9 xmh.open("post", "/Handler1.ashx?username=" + username + "&password=" + password, true); 10 xmh.onreadystatechange = function () { 11 if (xmh.readyState == 4) { 12 if (xmh.status == 200) { 13 //var x=eval('('+xmh.responseText+')');//把json字符串转换为json对象 14 //上下两种方法都行 15 var x = JSON.parse(xmh.responseText);//把json字符串转换为json对象 16 alert(x.status); 17 } 18 else { 19 alert("出错"); 20 } 21 } 22 23 }; 24 xmh.send(); 25 } 26 }; 27 </script>
什么是 XMLHttpRequest 对象?
XMLHttpRequest 对象用于在后台与服务器交换数据。
XMLHttpRequest 对象是开发者的梦想,因为您能够:
- 在不重新加载页面的情况下更新网页
- 在页面已加载后从服务器请求数据
- 在页面已加载后从服务器接收数据
- 在后台向服务器发送数据
所有现代的浏览器都支持 XMLHttpRequest 对象。
在回调函数中处理服务器的响应
onreadystatechange就是回调函数(处理服务器的响应,根据状态码)
- 0:请求未初始化(还没有调用
open()
)。 - 1:请求已经建立,但是还没有发送(还没有调用
send()
)。 - 2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。
- 3:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。
- 4:响应已完成;您可以获取并使用服务器的响应了。
status这类状态代码表明服务器成功地接受了客户端请求(如果readystatus为4,这只是服务器端完成了响应,但是是否是正确的响应就不知道了)
200 - OK 一切正常,对GET和POST请求的应答文档跟在后面。