一、ajax概述:
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。
AJAX还有一个最大的特点就是,当服务器响应时,不用刷新整个浏览器页面,而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。它能使用js访问服务器,而且是异步访问!
与服务器异步交互;
浏览器页面局部刷新;
服务器给客户端的响应一般是整个页面,一个html完整页面!但在ajax中因为是局部刷新,那么服务器就不用再响应整个页面!而只是数据!
text:纯文本
xml:大家都熟悉!!!
json:它是js提供的数据交互格式,它在ajax中最受欢迎!
1、获取XMLHttpRequest对象
(用于发送请求,接收请求,处理请求)
大多数浏览器都支持:var xmlHttp = new XMLHttpRequest();
IE6.0:var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
IE5.5以更早版本的IE:var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
通过方法获取:
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();// 支持大部分浏览器
catch (e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");// 使用ie6
} catch (e) {
try {
return new ActiveXObject("Microsoft.XMLHTTP");// 使用ie5.5
} catch (e) {
lert("你用的是什么浏览器啊?");
throw e;
}
}
}
}
2、打开与服务器的链接
xmlHttp.open():用来打开与服务器的连接,它需要三个参数:
请求方式:可以是GET或POST
请求的URL:指定服务器端资源,例如;/day23_1/AServlet
请求是否为异步:如果为true表示发送异步请求,否则同步请求!
xmlHttp.open("GET", "/day23_1/AServlet", true);
3、发送请求
xmlHttp.send(null):如果不给可能会造成部份浏览器无法发送!
参数:就是请求体内容!如果是GET请求,必须给出null。
通过get请求,进行数据提交,需要将数据拼接到url中,而且send为null,后端通过getParameter获取参数,编码问题, request.setCharacterEncoding();无效,因为数据在url中,不在请求体中。
4、监听服务器响应
在xmlxmlHttpHttp对象的一个事件上注册监听器:onreadystatechange
对象一共有5个状态:
0状态:刚创建,还没有调用open()方法;
1状态:请求开始:调用了open()方法,但还没有调用send()方法
2状态:调用完了send()方法了;
3状态:服务器已经开始响应,但不表示响应结束了!
4状态:服务器响应结束!(通常我们只关心这个状态!!!)
得到xmlHttp对象的状态:
var state = xmlHttp.readyState;//可能是0、1、2、3、4
得到服务器响应的状态码
var status = xmlHttp.status;//例如为200、404、500
得到服务器响应的内容1
var content = xmlHttp.responseText;//得到服务器的响应的文本格式的内容
var content = xmlHttp.responseXML;//得到服务器的响应的xml响应的内容,它是Document对象了!