Ajax簡史與基本用法

php中世界最好的语言原創: 2018-03-31 13:33:311241瀏覽

这次给大家带来Ajax简史与基本用法，了解Ajax简史与使用的注意事项有哪些，下面就是实战案例，一起来看一下。

在过去几年，JavaScript 已从让人事后才想起的偶然对象变成最重要的 Web 语言。如果要指出一个推动这项技术显著进步的因素，那就是基于 Ajax 的应用程序开发的出现。

开发关于该主题的技术

简言之，Ajax 是一种开发技术，支持网站或应用程序，使用实时数据更新界面，无需页面刷新。该功能创建了一种更为流畅且更具桌面风格的用户体验。

Ajax 简史

Ajax 的发展历史类似于其他许多一夜成名的技术。尽管 Ajax 似乎不知从何而来，但实际上，它已经存在很长一段时间了。多年的努力使其遍布 Web，在 Ajax 旗帜的带领下创建工具和模式。纵观最初网络泡沫的 DHTML 时代，以及网络公司破产后的黑暗年代，世界各地的开发人员解禁了 JavaScript 的超能力，将这个崭新的、令人激动的应用程序模式引人 Web。

XMLHttpRequest

最早最重要的 Ajax 谜题是 XMLHttpRequest (XHR) API。XHR 是一种用于在 Web 浏览器和 Web 服务器间传输数据消息的 JavaScript API。它支持浏览器使用 HTTP POST（将数据传到服务器）或 GET 请求（从后台服务器访问数据）。该 API 是大多数 Ajax 交互的核心，也是现代 Web 开发的一项基本技术。

它也是 Microsoft® Internet Explorer® 团队贡献给 Internet 的最好礼物。

这是真的。早在 2000 年，XHR 最先出现于 IE 5 中。最初是由 Alex Hopmann 编写的 Microsoft ® ActiveX® 控件，创建 XHR 是为了处理 Microsoft Outlook® Web Access，旨在解决高级（当时）前端接口和 Microsoft Exchange Server 间的交互。

尽管 Microsoft 的软件包不完全算是 “出身贫贱”，但 XHR 的发展远远超出了最初产品的范围，后来在各个主要浏览器中得以实现，甚至作为一种 W3C 标准被采用。

先锋

除了 Microsoft 之外，还有其他一些企业开始进军原型 Ajax 领域。许多企业都开始尝试使用这些技术，其中有两个特别值得一提 — 一个是因为它是一个有趣且经常引用的 Ajax 开发脚注，另一个是因为它是真正将这些技术大众化的 Internet 巨头。

Oddpost

Oddpost 是 2002 年推出的基于 Web 的高级邮件客户端。它利用许多目前人们所熟知的模式。在设计和交互方面，人们会想起桌面邮件客户端。在系统内部，Oddpost 使用开发人员称为 DataPacks 的概念将小块数据从服务器传输到浏览器。这将带来一种全新体验。

Oddpost 最后被 Yahoo！收购，成为 Yahoo! Mail 修订版的基础。

Google Maps、Google Suggest、Gmail 以及一篇重要文章

真正的变化开始于几年后的 Gmail、Google Suggest 和 Google Maps 服务。这三项 Ajax 技术的使用使得 Web 开发界沸腾起来。它的响应能力和交互性对公众而言是全新的。新的 Google 应用程序很快引起了轰动。

虽然了解它的人并不是很多，但 Web 开发界对此反响非常剧烈。当时，人们知道在 Web 应用程序开发中出现了一些新的、激动人心的内容。但在很长一段时期内，这个 “内容” 一度模糊不清。

人们需要的是一篇让该内容明朗化的文章。

2005 年 2 月 18 日，Adaptive Path 的共同创立者兼总裁 Jesse James Garrett 撰写了一篇题为 “Ajax: A New Approach to Web Applications” 的文章。在这篇文章中，他介绍了 Web 应用程序设计开发的趋势，诸如 Gmail 和 Google Maps 这类应用程序人们一直都在使用。他称这种趋势为 “可能引发 Web 开发的根本性变革。”

他也為這種模式命名，這是一個重要的時刻，因為從這一刻起人們開始重點關注這一新趨勢，每個人（甚至是非專業人員）在談到Web 開發界近期最新變化時都會提到它。在本文中，他是這樣介紹 Ajax 這種技術的：

定義 Ajax

Ajax 不是一種技術。實際上是幾種技術，每種技術都各有其特色，這些技術以全新強大方式融合在一起。 Ajax 包含：

使用XHTML 和CSS 基於標準的呈現
使用文件物件模型的動態顯示和互動
#使用XML 和XSLT 的資料交換和操作
使用XMLHttpRequest 的非同步資料檢索
將它們綁定到一起的JavaScript

雖然這個技術說明從某種程度上講有些過時了，但基本模式依然是完整的：HTML 和CSS 呈現資料和樣式，DOM 和相關方法支持頁面即時更新，XHR 支援與伺服器通信，JavaScript 安排整體顯示。

本文的整體影響比較大。密集的大肆宣傳與亟待開發的創造力和能源相碰撞，掀起了一場革命，這實屬難得一見。由於 Ajax 被世界性的新一代新創公司所採用，它迅速走向 Web 開發範式的前沿。 Ajax 從一個尋求市場策略的模糊趨勢一躍成為現代Web 設計的開發的關鍵組成部分。

函式庫

基於 Ajax 開發的一個關鍵驅動因素是幾個全功能 JavaScript 函式庫的演進和改進。除了經驗豐富的 JavaScript 開發人員，很少人能夠真正理解 Ajax 底層技術。因此，即使在DHTML 時代，雖然研究出了大部分瀏覽器互動和動畫來應對瑣碎的超額，但數量有限的幾個經驗豐富的JavaScript 工程師導致基於Ajax 的網站需求和人才（他們可以從零開始編寫這樣一個界面）供應之間的差距的進一步擴大。透過提供隨時可用的互動和動畫，減少跨瀏覽器差異和改進核心 JavaScript API 缺點的實現，Prototype、Dojo 和 jQuery 這類程式庫有助於大規模地填補這一空白。

非同步JavaScript 以及更多JavaScript（物件表示法）

#從原始post 時代到現代，Ajax 領域的最大改變是引入了JSON，JSON 是一種基於JavaScript 的資料傳輸。提供更小的檔案和更便利的原生 JavaScript 存取（與 XML 使用的笨重的基於 DOM 的方法和屬性截然相反），JSON 很快就被開發人員用於進行資料傳輸。現在 JSON 已列入近期完成的 ECMAScript 規範的第 5 版。

JSON+Padding

原始 JSON 提議的一個顯著增強是 JSON+Padding (JSONP)。如您所看到的，XMLHttpRequest 物件有一個嚴格的安全模型，只支援使用與請求頁面相同的網域和協定進行通訊。 JSONP 在這個跨域限制上創建了一種更靈活的方法，將 JSON 回應包裝到一個用戶定義或系統提供的回呼函數。將 JSON 腳本新增至文件之後，該方法將會提供即時資料存取。該模式現在很常見，對於許多較大的 Web 服務，可以採用該實踐來支援混搭應用程式和其他內容聯合。

儘管 JSONP 非常流行，但它有一個明顯的便於惡意程式碼入侵的漏洞。因為來自第三方的腳本標記注入允許所有內容在主機頁面上運行，所以，當資料提供者受到威脅時，或者主機頁面沒有留意插入頁面的資源時，惡意入侵潛能將會令人想像。

現在，您已經對 Ajax 歷史有所了解，接下來我們將開始探討將魔法變成現實的技術。儘管，一般的 JavaScript API 書籍在圖書館中隨處可見，但即使對於經驗豐富的開發人員，了解底層工作原理仍然是具有啟發意義的。

XMLHttpRequest API 和特性

#儘管可以使用其他技術從伺服器傳回數據，但是 XHR 仍然是大多數 Ajax 互動的核心。 XHR 互動由兩部分組成：請求和回應。下面我們將逐一介紹。

安全模型

如上所提到的，原始 XMLHttpRequest 物件有一個嚴格的安全模型。這個同源策略只允許使用與請求頁面相同的主機、協定和連接埠進行通訊。這意味著不同網域（example.com 和example2.com）、不同主機（my.example.com 和www.example.com）、不同協定（http://example.com 和https://example.com）之間的通訊是禁止的，這會產生錯誤訊息。

隨著第二版XHR 物件的開發，新的跨域請求協定工作將在W3C 中完成，大量實作工作由瀏覽器供應商完成，針對跨網域請求的機制目前僅在Internet Explorer 8+、Mozilla Firefox 3.5+、Apple Safari 4+ 以及Google Chrome 中提供。儘管發展已經放緩，但仍在請求中發送了一個特定“Origin” 報頭：

#Origin: http://example.com

並將伺服器設定為傳回一個符合的「Access-Control-Allow-Origin」標頭：

Access-Control-Allow-Origin: :http://example.com

#現在，可以使用XHR 物件跨域進行雙向通訊了。

請求

請求端有4 種方法：

open() 發起伺服器連接。可以帶參數：

method。將要使用的 HTTP 方法（可以是 POST 或 GET）
url。請求的 URL
async。可選布林參數，表示請求是否非同步（此參數的預設值為 Ture）
user。一個可選用戶名，供認證使用
password。一個可選密碼，供認證使用

setRequestHeader() 設定請求標頭，帶有兩個參數：標頭及其相關值
##send() 發送請求。此方法附有一個可選參數，包含 POST 請求的正文
abort() 中止請求

##回應回應也有幾個

屬性和方法

：

##readyState

實例化完成後，XMLHttpRequest 物件有5 種狀態，使用下列值表示：

0: UNSENT。表示物件已建立

1: OPENED。表示 open() 方法已成功呼叫
2: HEADERS_RECEIVED。表示來自請求的標頭已收到
3: LOADING。表示回應標頭已下載
4: DONE。表示請求完成，但並沒有指出請求是否成功或傳回預期值（查詢回應和標準HTTP 標頭來估計請求的健康狀況）

一個通用JavaScript範例

在我們進一步介紹流行函式庫之前，先透過幾個原始的JavaScript 範例來了解正在運用的核心技術。

範例 HTML 文件

<!doctype html>
<html lang="en"> 
<head>
 <meta charset="utf-8">
 <title>Simple Ajax Example</title>
 <meta name="author" content="Rob Larsen">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="_assets/css/style.css" rel="external nofollow" >
</head>
<body>
 <p id="main">
  <h1>Simple Ajax Example</h1>
  <p><strong id="activate">Click here</strong> 
   and content will be appended after this paragraph</p>
 </p>
 <script src="_assets/js/ajax.js"></script>
</body>
</html>

以下舉例說明了一個簡單 GET 請求，該請求將處理 responseXML。這是該技術發展早期的典型 Ajax 交互作用。它可以在所有現代瀏覽器以及 Internet Explorer 7 和 8 中運作。

一個基本 Ajax 函數

/*
Here's a basic Ajax function
*/
var ajax = function( opts ) {
/*
We have an options argument. 
In addition, we want to have some smart defaults.
*/
 opts = {
  //Is it a Get or Post
  type: opts.type || "POST",
  //What URL are we going to hit?
  url: opts.url || "",
  //What do we do with the data
  onSuccess: opts.onSuccess || function(){},
  //what kind of data do we expect?
  data: opts.data || "xml"
 };
//create a new XMLHttpRequest 
 var xhr = new XMLHttpRequest();
//Open the connection to the server 
 xhr.open(opts.type, opts.url, true);
/*
When the ready state changes
fire this function
*/
 xhr.onreadystatechange = function(){
 //readyState 4 is "done" 
 if ( xhr.readyState == 4 ) {
 /*
 do some simple data processing
 There are two components to the returned object-
 responseXML and responseText. 
 Depending on what we're doing we'll need one or the other.
 */
 switch (opts.data){
  case "json":
   //json is text
   opts.onSuccess(xhr.responseText);
   break;
  case "xml":
   //XML retains the structure/DOM 
   //It's passed in whole. 
   opts.onSuccess(xhr.responseXML);
   break;
  default : 
   //Everything else will get TXT
   opts.onSuccess(xhr.responseText);;
  }   
 }
 };
 //close the connection
 xhr.send(null);
}
//here's our simple function
var ajaxSample = function(e){
//Simple callback adds some text to the page 
 var callback = function( data ) {
 document.getElementById("main").innerHTML += 
  "<p>"
  +data.getElementsByTagName("data")[0].getAttribute("value")
  +"</p>";
}
//And here's our Ajax call 
 ajax({
  type: "GET",
  url: "_assets/data/ajax-1.xml",
  onSuccess: callback,
  data : "xml"
 })
//prevent the default action 
 e.preventDefault();
}
//Wire everything up
document.getElementById("activate").addEventListener("click", ajaxSample, false);

在下面的例子中可以看到活动的原始 ActiveX 对象。如果没有本机实现，可以在不同版本的 Internet Explorer 中使用 Try... Catch 块来循环遍历对象的潜在引用。这个完整的跨浏览器实现与 Internet Explorer 是兼容的，甚至可以与古老的 Internet Explorer 5 兼容。

一个跨浏览器 Ajax 脚本

var ajax = function( opts ) {
 opts = {
 type: opts.type || "POST",
 url: opts.url || "",
 onSuccess: opts.onSuccess || function(){},
 data: opts.data || "xml"
 };
/*
Support for the original ActiveX object in older versions of Internet Explorer
This works all the way back to IE5.
*/
 if ( typeof XMLHttpRequest == "undefined" ) {
 XMLHttpRequest = function () {
  try { 
   return new ActiveXObject("Msxml2.XMLHTTP.6.0"); 
  }
  catch (e) {}
  try { 
   return new ActiveXObject("Msxml2.XMLHTTP.3.0"); 
  }
  catch (e) {}
  try { 
   return new ActiveXObject("Msxml2.XMLHTTP"); 
  }
  catch (e) {}
  throw new Error("No XMLHttpRequest.");
 };
 }
 var xhr = new XMLHttpRequest();
 xhr.open(opts.type, opts.url, true);
 xhr.onreadystatechange = function(){
 if ( xhr.readyState == 4 ) {
  switch (opts.data){
  case "json":
   opts.onSuccess(xhr.responseText);
   break;
  case "xml":
   opts.onSuccess(xhr.responseXML);
   break;
  default : 
   opts.onSuccess(xhr.responseText);;
  }   
 }
 };
 xhr.send(null);
}
var ajaxSample = function(e){
 var callback = function( data ) {
 document.getElementById("main").innerHTML += "<p>"
  +data.getElementsByTagName("data")[0].getAttribute("value")
  +"</p>";
 }
 ajax({
 type: "GET",
 url: "_assets/data/ajax-1.xml",
 onSuccess: callback,
 data: "xml"
 })
 e.preventDefault();
}
document.getElementById("activate").addEventListener("click", ajaxSample, false);

下面展示了现今更为常见的模式：采用 JSON 格式的 responseText，并将其解析成本机的 JavaScript 对象。这段代码演示了一个较为简单的 JSON 数据处理方法。为什么众多开发人员都选择使用 JSON 来传输数据，将该清单与操作 XML 数据所需的偶尔间接且冗长的方法进行比较，答案显而易见。

使用 JSON

var ajax = function( opts ) {
 opts = {
 type: opts.type || "POST",
 url: opts.url || "",
 onSuccess: opts.onSuccess || function(){},
 data: opts.data || "xml"
 };
 var xhr = new XMLHttpRequest();
 xhr.open(opts.type, opts.url, true);
 xhr.onreadystatechange = function(){
 if ( xhr.readyState == 4 ) {
  switch (opt.sdata){
  case "json":
   opt.onSuccess(xhr.responseText);
   break;
  case "xml":
   opt.onSuccess(xhr.responseXML);
   break;
  default : 
   opt.onSuccess(xhr.responseText);;
  }   
 }
 };
 xhr.send(null);
}
var jsonSample = function(e){
 var callback = function( data ) {
 //here, the data is actually a string
 //we use JSON.parse to turn it into an object
 data = JSON.parse(data);
 /*
 we can then use regular JavaScript object references
 to get at our data. 
 */
 document.getElementById("main").innerHTML += "<p>"
  + data.sample.txt 
  +"</p>";
 }
 ajax({
 type: "GET",
 url: "_assets/data/json-1.json",
 onSuccess: callback,
 data : "json"
 })
 e.preventDefault();
}
document.getElementById("activate").addEventListener("click", jsonSample, false);

下面例子都使用了 JSON 数据。

提供了一个简单的 JSONP 示例。正如您所看到的，通过使用一个回调参数，可以避免将 XHR 完全地简单附加到脚本中。返回给回调，并在可执行 JavaScript 代码中包装数据对象。

JSONP 数据

var callback = function( data ) {
 document.getElementById("main").innerHTML += "<p>"+ data.sample.txt +"</p>";
}
var jsonpSample = function(e){
//create a script element
 var jsonp = document.createElement("script");
//give it a source with the callback name appended in the query string
 jsonp.src= "_assets/data/jsonp.do?callback=callback";
//add it to the doc
 document.body.appendChild(jsonp);
 e.preventDefault();
}
//wire up the event
document.getElementById("activate").addEventListener("click", jsonpSample, false);

库示例

对于大多数开发人员来说，只有进行学术研究的人才会对 Ajax 请求的本质感兴趣。大多数实际工作是在一个或多个 JavaScript 库中完成。除了修补跨浏览器不兼容性，这些库都提供了构建于基础 API 之上的特性。下列示例展示了 3 个流行库中的 GET 和 POST 示例来介绍不同的 API。

jQuery

让我们从流行 jQuery 库开始举例说明。jQuery 的 Ajax 函数最近进行了重写，将几个高级功能包含在内，这不是术语本文的讨论范围，但是所有 jQuery Ajax 请求的常见功能都以传递给该函数的配置对象的参数形式存在。另外还要注意的是，jQuery 有几个便利的方法，比如 $.post 和$.get，这是常见请求配置的快捷键。
展示了使用 jQuery 获取数据的简要代码。

一个 jQuery GET 请求

/*
callback is a simple function that will be run
when the data is returned from the server
*/
var callback = function( data ) {
/* 
it just adds a little bit of text to the document
data is the JSON object returned by the server. 
*/
 $("#main").append($("<p />").text(data.sample.txt));
}
/*
Wire up the ajax call to this click event
*/
$("#activate").click(
 function(){
//call $.ajax with a configuration object 
 $.ajax({
//it's just a get request
  type: 'get',
//we're looking for this URL 
  url: '_assets/data/json-1.json',
//Our cool callback function
  success: callback,
//it's going to be JSON 
  dataType: "json"
 })
 } 
)

下面演示了如何发布和检索简单 JSON 对象。需要注意的是，这里使用了原生 JSON 对象来分析输入数据。jQuery 文档明确提及需要通过 JSON2.js 脚本增加不受支持的浏览器。

提供一个显式错误句柄使得成功请求和失败请求都能得到优雅的处理。jQuery 的错误状态带有 3 个参数，包括 XHR 对象本身，这支持健壮的错误处理。

一个 jQuery POST

/*
this is the object we're going to post
*/
var myMessages = {
 positive : "Today is a good day",
 negative : "Today stinks",
 meh : "meh"
}
var callback = function( data ) {
 $("#main").append($("<p />").text(data.positive));
}
/*
Setting up a simple error handler.
It doesn't do much. 
It's just nice to illustrate error handling.
*/
var errorHandler = function( xhr, textStatus, errorThrown ){
 throw new Error("There was an error. The error status was " + textStatus );
}
/*
Here's where the action happens.
Attach an event to out simple button.
*/
$("#activate").click(
 function(){
//call $.ajax with a configuration object 
  $.ajax({
   //we're sending data to the server  
   type: 'POST',
   //this is our URL
   url: '_assets/data/post-responder.do',
   /*
   This is our data, JSON stringified
   jQuery expects to use native JSON
   or JSON2.js in unsupported browsers
   */
   data: JSON.stringify(myMessages),
   //Here's where we set up our callback function
   success: callback,
   //The data expected from the server
   dataType: "json",
   //And our simple error handler
   error : errorHandler
   }
  )
 }
);

Dojo

Dojo 不仅仅是下列示例中演示的简单 Ajax 请求/DOM 操作。它实际上是为硬核应用程序开发而构建的。这就是说，以这种方式查看 API 仍然是值得期待的。

注意两个独立的 “Ajax” 函数：xhrGet 和 xhrPost。另外还要注意的是，这里使用了 Dojo JSON 实用函数来分析输入数据。下面展示了一个 GET 示例。

一个 Dojo GET 请求

var callback = function( data ) {
//note the document.getelementById alias
 dojo.byId("main").innerHTML += "<p>"+ data.sample.txt +"</p>";
}
var getData = function(){
//xhrGet is for get requests
dojo.xhrGet({
 //the URL of the request
 url: "_assets/data/json-1.json",
 //Handle the result as JSON data
 handleAs: "json",
 //The success handler
 load: callback
});
}
// Use connect to attach events
dojo.connect( dojo.byId("activate"), "onclick", getData );

下面展示了一个 Dojo POST，包含一个错误句柄的配置。

Dojo POST

var myMessages = {
 positive : "Today is a good day",
 negative : "Today stinks",
 meh : "meh"
}
var callback = function( data ) {
 dojo.byId("main").innerHTML += "<p>"+ data.positive +"</p>";
}
var errorHandler = function(){
 throw new Error("We dun goofed.")
}
var postData = function(){
 //not surprisingly xhrPost is for POST
 dojo.xhrPost({
  // The URL of the request
  url: "_assets/data/post-responder.do",
  //This will be JSON
  handleAs: "json",
  //Set the headers properly
  headers: { "Content-Type": "application/json; charset=uft-8"},
  //Use Dojo's JSON utility
  postData: dojo.toJson(myMessages),
  // The success handler
  load: callback,
  // The error handler
  error: errorHandler
 });
}
// Use connect to attach events
dojo.connect( dojo.byId("activate"), "onclick", postData );

Yahoo! 用户界面 (YUI)

YUI 库提供一个与前面两个略有不同的模式。首先，YUI 返回整个 XHR 对象，不仅解析数据，还允许更准确地操作返回数据和整个请求的可见性。这也意味着开发人员需要了解 XHR 对象的来龙去脉。另外，这里还展示了 YUI 模块加载程序 use() 的使用，需要注意的是，即使与 Ajax 没有直接联系（除了加载 io 模块之外）。中有一个 YUI 模块列表，还有一个用作参数的回调函数。一旦运行，就可以从 Yahoo! Content Delivery Network (CDN) 下载数据包，Yahoo! Content Delivery Network (CDN) 包含单个基于 CDN 的下载包中所需的所有模块。

一个 YUI GET 请求

// Create a new YUI instance and populate it with the required modules.
YUI().use('node','event', 'json', 'io', function (Y) {
 var callback = function( id, xhr ) {
  var data = Y.JSON.parse(xhr.responseText);
  Y.one('#main').append("<p>" 
   + data.sample.txt 
   +"</p>");
 }
 Y.one("#activate").on('click',
  function(){
   Y.io( '_assets/data/json-1.json', {
   //This is actually the default
   method: 'get',
   on:  {success: callback}
   })
  } 
 )
});

下面中的 POST 示例中呈现的一个有趣的样式风格将所有响应函数进一步分割成 on 对象。

YUI POST

YUI().use('node','event', 'json', 'io', function (Y) {
 var myMessages = {
  positive : "Today is a good day",
  negative : "Today stinks",
  meh : "meh"
 } 
 var callback = function( id, xhr ) {
  var data = Y.JSON.parse(xhr.responseText);
  Y.one('#main').append("<p>" 
   + data.positive 
   +"</p>");
 }
 var errorHandler = function( id, xhr){
  throw new Error("There was an error. The error status was " 
   + xhr.statusText 
   +".")
 }
 Y.one("#activate").on('click',
  function(){
   Y.io( '_assets/data/post-responder.do', {
   method: 'post',
   //Use the Y.JSON utility to convert messages to a string
   data : Y.JSON.stringify(myMessages),
   //All response methods are encapsulated in
   //the on object
   on:  {success: callback,
   failure: errorHandler }
   })
  } 
 )
});

正如您所看到的，基本模式在多数清单中都是一样的。除了支持 ActiveX 控件和 JSONP 示例之外，它们基本上基于同一原理，只是在核心 JavaScript 交互的顶层具有不同的 API 变化。

请注意，除了这里列出的基本交互之外，所有这些库还提供大量特性。尽管您可以做的大多数 Ajax 工作可以通过简单的 GET 和 POST 请求来处理，但让自己熟悉所选择的库中的高级特性非常有用。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Ajax簡史與基本用法

相關文章