异步登录
1、异步的概念
异步也成为AJAX，即Asynchronous JavaScript And XML,表示异步的JavaScript和XML。异步不是一种编程语言而是一种应用技术，实现异步功能的代码要写<Script>标签中。在学习异步之前需要对HTML
、CSS、JavaScript DOM的知识有一定了解。
2、DOM操作简介
DOM全称为“文档对象模型”，因为网页是由HTML的节点标签组成，为了能灵活操作页面上的元素标签，相关组织指定了DOM标准，该标准中提供了很多方法可以灵活操作页面上的元素标签，常用方法如下：
(1)、常用的DOM方法
getElementById(id)：获取带有指定id的节点元素。
appendChild(node):插入新的子节点元素。
removeChild(node):删除子节点元素。
getElementByTagName():获取带有标签名称的元素节点。
getElementByClassName():获取带有指定样式名的元素节点。
(2)、常用DOM属性
innerHTML:获取节点元素的文本值。
parentNode:获取节点元素的父节点。
childNodes：获取节点元素的子节点。
attributes:获取节点元素的属性节点。
3、异步Get/Post请求
在异步请求方式中也分为Get和Post请求，Get请求是将数据放在请求的Url中，而Post请求时将数据放到请求报文中，其中，使用异步方式发送get请求的具体代码：
xmlhttp.open("GET","demo_get.aspx",true);
xmlhttp.send();
send()表示请求开始发送
xmlhttp.open("POST","demo_post.aspx",true);
xmlhttp.send();
<script type="text/javascript">
window. {
var btnLogin = document.getElementById("btnLogin");
btnLogin.onclick = function() {
//发送异步请求
var xhr;
if (XMLHttpRequest) {
//创建异步对象
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//拿到用户名密码
var txtName = document.getElementById("txtName");
var txtPwd = document.getElementById("txtPwd");
//由于是get请求，所以要将数据拼接到url上
var strUrl = "ProcessLogin.ashx?name=" + txtName.value + "&pwd=" + txtPwd.value;
//提交到后台地址，是否异步
xhr.open("GET", strUrl, true);
xhr.send();
//上面发送了异步请求，然后监控页面状态
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
if (xhr.responseText == "OK") {
window.location.href = "main.aspx";
} else {
//如果错误就直接弹出错误警告
alert(xhr.responseText);
}
}
};
};
}
</script>
在上述代码中，"xhr = new XMLHttpRequest();"和"xhr = new ActiveXObject("Microsoft.XMLHTTP");" 主要用于兼容性的判断，有些IE浏览器的版本只支持ActiveXObject对象，并且只有IE才支持ActiveXObject对象。
一般处理程序
public class ProcessLogin : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//获取用户名密码
string txtName = context.Request["name"];
string txtPwd = context.Request["pwd"];
if (txtName == "bjxingch" && txtPwd == "123456")
{
context.Response.Write("OK");
}
else
{
context.Response.Write("用户名密码错误");
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
将异步方法封装在myAjax方法中
<script type="text/javascript">
window.onload = function() {
var btnLogin = document.getElementById("btnLogin");
btnLogin.onclick = function() {
//拿到用户名密码
var txtName = document.getElementById("txtName");
var txtPwd = document.getElementById("txtPwd");
//由于是get请求，所以要将数据拼接到url上
var strUrl = "ProcessLogin.ashx?name=" + txtName.value + "&pwd=" + txtPwd.value;
//调用封装的异步方法myAjax
myAjax("get", strUrl, function(data) {
if (data == "OK") {
window.location.href = "main.aspx";
} else {
//如果错误就直接弹出错误警告
alert(xhr.responseText);
}
});
};
};
//封装后的方法
function myAjax(httpMethod, url, callback) {
//发送异步请求
var xhr;
if (XMLHttpRequest) {
//创建异步对象
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//提交到后台地址，是否异步
xhr.open(httpMethod, url, true);
xhr.send();
//上面发送了异步请求，然后监控页面状态
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
if (xhr.responseText == "OK") {
callback(xhr.responseText);
}
}
};
}
</script>