13、Ajax的使用
一、AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
a）、AJAX = 异步 JavaScript 和 XML。
b）、AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。例如我们在用户注册的时候需要验证该注册名是否已经存在，这时候就可以使用Ajax实现与服务器的的通信来验证。
二、AJAX的使用：
1、创建 XMLHttpRequest 对象：所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象（详见W3School）
2、向服务器发送请求：与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用
3、处理返回数据
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <% 3 String path = request.getContextPath(); 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 5 %> 6 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 8 <html> 9 <head> 10 <script type="text/javascript"> 11 function ajax(){ 12 var url = "<%=request.getContextPath() %>/servlet/AjaxTest"; 13 var value = document.getElementById("userName").value; 14 var xmlHttp = new XMLHttpRequest(); 15 xmlHttp.onreadystatechange = function(){ 16 if(xmlHttp.readyState == 4){ 17 if("unsucceed"== xmlHttp.responseText){ 18 document.getElementById("userName").value=null; 19 document.getElementById("userName").placeholder="该用户已被占用，请重新输入"; 20 } 21 } 22 }; 23 xmlHttp.open("POST", url, true);// true:异步调用 false:同步调用 24 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");// 设置请求头信息 25 xmlHttp.send("userName="+value); 26 } 27 function submit_user(){ 28 if(document.getElementById("userName").value.length>1){ 29 if(document.getElementById("passWord").value.length > 5) 30 document.getElementById("user").submit(); 31 else{ 32 document.getElementById("passWord").value=null; 33 document.getElementById("passWord").placeholder="请重新输入密码"; 34 alert("请输入6位数以上密码"); 35 } 36 }else 37 alert("请先输入用户名"); 38 } 39 </script> 40 </head> 41 <body> 42 <form id="user" method="get" action="<%=request.getContextPath()%>/servlet/LoginTest"> 43 <table> 44 <tr> 45 <td>姓名<td/> 46 <td><input type="text" id="userName" name="userName" onblur="ajax()" placeholder="请输入姓名"><td/> 47 <tr/> 48 <tr> 49 <td>密码<td/> 50 <td><input type="password" id="passWord" name="passWord" placeholder="请输入密码"><td/> 51 <tr/> 52 <tr> 53 <td><td/> 54 <td><input type="button" onClick="submit_user()" value="注册"/><td/> 55 <tr/> 56 </table> 57 </form> 58 </body> 59 </html>
