1.1、Ajax
1.Ajax
:异步的JavaScript and XML
2.目的:用来发送异步请求,然后当服务器给我想要的时候进行回调操作
3.好处:提高用户体验;局部刷新;
1.2、判断用户名是否已经注册
1.第一步:客户端发送异步请求;并绑定对结果处理的回调函数
(1)注册页面输入用户名
【regist.html】
<div class="form-item">
<div>
<label>用户名称:</label>
<input id="unameText" type="text" name="uname" placeholder="请输入用户名" onblur="checkUname(this.value)" />
</div>
<span id="unameSpan" class="errMess">用户名应为6~16位数字和字母组成</span>
</div>
当失去焦点时,调用
register.js
中的checkUname
方法
(2)定义checkUname
方法
- 创建
XMLHttpRequest
对象 XMLHttpRequest
对象操作步骤open(uri,"GET",true)
onreadyStateChange
:绑定状态改变时执行的回调函数send()
:发送请求
- 在回调函数中需要判断
XMLHttpRequest
对象的状态:readyState
(0-4)status
(200)
【register.js】
//如果响应发送异步请求,我们需要一个关键的对象 XMLHttpRequest
var xmlHttpRequest;
//完成XMLHttpRequest对象的初始化
function createXMLHttpRequest() {
if (window.XMLHttpRequest) {
//符合DOM2标准的浏览器 xmlHttpRequest的创建方式
xmlHttpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject){ //IE浏览器
try {
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
xmlHttpRequest = new ActiveXObject("Masxml2.XMLHTTP");
}
}
}
function checkUname(uname) {
createXMLHttpRequest();
var uri = "user.do?operation=checkUname&uname=" + uname;
xmlHttpRequest.open(uri,"GET",true);
//设置回调函数
xmlHttpRequest.onreadystatechange = checkUnameCB;
//发送请求
xmlHttpRequest.send();
}
function checkUnameCB() {
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
alert("hello world");
}
}
2.第二步:服务器端做校验,然后将检验结果响应给客户端
-
服务器端做校验
当用户名已经存在时,需要发送一个
json:{'uname':'1'}
,其中uname
为key
,1
为value
,表示用户名存在。当用户名不存在时,需要发送一个
json:{'uname':'0'}
,其中uname
为key
,0
为value
,表示当前用户名可以注册。【UserController.java】
public String checkUname(String uname) { User user = userService.getUser(uname); if (user != null) { //用户名已经存在,不可以注册 return "json:{'uname':'1'}"; //return "ajax:1"; } else { //用户名可以注册 return "json:{'uname':'0'}"; //return "ajax:0"; } }
-
将检验结果响应给客户端
需要修改中央控制器中的视图处理模块,来处理新的返回串。
【DispatcherServlet.java】
//3.视图处理 String methodReturnStr = (String) methodReturnObj; if (methodReturnStr.startsWith("redirect:")) {//比如 :redirect:fruit.do String redirectStr = methodReturnStr.substring("redirect:".length()); response.sendRedirect(redirectStr); } else if (methodReturnStr.startsWith("json:")) { String jsonStr = methodReturnStr.substring("json:".length()); PrintWriter out = response.getWriter(); out.print(jsonStr); out.flush(); } else { super.processTemplate(methodReturnStr,request,response); }
3.第三步:客户端收到服务端的响应信息,进行回调操作
【register.js】
function checkUnameCB() {
//4表示响应内容解析完成,可以在客户端调用
if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
//接受服务端发来的json字符串
//xmlHttpRequest.responseText 表示服务器端响应给我的文本内容
//alert(xmlHttpRequest.responseText);
var responseText = xmlHttpRequest.responseText;
//{'uname':'1'}
alert(responseText);
if (responseText == "{'uname':'1'}") {
alert("用户名已经存在!");
} else {
alert("用户名可以注册!");
}
}
}