今回は、Ajax の簡単な歴史と基本的な使い方について説明します。Ajax の簡単な歴史と使い方を理解するための notes とは何ですか。実際の事例を見てみましょう。
過去数年間で、JavaScript は偶然に思いついたものから、ウェブ上で最も重要な言語になりました。このテクノロジーの大幅な進歩を促進した要因が 1 つあるとすれば、それは Ajax ベースのアプリケーション開発の出現です。このトピックに関する技術を開発してください
つまり、Ajax は、Web サイトまたはアプリケーションが、ページを更新せずにリアルタイム データを使用してインターフェイスを更新することをサポートする開発技術です。この機能により、よりスムーズでデスクトップに近いユーザー エクスペリエンスが実現されます。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® チームがインターネットに貢献した最高の贈り物でもあります。 本当です。 XHR は 2000 年に IE 5 で初めて登場しました。元々は Alex Hopmann によって作成された Microsoft ® ActiveX ® コントロールであった XHR は、Microsoft Outlook ® Web Access と連動するように作成され、高レベル (当時) のフロントエンド インターフェイスと Microsoft Exchange Server の間の対話に対処することを目的としていました。 Microsoft のパッケージは厳密には「質素」ではありませんでしたが、XHR は初期製品の範囲をはるかに超えて進化し、後にすべての主要なブラウザーに実装され、さらには W3C 標準として採用されました。パイオニア
Microsoft に加えて、プロトタイプ Ajax の分野に参入し始めた企業があります。多くの企業がこれらのテクノロジーを実験していますが、特に言及する価値のある 2 つは、Ajax 開発の興味深い脚注であり、よく引用されるため、もう 1 つは、これらのテクノロジーを実際に民主化したのはインターネットの巨人であるためです。Oddpost
Oddpost は、2002 年に発売された高度な Web ベースの電子メール クライアントです。現在よく知られているパターンを多く利用しています。デザインとインタラクションという点では、デスクトップ メール クライアントが思い浮かびます。 Oddpost は内部的に、開発者が DataPack と呼ぶ概念を使用して、小さなデータの塊をサーバーからブラウザに転送します。これは新しい体験をもたらします。 Oddpost がついに Yahoo! で使用されました。 Yahoo! Mail の改訂版の基礎となるために取得されました。Google マップ、Google サジェスト、Gmail、および重要な記事
本当の変化は数年後、Gmail、Google サジェスト、Google マップ サービスで始まりました。これら 3 つの Ajax テクノロジの使用により、Web 開発の世界は賑わっています。その応答性と対話性は、一般の人にとっては新しいものです。新しい Google アプリはすぐに話題を呼んでいます。 このことを知っている人はあまりいませんが、Web 開発コミュニティからの反応は非常に暴力的でした。当時、人々は Web アプリケーション開発に新しくてエキサイティングな何かがあることを知っていました。しかし、この「内容」は長らく不明でした。 人々が必要としているのは、これを明確にする記事です。 2005 年 2 月 18 日、Adaptive Path の共同創設者兼社長である Jesse James Garrett は、「Ajax: Web アプリケーションへの新しいアプローチ」というタイトルの記事を書きました。この記事では、Gmail や Google マップなど、人々が常に使用している Web アプリケーションの設計と開発のトレンドについて説明します。彼はこの傾向を「ウェブ開発における根本的な変化を引き起こす可能性がある」と呼んでいます彼はこのパターンに名前も付けました。これは重要な瞬間でした。なぜなら、この瞬間から人々はこの新しいトレンドに注目し始め、Web 開発の世界での最新の変化について話すときに誰もが (専門家でなくても) このことに言及したからです。この記事では、彼は Ajax のテクノロジーを次のように紹介しています:
Ajax の定義
Ajax はテクノロジーではありません。実際には、それぞれに独自の特徴を持ついくつかのテクノロジーが新しく強力な方法で組み合わされたものです。 Ajax には以下が含まれます:
XHTML と CSS を使用した標準ベースのレンダリング
ドキュメント オブジェクト モデルを使用した動的表示と対話
XML と XSLT を使用したデータ交換と操作
XMLHttpRequest Ret を使用した非同期データリーブ
それらを結合する JavaScript
この技術的な説明はやや古いですが、基本的なパターンはまだそのままです: HTML と CSS はデータとスタイルをレンダリングし、DOM と関連メソッドはリアルタイムのページ更新をサポートし、XHR は通信をサポートしますサーバーと連携し、JavaScript が全体の表示を調整します。
この記事の全体的な影響は比較的大きいです。強烈な誇大広告が未開発の創造性やエネルギーと衝突して革命を起こすのは、まれな機会です。 Ajax は世界中の新世代のスタートアップ企業に採用されており、Web 開発パラダイムの最前線へと急速に移行しています。 Ajax は、マーケティング戦略を求める漠然としたトレンドから、現代の Web デザインの開発における重要なコンポーネントになりました。
ライブラリ
Ajax ベースの開発の主な原動力は、いくつかのフル機能の JavaScript ライブラリの進化と改善です。経験豊富な JavaScript 開発者を除けば、Ajax の基礎となるテクノロジーを真に理解している人はほとんどいません。そのため、DHTML の時代でも、ほとんどのブラウザーの操作やアニメーションは些細な過剰に対処するために工夫されていましたが、Ajax ベースのサイト (ゼロから作成できる) の需要と人材は、経験豊富な JavaScript エンジニアの数が限られていたため制限されていました。このようなインターフェースにより、供給間のギャップがさらに拡大します。 Prototype、Dojo、jQuery などのライブラリは、すぐに使用できるインタラクションとアニメーションを提供し、ブラウザー間の違いを減らし、コア JavaScript API の欠点の実装を改善することで、このギャップを大規模に埋めるのに役立ちます。
非同期 JavaScript とその他の JavaScript (オブジェクト記法)
オリジナルのポスト時代から現代に至るまでの Ajax 分野における最大の変化は、JavaScript ベースのデータ転送である JSON の導入です。 JSON は、(XML で使用される不格好な DOM ベースのメソッドやプロパティとは対照的に) より小さいファイル サイズと簡単なネイティブ JavaScript アクセスを提供するため、データ転送用に開発者によってすぐに採用されました。 JSON は、最近完成した ECMAScript 仕様のバージョン 5 に組み込まれました。
JSON+Padding
元の JSON 提案に対する大幅な拡張機能は、JSON+Padding (JSONP) です。ご覧のとおり、XMLHttpRequest オブジェクトには厳格なセキュリティ モデルがあり、要求されたページと同じドメイン名とプロトコルを使用した通信のみをサポートします。 JSONP は、JSON 応答をユーザー定義またはシステム提供のコールバック関数にラップすることにより、このクロスオリジン制限に対するより柔軟なアプローチを作成します。この方法では、JSON スクリプトをドキュメントに追加した後、即座にデータにアクセスできます。このパターンは現在では一般的であり、多くの大規模な Web サービスでは、マッシュアップやその他のコンテンツ シンジケーションをサポートするためにこの手法を採用できます。
その人気にもかかわらず、JSONP には悪意のあるコードの侵入を容易にする明らかな脆弱性があります。サードパーティからのスクリプト タグの挿入により、すべてのコンテンツがホスト ページ上で実行されるようになるため、データ プロバイダーが侵害された場合、またはホスト ページがページに挿入されたリソースを認識していない場合、悪意のある侵害の可能性が想像できます。
Ajax の歴史について少し理解できたところで、魔法を現実にするテクニックを見ていきましょう。ただし、一般的な JavaScript API の書籍は図書館で広く入手可能であり、基礎となる仕組みを理解することは、経験豊富な開発者にとっても有益です。
XMLHttpRequest API と機能
サーバーからデータを返すために他の技術を使用することもできますが、XHR は依然としてほとんどの Ajax インタラクションの中核です。 XHR インタラクションは、リクエストとレスポンスの 2 つの部分で構成されます。以下、一つずつご紹介していきます。
セキュリティモデル
前述したように、元の XMLHttpRequest オブジェクトには厳格なセキュリティ モデルがあります。この同一オリジン ポリシーでは、要求されたページと同じホスト、プロトコル、ポートを使用した通信のみが許可されます。これは、異なるドメイン (example.com と example2.com)、異なるホスト (my.example.com と www.example.com)、異なるプロトコル (http://example.com と https://example.com) の通信を意味します。 between は禁止されており、エラー メッセージが生成されます。
XHR オブジェクトの 2 番目のバージョンの開発により、新しいクロスドメイン リクエスト プロトコルの作業が W3C で完了します。現在、ブラウザ ベンダーによって大量の実装作業が完了しています。 Internet Explorer 8 以降および Mozilla でのみ利用可能 Firefox 3.5 以降、Apple Safari 4 以降、および Google Chrome で利用可能。開発は遅くなりましたが、特定の「Origin」ヘッダーがリクエストで依然として送信されます:
Origin: http://example.comOrigin: http://example.com
并将服务器配置为发送回一个匹配的 “Access-Control-Allow-Origin” 报头：
Access-Control-Allow-Origin: :http://example.com
Access-Control-Allow-Origin: :http://example.comドメイン間の双方向通信に XHR オブジェクトを使用できるようになりました。
Requestレスポンス レスポンスには、いくつかの
readyState
一般的な 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>
/*
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 の簡単な歴史と基本的な使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
