Ajax基础
Ajax可以用来干什么?
基础:请求并显示静态TXT文件、字符集编码、缓存、阻止缓存。
动态数据:请求JS(或Json)文件、eval的使用、DOM创建元素
局部刷新:请求并显示部分网页文件
1、
2、
3、
4、
AJAX中的重要对象:XMLHttpRequest
这个对象是微软最先在ie里面提供的,使用的是ActiveX对象(IE5和IE6):
var variable=new ActiveXObject("Microsoft.XMLHTTP");
现在,所有的现代浏览器(IE7+,Firefox,Chrome,Safari 以及 Opera)均内建XMLHttpRequest对象:
var variable=new XMLHttpRequest();
为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象. 如果支持,则创建 XMLHttpRequest 对象.如果不支持,则创建 ActiveXObject:
var xmlHttpRequest;
if (window.XMLHttpRequest) {//in JavaScript, if it exists(not null and undifine), it is true.
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlHttpRequest = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
1.准备阶段:创建好xmlHttpRequest对象后,设置请求方法,也可以直接传两个参数,也就是说不用传true
xmlHttpRequest.open("GET", "AjaxServlet", true);
open方法的原型是:XMLHttpRequest.prototype.open = function(method,url,async,user,password) {};
我们这里只指定了三个参数:方法,路径和发送异步请求为true.
2.关联好回调函数:
当状态改变的时候,进入处理,这里是一个回调方法:一般都会在函数名后面加个Calback
xmlHttpRequest.onreadystatechange = ajaxCallback;
3.向服务器端发送数据:
xmlHttpRequest.send();
这里使用GET方法,可以不传入参数,或者写send(null),发送POST请求时,需要在这里传入参数.
4.处理回调函数:
function ajaxCallback() {
//状态码为了200表示已经完全正确接收
if (4 == xmlHttpRequest.readyState && 200 == xmlHttpRequest.status) {
var responseText = xmlHttpRequest.responseText;
document.getElementById("xxx").innerHTML = responseText;
}
}