掌握ajax笔记

最新推荐文章于 2025-07-11 20:28:41 发布

最新推荐文章于 2025-07-11 20:28:41 发布 · 72 阅读

文章标签：

#Ajax #应用服务器 #JavaScript #浏览器 #XML #ViewUI

第一部分：AJAX入门
1 Ajax 尝试建立桌面应用程序的功能和交互性，与不断更新的 Web 应用程序之间的桥梁。可以使用像桌面应用程序中常见的动态用户界面和漂亮的控件，不过是在 Web 应用程序中。

2 下面是 Ajax 应用程序所用到的基本技术：

HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。
JavaScript 代码是运行 Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。
DHTML 或 Dynamic HTML，用于动态更新表单。我们将使用 div、span 和其他动态 HTML 元素来标记 HTML。
文档对象模型 DOM 用于（通过 JavaScript 代码）处理 HTML 结构和（某些情况下）服务器返回的 XML。

3 在之前的如提交表单的应用是把表单提交到服务器，用户需要等待服务器做出反应，刷新页面获得数据的页面显示，这个于桌面的应用程序比较缺乏交互性。

Ajax 基本上就是把 JavaScript 技术和 XMLHttpRequest 对象放在 Web 表单和服务器之间。当用户填写表单时，数据发送给一些 JavaScript 代码而不是直接发送给服务器。相反，JavaScript 代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。换句话说，JavaScript 代码在幕后发送请求，用户甚至不知道请求的发出。更好的是，请求是异步发送的，就是说 JavaScript 代码（和用户）不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。

然后，服务器将数据返回 JavaScript 代码（仍然在 Web 表单中），后者决定如何处理这些数据。它可以迅速更新表单数据，让人感觉应用程序是立即完成的，表单没有提交或刷新而用户得到了新数据。 JavaScript 代码甚至可以对收到的数据执行某种计算，再发送另一个请求，完全不需要用户干预！这就是 XMLHttpRequest 的强大之处。它可以根据需要自行与服务器进行交互，用户甚至可以完全不知道幕后发生的一切。结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验，但是背后又拥有互联网的全部强大力量。

4 使用javascript

得到 XMLHttpRequest 的句柄后，其他的 JavaScript 代码就非常简单了。事实上，我们将使用 JavaScript 代码完成非常基本的任务：

获取表单数据：JavaScript 代码很容易从 HTML 表单中抽取数据并发送到服务器。
修改表单上的数据：更新表单也很简单，从设置字段值到迅速替换图像。
解析 HTML 和 XML：使用 JavaScript 代码操纵 DOM，处理 HTML 表单服务器返回的 XML 数据的结构。

对于前两点，需要非常熟悉 getElementById() 方法

5 创建xmlhttprequest对象,兼容不同的浏览器

^属^性	^描^述
^{onreadystatechange}	^指定当^readyState^{属性改变时的事件处理句柄，属性为只写}
^readyState	^{返回当前请求的状态，属性为只读}
^responseBody	^{将回应信息正文以}^{unsigned byte}^{数组形式返回，属性为只读}
^{responseStream}	^以^{Ado Stream}^{对象的形式返回响应信息，属性为只读}
^responseText	^{以字符串的形式返回服务器响应信息，属性为只读}
^responseXML	^{将响应信息格式化为}^{XML Document}^{对象返回，属性为只读}
^status	^返回当前^HTTP^{请求的状态码，属性为只读。如：}^{404 = "}^{文件未找到}^"^、^{200 =} ^"^成功^"
^statusText	^返回当前^HTTP^{请求的状态行，属性为只读}

XMLHttpRequest对象属性readyState返回当前XMLHttp请求的状态，这些状态用长度为4的整形数据表示，其属性的状态含义如表

^状^态	^含^义	^说^明
⁰	^未初始化	^{对象已经建立，但是未初始化，即尚未调用}^open^方法创建^http^请求
¹	^初始化	^{对象已经建立，但是为调用}^send^方法发送^http^请求
²	^发送数据	^send^{方法已经被调用，但是当前的状态以及}^http^头未知
³	^{数据传送中}	^{已经接收部分数据，因为响应及}^http^{头不全，这是通过}^response^{系列方法获取部分数据会出现错误}
⁴	^传送完成	^{数据接收完毕，此时可以通过}^response^{系列方法获取完整的回应数据}

XMLHttpRequest对象属性onreadystatechange是readyState状态改变的事件触发器，用来指定当readyState属性发生改变时的处理事件。在使用过程中，通常通过将事件处理函数名称赋予onreadystatechange的方式，来为XMLHttpRequest指定事件触发器，而在事件处理函数中判断readyState状态值并做相应的处理。例程4-26的代码段指定doState- ReadyHandler函数作为事件处理函数，并在doStateReadyHandler函数体内在readyState状态为4时弹出一个显示“完成”信息的对话框。

例程4-26 指定XMLHttpRequest对象的回调函数

var http_request = null;

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

function send() {

http_request.onreadystatechange = doStateReadyHandler;

http_request.open("GET","http://localhost/sample.xml",true);

http_request.send();

}

function doStateReadyHandler() {

if(http_request.readySatate==4) window.alert("完成");

}

XMLHttpRequest对象属性responseText将响应信息以字符串的形式返回。XMLHttp- Request尝试将响应信息解码为Unicode字符串，默认的响应数据编码方式为UTF-8。如果服务器返回的数据带有BOM（byte-order mark），则XMLHttpRequest可以解码任何的UCS-2或者UCS-4数据。如果服务器返回的是XML文档，此属性不处理XML文档中的编码声明，仅将整个XML文档作为字符串返回。

如果服务器以XML文档的格式返回响应数据，这时应该采用responseXML属性加以处理。如果响应数据不是有效的XML文档，此属性本身不返回XMLDOMParseError，可以通过处理过的DOMDocument对象获取错误信息。在使用responseXML将服务器响应数据以XML文档的形式返回之前，先要将响应的内容类型设置为application/xml。

XMLHttpRequest对象属性status代表当前http请求的状态，为长整型数据。其值及其含义如表4-19所示。

表4-19 http请求状态及其含义

^值	^描^述	^值	^描^述
¹⁰⁰	^{客户必须继续发出请求}	⁴⁰⁴	^{没有发现文件、查询或}^URl
¹⁰¹	^{客户要求服务器根据请求转换}^HTTP^协议版本	⁴⁰⁵	^用户在^Request-Line^{字段定义的方法不允许}
²⁰⁰	^交易成功	⁴⁰⁶	^{根据用户发送的}^Accept^{拖，请求资源不可访问}
²⁰¹	^{提示知道新文件的}^URL	⁴⁰⁷	^类似⁴⁰¹^{，用户必须首先在代理服务器上得到授权}
²⁰²	^{接受和处理、但处理未完成}	⁴⁰⁸	^{客户端没有在用户指定的饿时间内完成请求}
²⁰³	^{返回信息不确定或不完整}	⁴⁰⁹	^{对当前资源状态，请求不能完成}
²⁰⁴	^{请求收到，但返回信息为空}	⁴¹⁰	^{服务器上不再有此资源且无进一步的参考地址}
²⁰⁵	^{服务器完成了请求，用户代理必须复位当前已经浏览过的文件}	⁴¹¹	^{服务器拒绝用户定义的}^{Content-Length}^属性请求
²⁰⁶	^{服务器已经完成了部分用户的}^GET^请求	⁴¹²	^{一个或多个请求头字段在当前请求中错误}
³⁰⁰	^{请求的资源可在多处得到}	⁴¹³	^{请求的资源大于服务器允许的大小}
³⁰¹	^{删除请求数据}	⁴¹⁴	^{请求的资源}^URL^{长于服务器允许的长度}
³⁰²	^{在其他地址发现了请求数据}	⁴¹⁵	^{请求资源不支持请求项目格式}
³⁰³	^{建议客户访问其他}^URL^{或访问方式}	⁴¹⁶	^{请求中包含}^Range^{请求头字段，在当前请求资源范围内没有}^range^{指示值，请求也不包含}^If-Range^{请求头字段}
³⁰⁴	^{客户端已经执行了}^GET^{，但文件未变化}	⁴¹⁷	^{服务器不满足请求}^Expect^{头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求}
³⁰⁵	^{请求的资源必须从服务器指定的地址得到}	⁵⁰⁰	^{服务器产生内部错误}
³⁰⁷	^{申明请求的资源临时性删除}	⁵⁰¹	^{服务器不支持请求的函数}
⁴⁰⁰	^{错误请求，如语法错误}	⁵⁰²	^{服务器暂时不可用，有时是为了防止发生系统过载}
⁴⁰¹	^{请求授权失败}	⁵⁰³	^{服务器过载或暂停维修}
⁴⁰²	^保留有效^ChargeTo^头响应	⁵⁰⁴	^{关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长}
⁴⁰³	^{请求不允许}	⁵⁰⁵	^{服务器不支持或拒绝支请求头中指定的}^HTTP^版本

在这些状态中，最常用到的是“404”。通常，在类似例子4-20中doStateReady Handler的事件处理函数中，判断status的状态，然后做相应的处理。

XMLHttpRequest对象提供了包括send、open在内的六种方法，用来向服务器发送http请求，并设置相应的头信息。

^方^法	^描^述
^abort	^{取消当前请求}
^{getAllResourceHeaders}	^{获取相应的全部}^http^头信息
^{getResourceHeader}	^{从响应信息中获取指定的}^http^头信息
^open	^{创建一个新的}^http^{请求，并指定此请求的方法、}^URL^{、以及验证信息（用户名}^/^密码）
^send	^{发送请求到}^http^{服务器并接收回应}
^{setRequestHeader}	^{单独设定请求的某个}^http^头

headers =http_request.getAllResourceHeaders(); header = http_request.getResourceHeader(“header-name”);