1.ajax 对象的属性说明（常用的）
（1）open(method,url,boolean);创建请求，method :填请求类型（get post）,url :请求的地址，
boolean：true代表同步（即ajax操作过程中仍然可以操作html）
（2）send("name="+name); 发送请求，通过属性名“name” 获取属性的值：name;
(3)setRequestHeader("content-type","application/x-www-form-urlencoded;charset=utf-8"); 设置post请求的http 消息头
(4)onreadystatechange(); 发生任何状态变化时 事件控制对象， 通常绑定回调函数
(5) readyState : 请求的状态
0: 尚未初始化 ?创建open时
1：正在发送 send
2：请求完成
3.请求成功 正在响应
4：数据接收成功响应完毕
(6) status 服务器返回的响应值
200：请求成功
202：请求被接收，但是没完成处理
400：错误请求
404：资源找不到
500：内部服务器错误
(7) responseText 服务器返回的文本
(8) responseXML 返回的xml，可以当作DOM处理
(9) abort()；取消请求
(10) getAllResponseHeader(); 获取响应的所有HTTP头对象
(11) getResponseHeader("指定"); 获取指定的HTTP头对象
注：为解决 get请求缺省值中文乱码问题，在TOMcat conf 下的 server 的xml文件中的如下位置 添加URLEncoding="utf-8";
2. 获取ajax 对象
将 获取ajax 对象的方法封装在 js文件中，方便调用。同时可以在js文件自定义函数方法
?// 创建 ajax.js ?文件 ???function getxhr(){ ???var xhr; ???if(window.XMLHttpRequest){ ?// 获取ajax 对象，使用if-else语句是为了避免浏览器不兼容现象 ???????xhr=new window.XMLHttpRequest(); ???}else{ ???????xhr=new ActionXObject(‘Microsoft.XMLHttp‘); ???} ???return xhr;}function $(id){ // 自定义获取id对象的函数 ???return document.getElementById(id);}function $V(id){ // 自定义获取id对象文本值 的函数 ???return $(id).value;}3.使用ajax 将页面数据提交到服务器Servlet
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>练习阿贾克斯</title> ???<script type="text/javascript" src="lib/pra_ajax.js"></script> ???<script type="text/javascript"> ???????function getUsername(){// 使用ajax 检测用户名长度是否规范 ???????????var xhr=getxhr(); ???????????var str; ???????????xhr.onreadystatechange=function(){ ???????????????if(xhr.readyState==4&&xhr.status==200){ ???????????????????var str=xhr.responseText; ???????????????$("usernamespan").innerHTML=str; ?????????????????} ???????????????????} ???????????var username=$V("username"); ???????????xhr.open("get","getUsername.do?username="+username,true); ???????????xhr.send(null); ???????} ???????????????????function postPassword(){// 使用ajax 检测两次密码是否相同 ???????????var xhr=getxhr(); ???????????xhr.onreadystatechange=function(){ ???????????????if(xhr.readyState==4&&xhr.status==200){ ???????????????????var str=xhr.responseText; ???????????????$("password2span").innerHTML=str; ???????????????} ???????????} ???????????????????????xhr.open("post","postPassword.do",true); ???????????xhr.setRequestHeader("content-type","application/x-www-form-urlencoded;charset=utf-8"); ???????????var password1=$("password1").value; ???????????var password2=$("password2").value; ???????????xhr.send("password1="+password1+"&password2="+password2); ???????????} ???????????????</script></head><body> ???<form action="#"> ???<fieldset> ???????<legend style="font-stretch: semi-condensed;">注册</legend> ???<table> ???????<tr> ???????????<td>账号：</td> ???????????<td><input type="text" name="username" onchange="getUsername()" id="username"></td> ???????????<td><span id="usernamespan"></span></td> ???????</tr> ???????????????<tr> ???????????<td>密码：</td> ???????????<td><input type="text" id="password1"></td> ???????????<td><span id="password1span"></span></td> ???????</tr> ???????????????<tr> ???????????<td>确认密码：</td> ???????????<td><input type="text" id="password2" onchange="postPassword()" ></td> ???????????<td><span id="password2span"></span></td> ???????</tr> ???</table> ???????<input type="submit" value="注册" > ???</fieldset> ???</form></body></html>4. 服务器Servlet将页面提交的数据进行处理
package Ajax;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class Action extends HttpServlet {private static final long serialVersionUID = 1L; ??????????????public Action() { ???????super(); ???????// TODO Auto-generated constructor stub ???}protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("utf-8");response.setContentType("text/html;charset=utf-8");PrintWriter pw=response.getWriter();String path=request.getRequestURI(); // 获取URI ????????????????????????// 获取 地址的关键字段来匹配相应的方法String action=path.substring(path.lastIndexOf("/")+1,path.lastIndexOf(".")); ?????????????????????if("getUsername".equals(action)) { // 对用户名进行判断String username=request.getParameter("username");System.out.println(username);if(username.length()<4||username.length()>8) {// 判断条件，响应页面pw.println("<font color=red>用户名长度不合适</font>");}else {pw.println("<font color=green>用户名长度太他妈的合适聊，给你点个赞！！！</font>");}}if("postPassword".equals(action)) {// 对密码进行判断String password2=request.getParameter("password2");String password1=request.getParameter("password1");System.out.println(password1);System.out.println(password2);if(password1.equals(password2)) {pw.println("<font color=green>两次的密码相同！！！！！！！！！！！</font>");}else {pw.println("<font color=red>密码不同</font>");}}}} ???end;
AJAX（阿贾克斯）的简单应用
原文地址：https://www.cnblogs.com/zhangzonghua/p/AJAX_1.html