一、AJAX
Ajax简介
- AJAX 是 Asynchronous JavaScript And XML 的简称。直译为,异步的JS和XML。
- AJAX的实际意义是,不发生页面跳转、异步载入内容并改写页面内容的技术。
- AJAX也可以简单的理解为通过JS向服务器发送请求。
- AJAX这门技术很早就被发明,但是直到2005年被谷歌的大量使用,才在市场中流行起来,可以说Google为AJAX的推广起到到推波助澜的作用。
Ajax异步处理
- 异步处理指的是我们在浏览网页的同时,通过AJAX向服务器发送请求,发送请求的过程中我们浏览网页的行为并不会收到任何影响,甚至主观上感知不到在向服务器发送请求。当服务器正常响应请求后,响应信息会直接发送到AJAX中,AJAX可以根据服务器响应的内容做一些操作。
- 使用AJAX的异步请求基本上完美的解决了同步请求带来的问题。首先,发送请求时不会影响到用户的正常访问。其次,即使请求时间过长,用户不会有任何感知。最后,AJAX可以根据服务器的响应信息局部的修改页面,而不需要整个页面刷新。
XMLHttpRequest
- XMLHttpRequest对象是AJAX中非常重要的对象,所有的AJAX操作都是基于该对象的。
- XMLHttpRequest对象用来封装请求报文,我们向服务器发送的请求信息全部都需要封装到该对象中。
三种获取XMLHttpRequest的方式:
1. 目前主流浏览器都支持
var xhr = new XMLHttpRequest()
2. IE6支持的方式
var xhr = new ActiveXObject("Msxml2.XMLHTTP")
3. IE5.5以下支持的方式
var xhr = new ActiveXObject("Microsoft.XMLHTTP")
案例:根据三种不同的方式编写通用方法来获取XMLHttpRequest对象:
//获取XMLHttpRequest的通用方法
function getXMLHttpRequest(){
var xhr;
try{
//大部分浏览器都支持
xhr = new XMLHttpRequest();
}catch(e){
try{
//如果不支持,在这里捕获异常并且采用IE6支持的方式
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
//如果还不支持,在这里捕获异常并采用IE5支持的方式
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xhr;
}
XMLHttpRequest对象的方法
1)open(method,url,async)
(1)method
请求的方法:get或post
接收一个字符串
(2)url
请求的地址,接收一个字符串
(3)Assync
发送的请求是否为异步请求,接收一个布尔值。
true 是异步请求
false 不是异步请求(同步请求)
2)send(string)
(1)string参数
该参数只在发送post请求时需要。
string参数用于设置请求体
3)setRequestHeader(header,value)
(1)header参数
字符串类型,要设置的请求头的名字
(2)value参数
字符串类型,要设置的请求头的值
XMLHttpRequest对象的属性
1)readyState
0 :请求尚未初始化,open()尚未被调用
1 :服务器连接已建立,send()尚未被调用
2 :请求已接收,服务器尚未响应
3 :请求已处理,正在接收服务器发送的响应
4 :请求已处理完毕,且响应已就绪。
2)status
请求的响应码
200 响应成功
404 页面为找到
500 服务器内部错误
3)onreadystatechange
该属性需要指向一个函数
该函数会在readyState属性发生改变时被调用
4)responseText
获得字符串形式的响应数据。
5)responseXML(用的比较少)
获得 XML 形式的响应数据。
示例代码:
1)使用Ajax发送GET请求
//获取xhr对象
var xhr = getXMLHttpRequest();
//设置请求信息
xhr.open("get","AjaxServlet?&t="+Math.random(),true);
//发送请求
xhr.send();
//监听请求状态
xhr.onreadystatechange = function(){
//当响应完成
if(xhr.readyState == 4){
//且状态码为200时
if(xhr.status == 200){
//接收响应信息(文本形式)
var text = xhr.responseText;
//弹出消息
alert(text);
}
};
};
2)使用Ajax发送Post请求
//获取xhr对象
var xhr = getXMLHttpRequest();
//设置请求信息
xhr.open("post","2.jsp",true);
//设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//发送请求
xhr.send("hello=123456");
//监听请求状态
xhr.onreadystatechange = function(){
//当响应完成
if(xhr.readyState == 4){
//且状态码为200时
if(xhr.status == 200){
//接收响应信息(文本形式)
var text = xhr.responseText;
//弹出消息
alert(text);
}
};