- Ajax:不刷新整个页面的前提下,对页面进行局部的动态改变,以XML的形式进行数据传输
     我的理解:其实就是JavaScript生成一个能够与servlet(或其他服务端)的请求头,把处理的内容交给servlet进行处理,然后servlet处理的内容再反馈给这个请求头,再有JavaScript组织处理返回的数据,典型的应用是对一个页面的第二个select内容根据第一个select所选择的内容在不刷新整个页面的情况下自动改变。
    
在使用XMLHttpRequest对象发送请求和处理响应之前,必须先用JavaScript创建一个XMLHttpRequest对象,由于XMLHttpRequest不是一个W3C标准,所以可以有很多种方法创建XHR例如:
  
                    
Internet ExplorerXMLHttpRequest实现为一个ActiveX对象,其他浏览器(如FirefoxSafariOpera把      
                       它实现为一个本地
JavaScript对象。
  根据不同浏览器用不同方法创建XHR对象:
//创建全局对象
var xmlHttp;

function createXMLHttpRequest()
 {
     
if (window.ActiveXObject) 
      { 
         
//假如是 IE浏览器
         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
     
else if (window.XMLHttpRequest)
          {
             
//假如不是IE浏览器
             xmlHttp = new XMLHttpRequest();
          }
}
//如果两种都调用失败,那么 xmlHttp返回 null
XHR的各种方法

   

   

abort()

停止当前请求

getAllResponseHeaders()

HTTP请求的所有响应首部作为键/值对返回

getResponseHeader("header")

返回指定首部的串值

open("method", "url")

建立对服务器的调用。method参数可以是GETPOSTPUTurl参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数

send(content)

向服务器发送请求

setRequestHeader("header", "value")

把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()

XHR的各种属性

2-2 标准XMLHttpRequest属性

   

   

onreadystatechange

每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数

readyState

请求的状态。有5个可取值:0 = 未初始化,1 = 正在加载,2 = 已加载,3 = 交互中,4 = 完成

responseText

服务器的响应,表示为一个串

responseXML

服务器的响应,表示为XML。这个对象可以解析为一个DOM对象

status

服务器的HTTP状态码(200对应OK404对应Not Found(未找到),等等)

statusText

HTTP状态码的相应文本(OKNot Found(未找到)等等)


下面来更详细地讨论这些方法。

void open(string method, string url, boolean asynch, string username, string password):这个方法会建立对服务器的调用。这是初始化一个请求的纯脚本方法。它有两个必要的参数,还有3个可选参数。要提供调用的特定方法(GETPOSTPUT),还要提供所调用资源的URL。另外还可以传递一个Boolean值,指示这个调用是异步的还是同步的。默认值为true,表示请求本质上是异步的。如果这个参数为false,处理就会等待,直到从服务器返回响应为止。由于异步调用是使用Ajax的主要优势之一,所以倘若将这个参数设置为false,从某种程度上讲与使用XMLHttpRequest对象的初衷不太相符。不过,前面已经说过,在某些情况下这个参数设置为false也是有用的,比如在持久存储页面之前可以先验证用户的输入。最后两个参数不说自明,允许你指定一个特定的用户名和密码。

void send(content):这个方法具体向服务器发出请求。如果请求声明为异步的,这个方法就会立即返回,否则它会等待直到接收到响应为止。可选参数可以是DOM对象的实例、输入流,或者串。传入这个方法的内容会作为请求体的一部分发送。

void setRequestHeader(string header, string value):这个方法为HTTP请求中一个给定的首部设置值。它有两个参数,第一个串表示要设置的首部,第二个串表示要在首部中放置的值。需要说明,这个方法必须在调用open()之后才能调用。

在所有这些方法中,最有可能用到的就是open()send()XMLHttpRequest对象还有许多属性,在设计Ajax交互时这些属性非常有用。

void abort():顾名思义,这个方法就是要停止请求。

一次HRX的全部过程


1. 一个客户端事件触发一个Ajax事件。从简单的onchange事件到某个特定的用户动作,很多这样的事件都可以触发Ajax事件。可以有如下的代码:

<input type="text"d="email" name="email" onblur="validateEmail()";>

2. 创建XMLHttpRequest对象的一个实例。使用open()方法建立调用,并设置URL以及所希望的HTTP方法(通常是GETPOST)。请求实际上通过一个send()方法调用触发。可能的代码如下所示:

var xmlHttp;

function validateEmail() {

   var email = document.getElementById("email");

   var url = "validate?email=" + escape(email.value);

   if (window.ActiveXObject) {

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

   }

   else if (window.XMLHttpRequest) {

     xmlHttp = new XMLHttpRequest();

   }

xmlHttp.open("GET", url);

xmlHttp.onreadystatechange = callback;

xmlHttp.send(null);

}

3. 向服务器做出请求。可能调用servletCGI脚本,或者任何服务器端技术。

4. 服务器可以做你想做的事情,包括访问数据库,甚至访问另一个系统。

5. 请求返回到浏览器。Content-Type设置为text/xml——XMLHttpRequest对象只能处理text/html类型的结果。在另外一些更复杂示例中,响应可能涉及更广,还包括JavaScriptDOM管理以及其他相关的技术。需要说明,你还需要设置另外一些首部,使浏览器不会在本地缓存结果。为此可以使用下面的代码:

response.setHeader("Cache-Control", "no-cache");

response.setHeader("Pragma", "no-cache");[1]

6. 在这个示例中,XMLHttpRequest对象配置为处理返回时要调用callback()函数。这个函数会检查XMLHttpRequest对象的readyState属性,然后查看服务器返回的状态码。如果一切正常,callback()函数就会在客户端上做些有意思的工作。以下就是一个典型的回调方法:

function callback() {

   if (xmlHttp.readyState == 4) {

     if (xmlHttp.status == 200) {

          //do something interesting here

     }

   }

}


你可能想了解GETPOST之间有什么区别,并想知道什么时候使用它们。从理论上讲,如果请求是幂等的就可以使用GET,所谓幂等是指多个请求返回相同的结果。实际上,相应的服务器方法可能会以某种方式修改状态,所以一般情况下这是不成立的。这只是一种标准。更实际的区别在于净荷的大小,在许多情况下,浏览器和服务器会限制URL的长度URL用于向服务器发送数据。一般来讲,可以使用GET从服务器获取数据;换句话说,要避免使用GET调用改变服务器上的状态。

一般地,当改变服务器上的状态时应当使用POST方法。不同于GET,需要设置XML- HttpRequest对象的Content-Type首部,如下所示:

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

GET不同,POST不会限制发送给服务器的净荷的大小,而且POST请求不能保证是幂等的。

你做的大多数请求可能都是GET请求,不过,如果需要,也完全可以使用POST

一个简单的Ajax请求示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Simple XMLHttpRequest</title>

<script type="text/javascript">

var xmlHttp;

 

function createXMLHttpRequest() {

    
if (window.ActiveXObject) {

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

    }

    
else if (window.XMLHttpRequest) {

        xmlHttp 
= new XMLHttpRequest();

    }

}

 

function startRequest() {

    createXMLHttpRequest();

    xmlHttp.onreadystatechange 
= handleStateChange;

    xmlHttp.open(
"GET""simpleResponse.xml"true);

    xmlHttp.send(
null);

}

 

function handleStateChange() {

    
if(xmlHttp.readyState == 4) {

        
if(xmlHttp.status == 200) {

            alert(
"The server replied with: " + xmlHttp.responseText);

        }

    }

}

</script>

</head>

 

<body>

    
<form action="#">

        
<input type="button" value="Start Basic Asynchronous Request"

                onclick
="startRequest();"/>

    
</form>

</body>

</html>
参考:http://book.csdn.net/bookfiles/11/