Ajax

Ajax的含义 Ajax(Asynchronous Javascript And Xml)是一种不用刷新整个页面就可以和服务器通信的技术。实现这种效果的技术还有Flash和页面框架FrameSet/Iframe等。 Ajax的原理 Ajax的原理是利用JS提供的一个对象XMLHttpRequest（也可称为Ajax对象) 向服务器发送异步请求;服务器返回部分数据(不是一个完整的页面)，浏览器利用这些数据在回调函数中对当前页面使用DOM规则做部分更新；整个过程，页面无刷新，不打断用户的操作。 异步请求：当ajax对象发请求时，浏览器不会销毁当前页面，用户仍然可以对当前页面做其它的操作。

图解ajax原理

Ajax的应用 输入值校验，如检测注册的用户名是否已被占用 搜索时的自动提示列表 级联显示 数据录入和列表显示在同一页面 不需要刷新的翻页 Ajax的优缺点 优点：按需取数据；最大程度的减少冗余请求；局部刷新页面；减少用户心理和实际的等待时间,带来更好的用户体验；基于xml标准化,并被广泛支持,不需安装插件；进一步促进页面和数据的分离等。 缺点：AJAX大量的使用了javascript和ajax引擎，这些取决于浏览器的支持，在编写的时候考虑对浏览器的兼容性；AJAX只是局部刷新，所以页面的后退按钮会失效；对流媒体还有移动设备的支持不是太好等。

ajax对象的方法和属性 open(method,url,async) 创建请求 method：请求方式（get/post） async：是否设为异步请求，默认true setRequestHeader(header,value) 添加请求的Http头（post请求需用到，见编程步骤） getAllResponseHeaders() 获取响应的所有Http头（返回键值对） getResponseHeader(header) 获取指定的Http头（返回值） send([string]) 发送请求 string：仅用于post请求，get请求不填或null abort() 取消当前请求 readState 请求状态（Ajax对象与服务器通信的进展） 0请求尚未初始化（还没调用open方法） 1服务器连接已建立（open已调send未调） 2请求已被接受（send已调用） 3请求成功，正在接收数据 4请求完成，接收数据成功 onreadystatechange 请求状态发生变化时的事件控制对象（用于绑定事件处理函数，该函数用于处理readystatechange事件） 注：当readState属性值改变时，就会产生readystatechange事件，onreadystatechange就会调用事件处理函数。 responseText 服务器返回的文本，如纯文本、html等 responseXML 服务器返回的xml，可以当做DOM处理，如可使用xmlDocument.getElementsByTagName("root") status 服务器返回的状态码，常见的有： 200请求成功（ok） 202请求被接受但处理未完成 (internal service error) 400错误请求 403禁止访问(forbidden) 404资源未找到(not found) 500服务器内部错误(internal service error) statusText Http的状态响应文本（OK或Not Found等）

• • Ajax发送异步请求编程步骤

获取XMLHttpRequest对象

var xhr = getXhr();

function getXhr(){

var xhr = null;

if(window.XMLHttpRequest){

//非IE5非IE6

xhr = new XMLHttpRequest();

}else{

xhr = new ActiveXObject("Microsoft.XMLHttp");

}

return xhr;

}

设定回调函数：为onreadystatechange属性设定回调函数

function f1(){

if(xhr.readyState == 4 && xhr.status == 200){

var txt = xhr.responseText; //获得服务器返回的数据

//DOM操作更新页面，这里可以接收的响应有：readyState、status、responseText、responseXML

alert(xhr.responseText);

}

}

创建并发送请求：调用XMLHttpRequest对象的open方法和send方法

方式一: get请求（注意编码问题和缓存问题）

//IE7/8/9的get请求默认使用ANSI对URI编码，故请求地址要套上encodeURI()函数，此外服务器如Tomcat需修改server.xml编码设为utf-8

//为避免IE在相同URL下的get请求缓存问题（相同URL不再请求，直接使用之前请求结果），可将时间戳或随机数附到URL末尾使其唯一

xhr.open('get', encodeURI('checkuname.do?uname=Sally&t=' + Math.random()),true); // true异步（用户仍可操作）；false同步（锁定当前页面）

xhr.onreadystatechange = f1;//绑定事件处理函数

xhr.send(null);//若要提交数据，在上面open方法的url参数后面追加

方式二: post请求

xhr.open('post','checkuname.do',true); // true异步（用户仍可操作）；false同步（锁定当前页面）

//HTTP协议发送post请求时需有content-type消息头，XMLHttpRequest不会添加该消息头，所以要手动添加

xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

xhr.onreadystatechange = f1; //绑定事件处理函数

xhr.send('uname=Sally');

服务器端处理Ajax请求，只需返回部分数据（不再需要返回完整的页面）

public void controller(HttpServletRequest request,HttpServletResponse response) throws ServletExcepton,IOException {

request.setCharacterEncoding("utf-8");

response.setContentType("text/html;charset=utf-8");

PrintWriter out = response.getWriter();

out.println("用户名已存在！");

}

注意：如要返回xml格式，需严格设置XML内容，不然前端获取responseXML值将为null。如：

① 需要加xml文件的头部：<?xml version='1.0' encoding='UTF-8'?>

② 设置返回值内容类型为：response.setContentType("text/xml;charset=UTF-8");

③ 注意xml中的各个标签需要开始和结束标签对应

需导入外部脚本：

$.ajax方法

$.ajax({ url : "/testBean", //请求地址 type : "post",//请求方式（get、post） data : "size=3",//（字符串形式："size=3"，对象形式：{"size":3}）。 dataType : "json",//服务器返回的数据类型（text：文本；json：json字符串；xml：xml文档）。 success : function(data){//当服务器处理正确时用来处理服务器返回数据的函数 alert(data); }, error : function(){//当服务器出错时用来处理异常的函数。 alert("请求失败！"); } //async : true//（默认true），当值为false时发送同步请求。 });

load方法

作用：向服务器发送异步请求，然后将服务器返回的数据直接添加到符合要求的节点上。

用法：$obj.load(请求地址,[请求参数]); //请求参数的写法："username=tom & age=22"或者：{'username':'tom','age':22}

注意：有请求参数时，load方法发送POST请求，否则发送GET请求

get方法

作用：发送GET类型的请求

用法：$.get(请求地址,请求参数,回调函数,服务器返回的数据类型)

说明：回调函数添加的参数是服务器返回的数据。（服务器返回的数据类型有：html、text、JSON、XML、script）