Ajax的简介
01展示效果并认识Ajax
方案1:传统方案
提交表单,服务器端处理,错误后跳转到注册页面,同时显示错误信息。返回客户端的是整个注册页面。
缺点:较大的网络流量,用户体验不好
方案2:使用Ajax方案。
用户名的确认和用户书写其他表单项可以同时进行;返回客户端的至少错误信息;
优点:较小的网络流量,用户体验好
理解示意图
实现步骤
给用户名文本框绑定onblur事件
开发服务器端判断用户的是否可用功能
使用Ajax完成功能
创建XMLHttpRequest对象
建立到服务器的连接
设置服务器在完成后要运行的回调函数
发送请求
代码实现
save.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<base href="<%=request.getContextPath()+"/"%>">
<title>注册页面</title>
<script type="text/javascript">
var xhr;
function checkNC() {
var nc = document.getElementById("nc").value;
if(nc==null||nc==''){
document.getElementById("nc_span").innerText="用户名不能为空";
}else {
//发送ajax请求
//[1]创建XMLHttpRequest对象
xhr=new XMLHttpRequest();
//[2]和服务器建立连接
//xhr.open(method,url,acy,username,passward);
xhr.open("get","RegisterServlet?nc="+nc,true);
//[3]执行回调函数
xhr.onreadystatechange=process;
//[4]发送请求数据
xhr.send(null);
}
}
function process() {
//接受ajax 的响应内容
var text= xhr.responseText;
//把响应回的内容放到span中
document.getElementById("nc_span").innerText=text;
}
</script>
</head>
<body>
<h3>用户注册</h3>
<form>
<p>
昵称:<input type="text" name="nc" id="nc" onblur="checkNC()"/>
<span id="nc_span"></span>
</p>
<p>
真是姓名:<input type="text" name="uname"/>
</p>
<p>
密码:<input type="text" name="pwd"/>
</p>
<p>
描述:<input type="text" name="desc"/>
</p>
<p>
<input type="submit" value="注册"/>
</p>
</form>
</body>
</html>
RegisterServlet.java
@WebServlet("/RegisterServlet")
public class RegisterServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
//[1]接受页面的数据
String nc = req.getParameter("nc");
System.out.println("昵称:"+nc);
//[2]数据的处理-->返回结果
boolean flag=false;
if("sxt".equals(nc)){
flag=true;
}
//[3]根据返回结果做出响应
PrintWriter out = resp.getWriter();
if(flag){
//证明用户名在数据库存在-->用户不可使用
out.print("用户名占用");
}else{
//证明用户名子啊数据库不存在-->用户名可用
out.print("用户名可用");
}
}
}
ajax内容总结
A、如何创建XHR对象
if(window.ActiveXObject){//IE
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}else {//其他浏览器
xhr=new XMLHttpRequest();
}
B、和服务器建立连接
GET:
xhr.open("get","SaveServlet?uname="+val,true);
xhr.send(null);
POST:
xhr.open("post","SaveServlet",true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xhr.send("uname="+val)
C、后台如何接受数据
String uname = req.getParameter("uname");
D、后台如何给前台做出响应
out.print("用户名占用");
E、前台如何接受响应的数据?
var text= xhr.responseText;
F、
xhr.readyState 0 1 2 3 4
xhr.status 200 404 500 ..
局部刷新 异步提交