AJAX详解

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");