AJAX ( Asynchronous JavaScript and XML )

分手后的思念是犯贱 2022-06-02 03:46 153阅读 0赞

## 什么是 AJAX？ ##

AJAX 指异步JavaScript及 XML ( Asynchronous JavaScript and XML )是一种创建交互式网页应用的网页开发技术。

### AJAX 是不用刷新整个页面便可与服务器通讯的办法 ###

*  通过 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，您的 JavaScript 可在不重载页面的情况与Web服务器交换数据。

### AJAX 并不是一项新技术，它实际上是几种技术以一种全新的方式融合在一起。 ###

*  服务器端语言：服务器需要具备向浏览器发送特定信息的能力。AJAX 与服务器端语言无关。
 *  XML（Extensible Markup Language，可扩展标记语言）是一种描述数据的格式。AJAX 程序需要某种格式化的格式来在服务器和客户端之间传递信息，XML 是其中一种选择
 *  JSON （JavaScript Object Notation, JavaScript 对象标记） 是一种轻量级的数据交换格式。它基于 ECMAScript (w3c制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
 *  XHTML（Extensible HyperText Markup Language ，可扩展超文本标记语言）和CSS（Cascading Style Sheet，层叠样式表）标准化呈现；
 *  DOM（Document Objct Model，文档对象模型）实现动态显示和交互；
 *  使用 XMLHTTP 组件 XMLHttpRequest 对象进行异步数据读取
 *  使用 JavaScript 绑定和处理所有数据。

## XMLHttpRequest 的概述 ##

*  XMLHttprRequest 最早是在 IE 5 中以 ActiveX 组件的形式实现的。非 W3C 标准。
 *  创建 XMLHttpRequest 对象（由于非标准所以实现方法不统一）  
    
    
     *  Internet Explorer 把 XMLHttpRequest 实现为一个 ActiveX 对象
     *  其他浏览器（FireFox、Chrome…）把它实现为一个本地的 JavaScript 对象。
     *  XMLHttpRequest 在不同浏览器上的实现是兼容的，所以可以用同样的方式访问 XMLHttpRequest 实例的属性和方法，而不论这个实例创建的方法是什么。

--------------------

## 创建 XMLHttpRequest 对象 ##

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

> 对 window.XMLHttpRequest 的调用会返回一个对象或 null，if 语句会把调用返回的结果看作是 true 或 false（如果发挥对象则为 true，返回 null 则为 false）。如果 XMLHttpRequest 对象存在，则把 xhr 的值设为该对象的新实例。如果不存在，就去检测 ActiveObject 的实例是否存在，如果是，则把微软 XMLHTTP 的新实例赋给 xhr

### XMLHttpRequest 的方法 ###

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>abort()</td> 
   <td>停止当前请求</td> 
  </tr> 
  <tr> 
   <td>getAllResponseHeaders()</td> 
   <td>把 HTTP 请求的所有响应首部作为 KV 对返回</td> 
  </tr> 
  <tr> 
   <td>getResponseHeader(“header”)</td> 
   <td>返回指定首部的串值</td> 
  </tr> 
  <tr> 
   <td>open(“method”,”url”)</td> 
   <td>建立对服务器的调用。Method 参数可以是GET、POST或PUT。url参数可以是相对 URL 或绝对 URL。</td> 
  </tr> 
  <tr> 
   <td>send(content)</td> 
   <td>向服务器发送请求</td> 
  </tr> 
  <tr> 
   <td>setRequestHeader(“header”,”value”)</td> 
   <td>把指定首部设置为所提供的值。在设置任何首部之前必须先调用 open()</td> 
  </tr> 
 </tbody> 
</table>

### XMLHttpRequest 的属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>readyState</td> 
   <td>请求状态，有 5 个可取值：0 = 未初始化、1 = 正在加载、2 = 已经加载、3 = 交互中、4 = 完成</td> 
  </tr> 
  <tr> 
   <td>responseText</td> 
   <td>目前为止为服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串</td> 
  </tr> 
  <tr> 
   <td>responseXML</td> 
   <td>对请求的响应，解析为 XML 并作为 Document 对象返回</td> 
  </tr> 
  <tr> 
   <td>status</td> 
   <td>由服务器返回的 HTTP 状态代码，如 200 表示成功，而 404 表示 “Not Found” 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常</td> 
  </tr> 
  <tr> 
   <td>statusText</td> 
   <td>这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 “OK”，当状态为 404 的时候它是 “Not Found”。和 status 属性一样，当 readyState 小于 3 的时候读取这一属性会导致一个异常</td> 
  </tr> 
 </tbody> 
</table>

### 发送请求 ###

*  利用 XMLHttpRequest 实例与服务器进行通信包含以下 3 个关键部分：
 *  onreadystatechange 事件处理函数
 *  open 方法
 *  send 方法

*  open(method, url, asynch)  
    
    
     *  XMLHttpRequest 对象的 open 方法允许用一个 AJAX 调用向服务器发送请求。
     *  method 参数是用于请求的 HTTP 方法。值包括 GET、POST 和 HEAD。
     *  在某些情况下，有些浏览器会把多个 XMLHttpRequest 请求的结果还存在同一个 URL。如果对每个请求的响应不同，就会带来不好的结果。在此将时间戳追加到 URL 的最后，就能确保 URL 的唯一性，从而避免浏览器缓存结果。
     *  url 参数是请求的主体。大多数浏览器实施了一个同源安全策略，并且要求这个 URL 与包含脚本的文本具有相同的主机名和端口。
     *  async 参数指示请求使用应该异步地执行。如果这个参数是 false，请求是同步的，后续对 send() 的调用将阻塞，直到响应完全接收。如果这个参数是 true 或省略，请求是异步的，且通常需要一个 onreadystatechange 事件句柄。
     *  username 和 password 参数是可选的，为 url 所需的授权提供认证资格。如果指定了，它们会覆盖 url 自己指定的任何资格。

### 接收响应 ###

*  readyState  
    HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。  
    5 个状态中每一个都有一个相关联的非正式的名称，下表列出了状态、名称和含义：

<table> 
 <thead> 
  <tr> 
   <th>状态</th> 
   <th>名称</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>0</td> 
   <td>Uninitialized</td> 
   <td>初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。</td> 
  </tr> 
  <tr> 
   <td>1</td> 
   <td>Open</td> 
   <td>open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>Sent</td> 
   <td>Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。</td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td>Receiving</td> 
   <td>所有响应头部都已经接收到。响应体开始接收但未完成。</td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td>Loaded</td> 
   <td>HTTP 响应已经完全接收。</td> 
  </tr> 
 </tbody> 
</table>

readyState 的值不会递减，除非当一个请求在处理过程中的时候调用了 abort() 或 open() 方法。每次这个属性的值增加的时候，都会触发 onreadystatechange 事件句柄。

*  responseText  
    
    
     *  XMLHttpRequest 的 responseText 属性包含了从服务器发送的数据。它是一个 HTML, XML 或普通文本，这取决于服务器发送的内容。
     *  当 readyState 属性值变成 4 时，responseText 属性才可用，表明 AJAX 请求已经结束。

function doSomeThing(){
        if(request.readyState == 4){
            if(request.status == 200 || reuquest.status == 304){
            alert(request.responseText);
            }
        }
    }

*  setRequestHeader(header, value)  
    
    
     *  当浏览器向服务器请求页面时，它会伴随这个请求发送一组首部信息。这些首部信息时一系列描述请求的元数据（meatadata）。首部信息用来声明一个请求是 GET 还是 POST。
     *  AJAX 请求中，发送首部信息的工作可以由 setRequestHeader 完成
     *  参数 header：首部的名字；参数 value：首部的值
     *  如果用 POST 请求向服务器发送数据，需要将”Content-type”的首部设置为”application/x-www-form-urlencoded”。它会告知服务器正在发送数据，并且数据已经符合 URL 编码了。
     *  该方法必须在 open()之后才能调用

var url ="";
    var nameValue = trim(document.form.name.value);
    xhr.open("POST", url);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send("name = " + nameValue );

## 数据格式 ##

*  在服务器端 AJAX 是一门与语言无关的技术。在业务逻辑层使用何种服务器端语言都可以。
 *  从服务器端接受数据的时候，那些数据必须以浏览器能偶理解的格式来发送。服务器端的编程语言只能以如下的 3 种 格式返回数据：  
    
    
     *  XML
     *  JSON（主流）
     *  HTML

### 解析HTML ###

*  HTML 由一些普通文本组成。如果服务器通过 XMLHttpRequest 发送 HTML，文本将存储在 responseText 属性中。
 *  不必从 responseText 属性中读取数据。它已经是希望的格式，可以直接将它插入到页面中。
 *  插入 HTML 代码最简单的方法是更新这个元素的 innerHTML 属性。

*  优点：  
    
    
     *  从服务器端发送的 HTML 代码在浏览器端不需要用 JavaScript 进行解析。
     *  HTML 的可读性好
     *  HTML 代码块与 innerHTML 属性搭配，效率高。
 *  缺点  
    
    
     *  若需要通过 AJAX 更新一片文档的多个部分，HTML 不合适
     *  innerHTML 并非 DOM标准。

### XML ###

*  优点  
    
    
     *  XML 是一种通用的数据格式。
     *  不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记。
     *  利用 DOM 可以完全掌控文档。
 *  缺点  
    
    
     *  如果文档来自于服务器，就必须得保证文档含有正确的首部信息。若文档类型不正确，那么 responseXML 的值将是空。
     *  当浏览器接收到长的 XML 文件后，DOM解析可能会很复杂

### JSON ###

*  JSON（JavaScript Object Notation）一种简单的数据格式，比 XML 更轻巧。JSON 是 JavaScript 原生格式，这意味着在 JavaScript 中处理JSON 数据不需要任何特殊的 API 或工具包。
 *  JSON 的规则很简单：对象是一个无序的”’名称/值’对”集合。一个对象以”\{“开始，”\}”结束。每个“名称”后跟一个”:”；”’名称/值’对”之间使用”,”分隔。

*  优点  
    
    
     *  作为一种数据传输格式，JSON 与 XML 很相似，但是它更加灵巧
     *  JSON 不需要从服务器端发送含有特定内容类型的首部信息
 *  缺点  
    
    
     *  语法过于严谨
     *  代码不易读
     *  eval 函数存在风险