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对象的方法和属性
|
-
- 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)