AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX 是一种用于创建快速动态网页的技术。其核心是 JavaScript 对象 XMLHttpRequest。该对象在 Internet Explorer 5 中首次引入,它是一种支持异步请求的技术。简而言之,XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响应,而不阻塞用户。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。
试想如果在注册时,提交了注册信息,等了几秒后页面重载了,结果弹出一个提示框告诉你“用户名已被使用”,那将是很令人恼火的一件事。所以在这里,使用AJAX实现异步请求,即可在不重载页面的情况下实现与数据库的通讯。
简单AJAX封装后代码:
封装完成后,我们可以开始写登陆判断代码(我是用的是.net):
首先,创建一个html页login.htm以及ashx一般处理程序userhandle.ashx,请求的url中带上一个action参数,在一般处理程序中对请求进行处理。
服务器判断完后,将success或者fail发送到客户端。这样一个使用AJAX异步请求实现登陆就完成了。
至于注册是判断用户名,我就只粘贴上来:
试想如果在注册时,提交了注册信息,等了几秒后页面重载了,结果弹出一个提示框告诉你“用户名已被使用”,那将是很令人恼火的一件事。所以在这里,使用AJAX实现异步请求,即可在不重载页面的情况下实现与数据库的通讯。
创建XMLHTTPRequest对象
使用javascript在html页面中创建XMLHTTPRequest对象,实现AJAX异步请求:
-
<span style="font-size:14px;"> var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
-
xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5&j=10", true);
-
xmlhttp.onreadystatechange = function ()
-
{
-
if (xmlhttp.readyState == 4)
-
{
-
if (xmlhttp.status == 200)
-
{
-
alert(xmlhttp.responseText);
-
}
-
else
-
{
-
alert("AJAX服务器返回错误!");
-
}
-
}
-
}
-
xmlhttp.send();
-
-
-
</span>
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象,考虑兼容性
xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5&j=10", true); //“准备”向服务器的GetDate1.ashx发出Post请求(GET可能会有缓存问题)。这里还没有发出请求。
readyState == 4 表示服务器返回完成数据了。之前可能会经历2(请求已发送,正在处理中)、3(响应中已有部分数据可用了,但是服务器还没有完成响应的生成)
AJAX的封装
在实际项目开发中,会有多处用到AJAX异步请求,可是创建对象代码这么长,复制粘贴都嫌麻烦,而且还会影响代码的观赏性,所以需要将AJAX进行封装。将其封装成js功能文件,并在网页中导入即可进行引用。简单AJAX封装后代码:
-
<span style= "font-family:Times New Roman;font-size:14px;"> function ajax(url,onsuccess,onfail)
-
{
-
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject( 'Microsoft.XMLHTTP');
-
xmlhttp.open( "POST", url, true);
-
xmlhttp.onreadystatechange = function ()
-
{
-
if (xmlhttp.readyState == 4)
-
{
-
if (xmlhttp.status == 200)
-
{
-
onsuccess(xmlhttp.responseText); //成功时逻辑操作
-
}
-
else
-
{
-
onfail(xmlhttp.status); //失败是逻辑操作
-
}
-
}
-
}
-
xmlhttp.send(); //这时才开始发送请求
-
}< /span>
封装完成后,我们可以开始写登陆判断代码(我是用的是.net):
首先,创建一个html页login.htm以及ashx一般处理程序userhandle.ashx,请求的url中带上一个action参数,在一般处理程序中对请求进行处理。
-
function Submit1_onclick() {
-
var name = document.getElementById( "name").value;
-
var psw = document.getElementById( "psw").value;
-
if (psw != "" && name != "") {
-
//调用AJAX
-
ajax( "../userhandle.ashx?operate=login&userName=" + name + "&psw=" + psw, function (resText) {
-
if (resText == "fail") {
-
alert( "用户名或密码错误!");
-
return false;
-
}
-
else {
-
document.write(resText);
-
}
-
})
-
}
-
else {
-
alert( "请输入完整登陆信息!");
-
return false;
-
}
-
}
-
-
public void login(HttpContext context)
-
{
-
userBLL ub = new userBLL();
-
string userName = context.Request[ "userName"];
-
string userPsw = context.Request[ "psw"];
-
bool b = ub.Login(userName, userPsw); //封装好的bll层方法,判断用户名密码是否正确
-
if (b == true)
-
{
-
context.Session[ "Name"] = userName;
-
context.Session[ "role"] = "user";
-
context.Response.Write( "success");
-
}
-
else
-
{
-
context.Response.Write( "fail");
-
}
-
}
服务器判断完后,将success或者fail发送到客户端。这样一个使用AJAX异步请求实现登陆就完成了。
至于注册是判断用户名,我就只粘贴上来:
-
function check() {
-
var userName = document.getElementById( "Text1").value;
-
if (userName == "" || userName == null) {
-
document.getElementById( "nameMeg").style.color = "red";
-
document.getElementById( "nameMeg").innerHTML = "用户名为6-10位英文或数字";
-
}
-
else {
-
ajax( "../userhandle.ashx?operate=checkName&userName=" + userName, function (resText) {
-
if (resText == "forbid") {
-
document.getElementById( "nameMeg").style.color = "red";
-
document.getElementById( "nameMeg").innerHTML = "用户名含有非法词语";
-
} else if (resText == "already have") {
-
document.getElementById( "nameMeg").style.color = "red";
-
document.getElementById( "nameMeg").innerHTML = "用户名已被使用";
-
} else {
-
document.getElementById( "nameMeg").style.color = "green";
-
document.getElementById( "nameMeg").innerHTML = "可以使用";
-
}
-
})
-
}
-
}
-