1.1. AJAX详解
在学习HTTP协议的时候,我们知道,HTTP协议基于请求响应模型,一次请求对应一次响应,请求只能由客户端发出,服务器只能被动的等待请求。
但我们经常见到如下的功能:
网络聊天室里,聊天信息,不需要刷新页面就可以接受最新的聊天消息。
网站注册时,输入用户名后无需提交立即提示用户名已经存在。
百度输入搜索条件时,根据输入的不同提示不同的备选查询内容。
百度地图根据,鼠标的位置变化,显示内容变化
在这些应用场景中,我们没有刷新网页,却获取到了服务器发回的最新数据。这不是很明显的违反了HTTP协议了吗?
其实这不是违反了HTTP协议,而是使用了一种“另类”的技术,叫做AJAX(Asynchronous JavaScript and XML)。改变了传统方式的同步刷新方式,改为了异步刷新—即在保持当前页面的情况下,异步发出请求等待响应,再根据得到的响应消息修改当前页面。
Ajax并不是一项新技术,其实是多种技术的综合,包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest。
XMLHttpRequest对象方法
XMLHttpRequest对象属性
想要实现Ajax需要如下几个步骤
//1 创建XMLHttpRequest对象
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
//2.服务器端向客户端进行响应(注册监听)
var data = null;
var xhr = ajaxFunction();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200||xhr.status==304){
data = xhr.responseText;
}
}
}
readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
0 代表未初始化。 还没有调用 open 方法
1 代表正在加载。 open 方法已被调用,但 send 方法还没有被调用
2 代表已加载完毕。send 已被调用。请求已经开始
3 代表交互中。服务器正在发送响应
4 代表完成。响应发送完毕
xhr.status
常用状态码及其含义:
404 没找到页面(not found)
403 禁止访问(forbidden)
500 内部服务器出错(internal service error)
200 一切正常(ok)
304 没有被修改(not modified)(服务器返回304状态,表示源文件没有被修改 )
xhr.responseText 服务器发回的响应结果,字符串
xhr.responseXML 服务器返回的响应结果,XML对象
//3 客户端与服务器端建立连接
* 使用的是XMLHttpRequest对象的open(method, url, asynch)方法
* * method:请求类型,类似 “GET”或”POST”的字符串。
* * url:路径字符串,指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。
* * asynch:表示请求是否要异步传输,默认值为true(异步)。
xhr.open("GET","../testServlet?timeStamp="+new Date().getTime()+"&c=19",true);
//4 客户端向服务器端发送请求
*
* 使用的是XMLHttpRequest对象的send()方法
* * 如果请求类型是GET方式的话,使用send()方法发送请求数据,服务器端接收不到
* * 该步骤不能被省略,只能写成xhr.send(null);
*/
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
~GET方式:
xhr.send(null); //xhr.send(null);
~POST方式:如果请求类型是POST的话,需要设置请求首部信息
xhr.send("a=7&b=8");