Ajax的简单应用

来源：互联网发布：隆多体测数据编辑：程序博客网时间：2024/06/05 09:54

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

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

void open(string method, string url, boolean asynch, string username, string password)：这个方法会建立对服务器的调用。这是初始化一个请求的纯脚本方法。它有两个必要的参数，还有3个可选参数。要提供调用的特定方法（GET、POST或PUT），还要提供所调用资源的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方法（通常是GET或POST）。请求实际上通过一个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.向服务器做出请求。可能调用servlet、CGI脚本，或者任何服务器端技术。

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

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

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     }   }}

你可能想了解GET和POST之间有什么区别，并想知道什么时候使用它们。从理论上讲，如果请求是幂等的就可以使用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。

<!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>