网站建设 策划方案,贵州网站建设营销公司哪家好,天津企业模板建站,学校网站建设学生文明上网Ajax的简介
01展示效果并认识Ajax 方案1#xff1a;传统方案 提交表单#xff0c;服务器端处理#xff0c;错误后跳转到注册页面#xff0c;同时显示错误信息。返回客户端的是整个注册页面。 缺点#xff1a;较大的网络流量#xff0c;用户体验不好 方案2#xff1a;使…Ajax的简介
01展示效果并认识Ajax 方案1传统方案 提交表单服务器端处理错误后跳转到注册页面同时显示错误信息。返回客户端的是整个注册页面。 缺点较大的网络流量用户体验不好 方案2使用Ajax方案。 用户名的确认和用户书写其他表单项可以同时进行返回客户端的至少错误信息 优点较小的网络流量用户体验好
理解示意图 实现步骤
给用户名文本框绑定onblur事件 开发服务器端判断用户的是否可用功能 使用Ajax完成功能 创建XMLHttpRequest对象 建立到服务器的连接 设置服务器在完成后要运行的回调函数 发送请求
代码实现
save.jsp
% page contentTypetext/html;charsetUTF-8 languagejava %
html
headbase href%request.getContextPath()/%title注册页面/titlescript typetext/javascriptvar xhr;function checkNC() {var nc document.getElementById(nc).value;if(ncnull||nc){document.getElementById(nc_span).innerText用户名不能为空;}else {//发送ajax请求//[1]创建XMLHttpRequest对象xhrnew XMLHttpRequest();//[2]和服务器建立连接//xhr.open(method,url,acy,username,passward);xhr.open(get,RegisterServlet?ncnc,true);//[3]执行回调函数xhr.onreadystatechangeprocess;//[4]发送请求数据xhr.send(null);}}function process() {//接受ajax 的响应内容var text xhr.responseText;//把响应回的内容放到span中document.getElementById(nc_span).innerTexttext;}/script
/head
bodyh3用户注册/h3
formp昵称:input typetext namenc idnc onblurcheckNC()/span idnc_span/span/pp真是姓名:input typetext nameuname//pp密码:input typetext namepwd//pp描述:input typetext namedesc//ppinput typesubmit value注册//p/form
/body
/htmlRegisterServlet.java
WebServlet(/RegisterServlet)
public class RegisterServlet extends HttpServlet {Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {resp.setContentType(text/html;charsetutf-8);//[1]接受页面的数据String nc req.getParameter(nc);System.out.println(昵称:nc);//[2]数据的处理--返回结果boolean flagfalse;if(sxt.equals(nc)){flagtrue;}//[3]根据返回结果做出响应PrintWriter out resp.getWriter();if(flag){//证明用户名在数据库存在--用户不可使用out.print(用户名占用);}else{//证明用户名子啊数据库不存在--用户名可用out.print(用户名可用);}}
}ajax内容总结
A、如何创建XHR对象 if(window.ActiveXObject){//IExhr new ActiveXObject(Microsoft.XMLHTTP);}else {//其他浏览器xhrnew XMLHttpRequest();}B、和服务器建立连接 GETxhr.open(get,SaveServlet?unameval,true);xhr.send(null);POSTxhr.open(post,SaveServlet,true);xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded)xhr.send(unameval)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 ..局部刷新 异步提交
