ajax（asynchronous javascript and xml）异步JavaScript和xml
一、概念
ajax是一种用来改善用户体验的技术
利用浏览器提供一个对象（XMLHttpRequest，也称：ajax对象）向服务器发送异步请求-->服务器返回部分请求-->浏览器利用这些数据对当前页面做部分更新
（注：异步请求--当ajax对象发送请求时，浏览器不会销毁当前页面，用户仍然可以对当前页面做其他操作）
二、ajax对象几个重要属性
1、onreadystatechange：绑订一个事件处理函数，该函数用来处理readystatechange事件
（注：当ajax对象的readystate属性值发生了改变，比如，从0变成了1，则会产生readystatechange事件）
2、readyState：有5个值(0,1,2,3,4)，表示ajax对象与服务器通信的进展（注：4 表示ajax对象已经获得了服务器返回的所有的数据）
3、responseText：获得服务器返回的文本数据
4、responseXML：获得服务器返回的xml数据
5、status：获得状态码（注：200 表示请求成功）
三、获取ajax对象（.js）
可以单独封装成一个js文件，再调用（ajax.js）
/* * 获取ajax对象 */ function getXhr(){ var xhr = null; if(window.XMLHttpRequest){ //非IE浏览器 xhr = new XMLHttpRequest(); }else{ //IE浏览器 xhr = new ActiveXObject('Microsoft.XMLHttp'); } return xhr; }调用js文件 <head> <script type="text/javascript" src="js/ajax.js"></script> </head>四、案例演示（Maven管理）需求：判断用户名是否已经注册过？（用户名后面立刻显示判断结果给用户）
简单编程步骤：
1、编写页面
2、编写ajax
3、编写服务端
4、web.xml中配置服务端
详细编程步骤：
1、编写页面
<!-- 页面显示代码 --> <body style="font-size:30px;"> <form action="regist.do" method="post"> 用户名:<input id="uname" name="uname" οnblur="check_uname();"/> <span id="check_uname_msg"></span><br/> 密 码:<input type="password" name="pwd"/><br/> <input type="submit" value="注册"/> </form> </body> </html> 2、编写ajax （详细内容讲解，都在jsp文件中编写）（1）获取ajax对象：获取XMLHttpRequest对象实例化
（如：使用封装ajax对象成js文件后，再使用var xhr = getXhr()调用实例化）
//获取ajax对象实例化 var xhr = getXhr();（2）设置回调函数：为ajax对象的onreadystatechange事件设定响应函数 // 2、设置回调函数 function fn(){ if(xhr.readyState == 4 && xhr.status == 200){ var txt = xhr.responseText; //DOM操作 } } （3）创建请求：调用XMLHttpRequest对象的open方法 /* 3、 创建请求(这里以get请求为例) （1）get请求写法：xhr.open('get','xxx.do',true); true ：表示发送异步请求（当ajax对象发送请求时，用户仍然可以对当前页面做其他操作） false：表示发送同步请求（当ajax对象发送请求时，浏览器会锁定当前页面，用户不能对当前页面做其他操作） （2）post请求写法： xhr.open('post','xxx.do',true)； xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); setRequestHeader的作用：因为HTTP协议要求发送post请求时候，必须有content-type消息头， 所以需要调用setRequestHeader方法，添加这个消息头 */ var uri = 'check_uname.do?uname=' + $F('uname'); xhr.open('get',encodeURI(uri),true); （4）发送请求：调用ajax对象的send方法 /*4、发送请求 get 请求写法：xhr.send(null); send方法内传递null若要提交数据，则在open方法的“URL”后面追加，如下： xhr.open('get','xxx.do?name=value&name=value',true) 上面第3创建请求里的open就是采用这种方法 post 请求写法：xhr.send(name=value&name=value...); */ xhr.send(null); ajax完整代码：（1）使用js封装的ajax对象：ajax.js文件（js）
/* * 获取ajax对象 */ function getXhr(){ var xhr = null; if(window.XMLHttpRequest){ //非ie xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject( 'Microsoft.XMLHttp'); } return xhr; } /* * 依据id查找对应的节点 */ function $(id){ return document.getElementById(id); } /* * 依据id查找节点，然后返回节点的值 */ function $F(id){ return $(id).value; } （2）regist.jsp文件 （使用<script type="text/javascript" src="js/ajax.js"></script>调用ajax.js） <%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <html> <head> <script type="text/javascript" src="js/ajax.js"></script> function check_uname(){ // 1、获得ajax对象 var xhr = getXhr(); // 2、设置回调函数 xhr.onreadystatechange = function(){ // （处理服务器返回的结果） if(xhr.readyState == 4 && xhr.status == 200){ // 只有当ajax对象已经获得了服务器返回的所有数据,并且没有出错。 var txt = xhr.responseText; // 更新页面 $('check_uname_msg').innerHTML = txt; } }; //3、 创建请求(这里以get请求为例) var uri = 'check_uname.do?uname=' + $F('uname'); xhr.open('get',encodeURI(uri),true); // 4、发送请求 xhr.send(null); } </script> </head> <!-- 页面显示代码 --> <body style="font-size:30px;"> <form action="regist.do" method="post"> 用户名:<input id="uname" name="uname" οnblur="check_uname();"/> <span id="check_uname_msg"></span><br/> 密 码:<input type="password" name="pwd"/><br/> <input type="submit" value="注册"/> </form> </body> </html> 3、编写服务端代码创建ActionServlet.java，在该Servlet中实现服务端判断
package web; import java.io.IOException; import java.io.PrintWriter; import java.util.Random; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; public class ActionServlet extends HttpServlet { public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("service()"); request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); // 分析请求资源路径 String uri = request.getRequestURI(); System.out.println("uri:" + uri); String action = uri.substring(uri.lastIndexOf("/"), uri.lastIndexOf(".")); System.out.println("action:" + action); // 依据分析结果做不同处理 if ("/check_uname".equals(action)) { // 检查用户名是否存在 String uname = request.getParameter("uname"); System.out.println("uname:" + uname); // 这里的用户名是设定死的，为“Sally” if ("Sally".equals(uname)) { // 只需要返回部分数据 out.println("用户名已经存在"); } else { out.println("可以使用"); } } out.close(); } } 4、配置服务端在web.xml中配置ActionServlet
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"> <servlet> <servlet-name>action</servlet-name> <servlet-class>web.ActionServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>action</servlet-name> <url-pattern>*.do</url-pattern> </servlet-mapping> </web-app> 结果显示1、注册失败：检验到已经有用户名注册过
2、注册成功
注册后跳转页面
Maven结构
