【旧文】AJAX总结(一)

AJAX简介

一、AJAX是什么

在传统的web应用中，用户与应用的每一次交互，都是首先用户通过浏览器向服务器端发送一个请求，服务器解析这个请求，将相应的响应信息返回给浏览器。在服务器端业务逻辑非常复杂或者需要耗时较长的情况下，浏览器等待刷新时，页面经常是一片空白，用户只能被动等待服务器端响应完成，在此期间客户不能在页面上做任何操作，带给用户非常糟糕的体验。

在用户只是需要刷新页面一小部分的情况下，传统的web应用需要刷新整个页面，造成网络流量的浪费，也造成响应速度变慢。

2005年，随着AJAX的出现，这种情况得到了改观。

AJAX这个术语是由Adaptive Path公司的Jesse James Garrett的定义的，他说它是Asynchronous Javascript and Xml的简写。AJAX并不是一种技术，它是多种技术的强大组合，它包括：

Ø        基于XHTML和CSS标准的表示；

Ø        使用DOM进行动态显示和交互；

Ø        使用XML和XSLT进行数据交换与处理

Ø        使用XMLHttpRequest与服务器进行异步通信；

Ø        使用JavaScript绑定一切。

在AJAX涉及的这7项技术中，DOM、XML、XMLHttpRequest、JavaScript最为有用。

二、使用AJAX的利弊

使用AJAX，可以为开发人员、终端用户带来可见的便捷：

Ø        减轻服务器的负担。AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担。

Ø        无刷新更新页面，减少用户心理和实际的等待时间。特别是当读取大量数据的时候，AJAX使用XMLHTTP对象发送请求并获取服务器响应，在不重新载入整个页面的情况下用Javascript操作DOM最终更新页面。在读取数据的过程中，用户面对的不是白屏，是原来页面的内容，用户可以继续进行其他操作，只有当数据接收完毕之后才更新相应部分内容。

Ø        带来更好的用户体验。一直以来，B/S程序在用户易操作性、界面友好性上跟C/S相比都有较大的差距，随着AJAX的应用，这种情况将得到较大的改观。

Ø        可以把以前服务器负担的一些工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器的负担。

目前，AJAX仍然有一些缺陷：

Ø        AJAX大量使用Javascript和AJAX引擎，这取决于浏览器的支持，而且在不同的浏览器上，提供XMLHttpRequest的方式也不一样，使用AJAX的程序必须测试针对不同浏览器的兼容性。

Ø        AJAX更新页面内容时并没有刷新页面，因此，网页的后退功能是失效的，用户无法通过点后退按钮返回到上一个页面。

三、XMLHttpRequest对象

1. XMLHttpRequest对象简介

XMLHttpRequest对象（以下简称XHR对象）是AJAX跟服务器通讯的核心，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新页面，也不用每次将数据处理的工作都交给服务器来做，这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。

XHR对象从IE5.0开始就已经出现了，是作为ActiveX组件的形式提供的；从Mozilla 1.0和Safari 1.2开始，也提供对XHR对象的支持，不过是作为本地JavaScript对象实现的。

2. XHR对象的创建

由于在不同的浏览器里，XHR对象的实现方式不同，为了开发跨浏览器的AJAX应用，XHR对象的创建也必须考虑到不同浏览器的兼容性。

一般的，XHR对象的创建可以通过下面的方式：

var xmlHttp = false;

try {

  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

  try {

    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

  } catch (e2) {

    xmlHttp = false;

  }

}

if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {

  xmlHttp = new XMLHttpRequest();

}

 3. XHR对象的方法

方法	描述
abort()	停止当前请求
getAllResponseHeaders()	作为字符串返问完整的响应头
getResponseHeader("headerLabel")	作为字符串返问单个的响应头
open("method","URL"[,asyncFlag[,"userName"[, "password"]]])	设置请求的方法, 目标 URL, 和其他参数
send(content)	发送请求
setRequestHeader("label", "value")	设置header并和请求一起发送

在XHR对象的方法中，最常用的也是最重要的是open方法和send方法。

4. XHR对象的属性

属性	描述
readyState	对象状态(integer): 0: 未初始化  1 : 读取中  2 : 已读取      3 : 交互中  4 : 完成
onreadystatechange	状态改变的事件触发器
responseText	服务器进程返回数据的文本版本
responseXML	服务器进程返回数据的兼容DOM的XML文档对象
status	服务器返回的状态码, 如:404 = "文件末找到" 、200 ="成功"
statusText	服务器返回的状态文本信息

XHR对象的属性，都非常重要，使用的也都非常频繁。

5. 使用XHR对象跟服务器通讯

通讯的服务器端可以是servlet、jsp、asp、php等。

要使用AJAX跟服务器通讯，一般要经过如下的流程或步骤：

1) 用户操作触发Javascript事件的处理函数，在处理函数中首先创建XHR对象；

2) 调用XHR对象的open方法，指定请求的方法、URL、是否异步等；

3) 设置XHR对象的onreadystatechange属性，捕获XHR对象的readyState的改变；

4) 当XHR对象的readyState属性发生改变的时候，会触发onreadystatechange属性指定的函数，在这个函数里，我们根据逻辑编写相应的代码处理。

在使用XHR对象跟服务器通讯的过程中，有几个事项需要注意。

1) 在XHR对象的创建和初始化过程中，要注意兼容不同的浏览器；

2) 指定onreadystatechange属性对应的函数时，函数后不跟括号，也没有参数。

3) XHR对象的open方法和send 方法的使用

open方法的asyncFlag参数（是否异步），默认为true，表示向服务器发送请求后在等待服务器响应返回的时间里，继续执行下面的代码，不必等待服务器返回，服务器响应返回的时候会触发onreadystatechange属性指定的函数。

open方法中，mehtod参数可以是GET、POST、HEAD，最常用的是GET、POST；

method参数是GET时，发送到服务器的参数以名值对的形式跟在URL后面，URL和参数之间用?隔开，不同的参数之间用&隔开（形如url?name1=value1&name2=value2）。send方法的参数则是null

使用GET方法的示例：

   

    var pro = document.getElementById(“province”).getAttribute(“value”);

    // var pro = document.all.item(“province”).value;

    var urlString = "RefreshSelectServlet?pro=" + pro;

 

     createXMLHttpRequest();

     xmlHttp.onreadystatechange = handleStateChange;

     xmlHttp.open("GET",urlString,true);

     xmlHttp.send(null);

  

open方法中如果method参数是POST，则URL后面不跟参数；同时在调用XHR对象的的send方法前，一定要通过XHR对象的：

setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

方法设置请求头；

 

请求参数以名值对的形式作为send方法的参数。

使用POST方法的示例：

function addEmployee(emp){

       createXMLHttpRequest();

       var url = "EmployeeAddServlet";

       xmlHttp.open("POST", url, true);

       xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    xmlHttp.onreadystatechange = empAddCallback;

    xmlHttp.send(createAddString(emp));

}

function createAddString(emp){
    return "pname="+emp.pname+"&sex="+emp.sex+"&organ="+emp.organ;

}

 

未完待续……