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 {@Overrideprotected 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){//IExhr = 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 4xhr.status 200 404 500 ..局部刷新 异步提交
