10002---使用 XMLHttpRequest 实现 Ajax

XMLHttpRequest的概述

• XMLHttpRequest 最早是在 IE5 中以 ActiveX 组件的形式实现的。非 W3C 标准 .

 

• 创建 XMLHttpRequest 对象（ 由于非标准所以实现方法不统一 ）

   – InternetExplorer 把 XMLHttpRequest 实现为一个 ActiveX 对象

   – 其他浏览器（ Firefox 、 Safari 、 Opera… ）把它实现为一个本地的 JavaScript 对象。

   – XMLHttpRequest 在不同浏览器上的实现是兼容的 ，所以可以用同样的方式访问 XMLHttpRequest 实例的属性和方法，

      而不论这个实例创建的方法是什么。

创建XMLHttpRequest对象

• 为了每次写 Ajax 的时候都节省一点时间，可以把对象检测的内容打包成一个可复用的函数：

•

说明：对window.XMLHttpRequest的调用会返回一个对象或null，

if语句会把调用返回的结果看作是true或false（如果返回对象则为true，返回null则为false）。

如果XMLHttpRequest对象存在，则把xhr的值设为该对象的新实例。

如果不存在，就去检测 ActiveObject的实例是否存在，如果答案是肯定的，则把微软XMLHTTP的新实例赋给xhr

 

XMLHttpRequest的方法

 

XMLHttpRequest的属性

发送请求 

• 利用 XMLHttpRequest 实例与服务器进行通信包含以下 3 个关键部分：

– onreadystatechange 事件处理函数

– open 方法

– send 方法

  document.getElementsByTagName("a")[0].onclick = function(){
   var request = new XMLHttpRequest();
   var url = this.href;
   var method="GET";
   request.open(method, url);
   request.send(null);
   request.onreadystatechange = function(){
    document.getElementById("status").value = request.readyState;
    if(request.readyState ==4) {
     if (request.status == 200 || request.status == 300){
      document.getElementById("name").value = request.responseText;
     }
    }
   } 
   
   // 取消其默认行为
   return false;
  }

•onreadystatechange:

– 该事件处理函数 由服务器触发 ，而不是用户

– 在 Ajax 执行过程中，服务器会通知客户端当前的通信状态。这依靠更新 XMLHttpRequest 对象的 readyState 来实现。

  改变 readyState 属性是服务器对客户端连接操作的一种方式。

  每次 readyState 属性的改变都会触发 readystatechange 事件

 

• open(method, url, asynch)

– XMLHttpRequest 对象的 open 方法允许程序员用一个 Ajax 调用向服务器发送请求 。

– method ： 请求类型 ，类似“ GET” 或” POST” 的字符串。若只想从服务器检索一个文件，而不需要发送任何数据，

   使用 GET( 可以在 GET 请求里通过附加在 URL 上的查询字符串来发送数据，不过数据大小限制为 2000 个字符 ) 。若需要向服务器发送数据，用 POST 。

– 在某些情况下，有些浏览器会把多个 XMLHttpRequest 请求的结果缓存在同一个URL 。如果对每个请求的响应不同，就会带来不好的结果。

   在此将时间戳追加到 URL 的最后，就能确保 URL 的唯一性，从而避免浏览器缓存结果 。

– url ：路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。

– asynch ：表示请求是否要异步传输，默认值为 true 。指定 true ，在读取后面的脚本之前，不需要等待服务器的相应。

  指定 false ，当脚本处理过程经过这点时，会停下来，一直等到 Ajax 请求执行完毕再继续执行。

 

•send(data)：

– open 方法定义了 Ajax 请求的一些细节。 send 方法可为已经待命的请求发送指令

– data ：将要传递给服务器的字符串。

– 若选用的是 GET 请求，则不会发送任何数据， 给 send 方法传递 null 即可 ： request.send (null);

– 当向 send() 方法提供参数时，要确保 open() 中指定的方法是 POST ，如果没有数据作为请求体的一部分发送，则使用 null.

– 完整的 Ajax 的 GET 请求示例：

•

接收相应

• 用 XMLHttpRequest 的方法可向服务器发送请求。在 Ajax 处理过程中， XMLHttpRequest 的如下属性可被服务器更改：

–readyState

–status

–responseText

–responseXML

 

• readyState

– readyState 属性 表示 Ajax 请求的当前状态 。它的值用数字代表。

• 0 代表未初始化。 还没有调用 open 方法

• 1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用

• 2 代表已加载完毕。 send 已被调用。请求已经开始

• 3 代表交互中。服务器正在发送响应

• 4 代表完成。响应发送完毕

– 每次 readyState 值的改变，都会触发 readystatechange 事件 。如果把 onreadystatechange 事件处理函数赋给一个函数，

  那么每次 readyState 值的改变都会引发该函数的执行。

– readyState 值的变化会因浏览器的不同而有所差异。 但是，当请求结束的时候，每个浏览器都会把 readyState 的值统一设为 4

 

•status

– 服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息，并且属于超文本传输协议中的一部分。

– 常用状态码及其含义：

• 404 没找到页面 (not found)

• 403 禁止访问 (forbidden)

• 500 内部服务器出错 (internal service error)

• 200 一切正常 (ok)

• 304 没有被修改 (not modified)

– 在 XMLHttpRequest 对象中，服务器发送的状态码都保存在 status 属性里。

  通过把这个值和 200 或 304 比较，可以确保服务器是否已发送了一个成功的响应

 

•responseText

– XMLHttpRequest 的 responseText 属性 包含了从服务器发送的数据 。它是一个 HTML,XML 或普通文本，这取决于服务器发送的内容。

– 当 readyState 属性值 变成 4 时 , responseText 属性才可用，表明 Ajax 请求已经结束。

•

 

•responseXML

– 如果服务器返回的是 XML ， 那么数据将储存在 responseXML 属性中。

– 只有服务器发送了带有正确首部信息的数据时， responseXML 属性才是可用的。 MIME 类型必须为 text/xml

 

•数据格式提要

• 在服务器端 AJAX 是一门与语言无关的技术。在业务逻辑层使用何种服务器端语言都可以。

• 从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。

  服务器端的编程语言只能以如下 3 种格式返回数据：

– XML

– JSON

– HTML

 

• XML

• 优点：

– XML 是一种通用的数据格式。

– 不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记。

– 利用 DOM 可以完全掌控文档。

• 缺点：

– 如果文档来自于服务器，就必须得保证文档含有正确的首部信息。若文档类型不正确，那么 responseXML 的值将是空的。

– 当浏览器接收到长的 XML 文件后， DOM 解析可能会很复杂

  var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;

  
          var nodeA = document.createElement("a");
          var textA = document.createTextNode(name);
          var h2 = document.createElement("h2");
          nodeA.appendChild(textA);
          nodeA.href="mailto:" + email;
          h2.appendChild(nodeA);

 

• JSON

• JSON （ JavaScript Object Notation ）一种简单的数据格式，比 xml 更轻巧。

  JSON 是 JavaScript 原生格式 ，这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包。

• JSON 的规则很简单：对象是一个无序的“ ‘名称 / 值 ’对”集合。一个对象以“ {” （左括号）开始，“ }” （右括号）结束。每个“名称”后跟一个“ :” （冒号）；“‘名称 / 值’对”之间使用“ ,” （逗号）分隔。

• JSON 用冒号 ( 而不是等号 ) 来赋值。每一条赋值语句用逗号分开。整个对象用大括号封装起来。可用大括号分级嵌套数据。

• 对象描述中存储的数据可以是字符串，数字或者布尔值。对象描述也可存储函数，那就是对象的方法。

 

• 解析JSON

• JSON 只是一种文本字符串。它被存储在 responseText 属性中

• 为了读取存储在 responseText 属性中的 JSON 数据，需要根据 JavaScript 的 eval 语句。

  函数 eval 会把一个字符串当作它的参数 。 然后这个字符串会被当作 JavaScript 代码来执行。

 因为 JSON 的字符串就是由 JavaScript 代码构成的，所以它本身是可执行的

• 代码实例：

• JSON 提供了 json.js 包，下载 http://www.json.org/json.js 后，使用 parseJSON () 方法将字符串解析成 JS 对象

•JSON小结

• 优点：

– 作为一种数据传输格式， JSON 与 XML 很相似，但是它更加灵巧。

– JSON 不需要从服务器端发送含有特定内容类型的首部信息。

• 缺点：

– 语法过于严谨

– 代码不易读

– eval 函数存在风险

 

•解析 HTML

• HTML 由一些普通文本组成。如果服务器通过 XMLHttpRequest 发送 HTML ， 文本将存储在 responseText 属性中。

• 不必从 responseText 属性中读取数据。它已经是希望的格式，可以直接将它插入到页面中。

• 插入 HTML 代码最简单的方法是更新这个元素的 innerHTML 属性。

 document.getElementById("details").innerHTML = request.responseText;

•HTML小结

• 优点：

– 从服务器端发送的 HTML 代码在浏览器端不需要用 JavaScript 进行解析。

– HTML 的可读性好。

– HTML 代码块与 innerHTML 属性搭配，效率高。

• 缺点：

– 若需要通过 AJAX 更新一篇文档的多个部分， HTML 不合适

– innerHTML 并非 DOM 标准。

 

•对比小结

• 若应用程序 不需要与其他应用程序共享数据的时候 , 使用 HTML 片段来返回数据时最简单的

• 如果数据需要重用 , JSON 文件是个不错的选择 , 其在性能和文件大小方面有优势

• 当远程应用程序未知时 , XML 文档是首选 , 因为 XML 是 web 服务领域的 “ 世界语”