AJAX介绍
定义:“AsynchronousJavascriptAndXML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX 是一种用于创建快速动态网页的技术。其核心是 JavaScript 对象 XMLHttpRequest。该对象在 Internet Explorer 5 中首次引入,它是一种支持异步请求的技术。简而言之,XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响应,而不阻塞用户。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面。
试想如果在注册时,提交了注册信息,等了几秒后页面重载了,结果弹出一个提示框告诉你“用户名已被使用”,那将是很令人恼火的一件事。所以在这里,使用AJAX实现异步请求,即可在不重载页面的情况下实现与数据库的通讯。
AJAX封装
将其封装成js功能文件,并在网页中导入即可进行引用。
<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 != "") { //调用AJAXajax("../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 = "可以使用";}})}}