今回は、Ajaxの原理やメリット・デメリット、そしてAjaxを利用する際の注意点について詳しく解説していきます。実際の事例を交えて見ていきましょう。
1. ajax テクノロジーの背景
ajax テクノロジーの人気が、Google Earth や Google サジェストなどの Ajax テクノロジーの普及のおかげであることは否定できません。そして人気のajaxを生み出したgmail。これは Microsoft にとっても非常に当惑することになります。なぜなら、Microsoft は 1997 年の時点で ajax の主要なテクノロジを発明しており、1999 年に IE5 がリリースされたとき、XmlHttpRequest オブジェクトのサポートを開始しており、Microsoft はすでに Ajax を使用し始めていたからです。 MSDN Web サイト メニューの一部のアプリケーションなど、一部の製品で使用されています。残念ながら、何らかの理由で、Microsoft は ajax の中核技術を発明した後、その可能性を認識せず、開発、推進することなく、棚上げしてしまいました。私は個人的にこれを非常に奇妙に感じています。なぜなら、Microsoft のリソースと戦略的ビジョンがあれば、Ajax テクノロジの見通しが見えないはずがないからです。唯一の説明は、当時の主要な競合相手である Netscape の消滅により、Microsoft が麻痺して遅くなったということかもしれません。結局のところ、マイクロソフトに対するIBMの戦略的ミスなど、巨人も昼寝をしているのです。現在の競合他社である Google が Ajax において主導的地位を確立したのはこの間違いでした。実際、Ajax テクノロジにおける Google の現在のリーダーシップは、後で Ajax の欠陥について説明するときに説明されます。現在、Microsoft もこの問題を認識しており、たとえば、独自の ajax フレームワーク アトラスを立ち上げ、.NET2.0 で非同期コールバックを実装するためのインターフェイスも提供しています。 ICallBack インターフェイス。では、なぜ Microsoft は ajax における遅れについてこれほど神経質になっているのでしょうか?ここで、ajax テクノロジーの背後にある深い意味を分析してみましょう。
2. ajax テクノロジーの重要性
私たちは日常の開発において多かれ少なかれ ajax にさらされたり、適用されたりしていますが、ajax テクノロジーの重要性に関して最も注目しているのは間違いなくユーザーエクスペリエンスの向上。しかし、コンピューターとインターネットの将来の発展傾向を組み合わせると、ajax テクノロジーがいくつかの面でこの傾向を代表していることがわかります。なぜこのように言うのですか？コンピューターの出現以来、デスクトップ ソフトウェアが常に絶対的な支配的な地位を占めてきたことはわかっていますが、インターネットの出現と成功により、これらすべてに微妙な変化が生じています。かなりの数の人が、遅かれ早かれ、データとコンピュータ ソフトウェアはデスクトップからインターネットに移行すると信じています。言い換えれば、将来のコンピューターは、かさばるハードドライブを放棄し、インターネットから直接データやサービスを取得するようになるかもしれません。私が大学にいたとき、ある教授が授業をしていたときに、そのようなシナリオを想像していたのを覚えています。コンピュータのデスクトップには冗長なソフトウェアやプログラムはなくなり、IE は 1 つだけになります。この日はまだ遠いようで、解決すべき問題はまだたくさんありますが、これは解決策ではないと思います。夢ですが、遅かれ早かれ実現する現実です。そうですね、主な問題は、インターネット接続が不安定であるということです。では、ajax は、あまり問題を解決しません。問題を解決するだけで、問題を隠しているだけで、サーバーとクライアントの間のバッファとして機能し、サービスが中断されていないとユーザーを騙します。正確に言うと、ajax はサーバーからのデータのダウンロード速度を向上させるものではなく、待ち時間のイライラを軽減するだけです。しかし、これだけでも大きな影響と衝撃を与えるのに十分であり、実際にデスクトップソフトウェアに大きな影響を与えました。この点を説明するために例を使用します。Outlook Express と Gmail は典型的なデスクトップ ソフトウェアであり、後者は ajax によって実装された B/S モードです。実際、後者は徐々に前者を置き換えています。 Gmail は、メールの送受信に関して Outlook Express とほぼ同じ機能を備えており、クライアント プログラムのインストールは必要ありません。これが、Microsoft が Ajax の影響を非常に懸念している主な理由の 1 つであり、つい最近実施した調査では、Microsoft は今後 10 年間の主要な競争相手として Google をみなしていました。もちろん、この変更によってすべてのデスクトップ ソフトウェアが排除されるわけではありません。既存のブラウザーは、PhotoShop などのデスクトップ プログラムのように複雑な画像を処理できません。しかし、その影響と影響を無視することはできません。
3. ajaxの名前について
ajaxの正式名称はAsynchronous JavaScript and XMLで、Asynchronousは非同期を意味し、従来のWeb開発で使用される同期方式とは異なります。
同期と非同期について
非同期送信は文字単位の送信であり、同期送信はビット単位の送信であり、送信の際にその単位のクロックが必要です。受信者と送信者は一致しています。
具体的には、非同期送信ではビットを小さなグループに分割して送信します。一般に、各グループは 8 ビットの文字であり、送信プロセス中に、受信側と送信側のクロックが一致している必要はありません。つまり、送信側は、受信側がいつ到着するかを知らなくても、いつでもこれらのグループを送信できます。最も明白な例の 1 つは、コンピューターのキーボードとホスト間の通信です。キーが押されると、キーボードはユーザーの入力に応じていつでもコードをホストに送信できます。内部ハードウェアは、入力された文字をいつでも受信できる必要があります。これは典型的な非同期送信プロセスです。非同期送信の潜在的な問題は、受信側がデータがいつ到着するかわからないことです。データを検出して応答する前に、最初のビットが通過します。それは、誰かが突然後ろから近づいてきて話しかけてきたときに、反応する時間がなく、最初の数語を聞き逃すようなものです。したがって、情報の各非同期送信は、データが到着したことを受信者に通知するスタート ビットで始まり、送信の最後に受信者に応答、受信、データのキャッシュを行う時間を与えます。は、この情報の送信の終了を示します。慣例により、アイドル状態の (データを送信していない) ラインは実際には 2 進数の 1 を表す信号を伝送します。ステップ送信のスタートビットは信号を0にし、それ以外のビットは送信データの情報に応じて信号を変化させます。最後に、ストップ ビットにより信号が 1 に戻り、次のスタート ビットが到着するまで信号が維持されます。たとえば、キーボードの数字「1」は、8 ビット拡張 ASCII エンコードに従って「00110001」を送信します。同時に、8 ビット ビットの前にスタート ビットとストップ ビットを追加する必要があります。が続きます。
同時に送信されるビットパケットははるかに大きくなります。各文字を独自のスタート ビットとストップ ビットとともに個別に送信するのではなく、それらを結合して一緒に送信します。これらの組み合わせをデータ フレーム、または単にフレームと呼びます。
データ フレームの最初の部分には、一連の同期文字が含まれています。これは、前述の開始ビットと同様のビットの一意の組み合わせであり、フレームが到着したことを受信機に通知するために使用されますが、同時に受信機がサンプリング速度はビットの到着速度と一致するため、送信側と受信側は同期します。
フレームの最後の部分はフレーム終了マーカーです。同期文字と同様に、これも前述のストップ ビットと同様の固有のビット文字列で、次のフレームが始まる前に他に次のデータがないことを示すために使用されます。
同期転送は通常、非同期転送よりもはるかに高速です。受信側は各文字を開始および停止する必要はありません。フレーム同期文字が検出されると、次のデータの到着と同時にそれを受信します。また、同期送信のオーバーヘッドも比較的小さいです。たとえば、一般的なフレームには 500 バイト (つまり 4000 ビット) のデータがあり、その中には 100 ビットのオーバーヘッドしか含まれていない可能性があります。このとき、追加されたビットにより総送信ビット数は 2.5% 増加しますが、これは非同期送信の 25% 増加に比べてはるかに小さいです。データ フレーム内の実際のデータ ビットの数が増加すると、それに応じてオーバーヘッド ビットの割合も減少します。ただし、データ ビットが長くなるほど、データをキャッシュするために必要なバッファが大きくなり、フレームのサイズが制限されます。また、フレームが大きくなるほど、伝送媒体を占有する連続時間が長くなります。極端な場合、これにより他のユーザーが長時間待たされることになります。
この 10 時間の間、水は完全に遮断されませんでしたが、流量は以前よりも大幅に減少しました。 では、あなたであれば、どの方法を選択しますか?どうやら後者のようです。
4. ajax に含まれるテクノロジー
ajax が新しいテクノロジーではなく、いくつかの独自のテクノロジーを組み合わせたものであることは誰もが知っています。以下の技術で構成されています。
1.CSSとXHTMLを使って表現します。
2. インタラクションと動的表示には DOM モデルを使用します。
3. XMLHttpRequest を使用してサーバーと非同期通信します。
4.JavaScriptを使用してバインドして呼び出します。
上記のテクノロジーのうち、XmlHttpRequest オブジェクトを除く他のテクノロジーはすべて Web 標準に基づいており、広く使用されています。XMLHttpRequest はまだ W3C に採用されていませんが、現在ほぼすべての主要なブラウザーがサポートしているため、すでに事実上の標準となっています。それ。
5. Ajax の原理と XmlHttpRequest オブジェクト
Ajax の原理は、単に XmlHttpRequest オブジェクトを通じてサーバーに非同期リクエストを送信し、サーバーからデータを取得し、JavaScript を使用して DOM を操作し、ページを更新することです。この中で最も重要なステップは、サーバーからリクエスト データを取得することです。このプロセスと原理を理解するには、XMLHttpRequest について理解しておく必要があります。
XMLHttpRequest は、IE5 で初めて導入された、ajax のコアメカニズムであり、非同期リクエストをサポートするテクノロジーです。簡単に言うと、JavaScript はユーザーをブロックすることなく、サーバーにリクエストを送信し、応答をタイムリーに処理できます。リフレッシュ効果は得られません。
それでは、XMLHttpRequest から始めて、それがどのように機能するかを見てみましょう。
まず、XMLHttpRequest オブジェクトのプロパティを見てみましょう。
そのプロパティは次のとおりです:
onreadystatechange イベント ハンドラー 各状態変化によってトリガーされるイベントのプログラム。
responseText は、サーバー プロセスからのデータの文字列形式を返します。
responseXML サーバープロセスから返された DOM 互換のドキュメントデータオブジェクト。
status サーバーから返される一般的な 404 (見つからない) や 200 (準備完了) などの数値コード
status ステータス コードに付随するテキスト文字列情報
readyState オブジェクトのステータス値
0 (初期化されていない) オブジェクト確立されていますが、まだ初期化されていません (open メソッドがまだ呼び出されていません)
1 (初期化) オブジェクトは作成されましたが、send メソッドが呼び出されていません
2 (データの送信) send メソッドが呼び出されています呼び出しましたが、現在のステータスと http ヘッダーが不明です
3 (データ送信中) レスポンスと http ヘッダーが不完全であるため、responseBody と responseText を通じてデータの一部を取得するときにエラーが発生します。
4 (完了) データは受信されます。この時点で、完全な応答は、responseXml と responseText を通じて取得できます。 ただし、ブラウザー間の違いにより、XMLHttpRequest オブジェクトの作成には異なるメソッドが必要になる場合があります。この違いは主に IE と他のブラウザーの間に反映されます。以下は、XMLHttpRequest オブジェクトを作成する比較的標準的な方法です。
function CreateXmlHttp()
{
//非IE浏览器创建XmlHttpRequest对象
if(window.XmlHttpRequest)
{
xmlhttp=new XmlHttpRequest();
}
//IE浏览器创建XmlHttpRequest对象
if(window.ActiveXObject)
{
try
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
try{
xmlhttp=new ActiveXObject("msxml2.XMLHTTP");
}
catch(ex){}
}
}
}
function TestAjax()
{
var data=document.getElementByIdx("username").value;
CreateXmlHttp();
if(!xmlhttp)
{
alert("创建xmlhttp对象异常！");
return false;
}
xmlhttp.open("POST",url,false);
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.getElementByIdx("user1").innerHTML="数据正在加载...";
if(xmlhttp.status==200)
{
document.write(xmlhttp.responseText);
}
}
}
xmlhttp.send();
}これで、ajax の原理を理解できるようになりました。サーバーはプレーン テキスト ストリームを返すデータ インターフェイスと考えることができます。もちろん、このテキスト ストリームは XML 形式、HTML、JavaScript コード、または単なる文字列にすることができます。このとき、XMLHttpRequest はサーバーにこのページをリクエストし、サーバーはテキスト結果をページに書き込みます。これは通常の Web 開発プロセスと同じですが、違いは、クライアントが結果を直接取得した後ではないことです。ページに表示されますが、最初に JavaScript によって処理されてからページに表示されます。 magicajax など、現在よく使われている多くの ajax コントロールは、DataSet と他の データ型 を返すことができます。本質的には、それらの間に大きな違いはありません。
6. ajax の利点
基本的に、誰もが Ajax がもたらす利点を深く理解しています。ここでいくつかの点について簡単に説明します。 1.更新されず、ページ内でサーバーと通信するため、ユーザーに非常に優れたエクスペリエンスを提供します。 2. 非同期モードを使用して、ユーザーの操作を中断することなくサーバーと通信し、より高速な応答機能を実現します。 3. これまでサーバーに負担がかかっていた作業の一部をクライアントに転送することで、クライアントの空き容量を利用して処理できるため、サーバーと帯域幅の負担が軽減され、スペースとブロードバンドのレンタルコストが節約されます。また、サーバーの負担を軽減するために、ajax の原則は「オンデマンドでデータを取得する」ことで、冗長なリクエストと応答によるサーバーの負担を最小限に抑えることができます。 4. 標準化され広くサポートされているテクノロジーに基づいているため、プラグインや小さなプログラムをダウンロードする必要はありません。7. ajax の欠点
ここでは、ajax の欠点に焦点を当てます。なぜなら、私たちのほとんどは、ユーザーエクスペリエンスの向上など、ajax がもたらす利点に注目しているからです。 ajax によって引き起こされる欠点は無視されています。 以下で説明する ajax の欠陥はすべて、その固有性によって引き起こされます。 1. Ajax は「戻る」ボタンを無効にし、ブラウザーの「戻る」メカニズムを破壊します。 「戻る」ボタンは標準的な Web サイトの重要な機能ですが、JavaScript ではうまく機能しません。ユーザーは前に戻って前の操作をキャンセルしたいことが多いため、これは ajax によって引き起こされる深刻な問題です。では、この問題に対する解決策はあるのでしょうか?答えは「はい」です。Gmail で使用されている ajax テクノロジーがこの問題を解決することは知っていますが、これは単なる愚かな方法です。これを行うには、非表示の IFRAME を作成または使用して、ユーザーが履歴にアクセスするために戻るボタンをクリックしたときにページ上の変更を再現します。 (たとえば、ユーザーが Google マップでクリックして戻ると、非表示の IFRAME が検索され、検索結果が Ajax 要素に反映され、アプリケーションの状態がその時点の状態に復元されます。) ただし、この問題は発生しますが、解決できるとしても、開発コストは非常に高くつき、ajax フレームワークに必要な迅速な開発とは相反します。これは、ajax によって引き起こされる非常に深刻な問題です。 2. セキュリティの問題 テクノロジーは、IT 企業に新たなセキュリティの脅威ももたらします。これは、企業データの直接チャネルを確立するようなものです。これにより、開発者は以前よりも多くのデータとサーバー ロジックを誤って公開してしまう可能性があります。 Ajax ロジックはクライアント側のセキュリティ スキャン テクノロジから隠蔽できるため、ハッカーがリモート サーバーから新たな攻撃を作成できるようになります。 Ajax は、クロスサイト スクリプティング攻撃、SQL インジェクション攻撃、資格情報ベースのセキュリティの脆弱性など、いくつかの既知のセキュリティの弱点を回避することも困難です。 3. 検索エンジンのサポートは比較的弱いです。 4. プログラムの例外メカニズムを破壊しました。少なくとも現在の観点からは、ajax.dll や ajaxpro.dll などの ajax フレームワークはプログラムの例外メカニズムを破壊します。この問題に関しては、私も開発過程で遭遇したことがありますが、調べてみるとネット上には関連する紹介がほとんどありません。その後、私は自分自身で実験を行い、ajax と従来のフォーム送信モードを使用してデータの一部を削除しました...これはデバッグに大きな困難をもたらしました。 5. さらに、URL やリソースの配置の本来の意図に反するなど、いくつかの問題があります。たとえば、URL アドレスを指定した場合、Ajax テクノロジーが使用されている場合、その URL アドレスの下に表示される内容は、この URL アドレスの下に表示される内容と異なる可能性があります。これは、リソースの配置の本来の目的に反します。6、一些手持设备（如手机、PDA等）现在还不能很好的支持ajax，比如说我们在手机的浏览器上打开采用ajax技术的网站时，它目前是不支持的，当然，这个问题和我们没太多关系。
8、ajax的几种框架
目前我们采用的比较多的ajax框架主要有ajax.dll,ajaxpro.dll,magicajax.dll 以及微软的atlas框架。Ajax.dll和Ajaxpro.dll这两个框架差别不大，而magicajax.dll只是封装得更厉害一些，比如说它可以直接返回DataSet数据集，前面我们已经说过，ajax返回的都是字符串，magicajax只是对它进行了封装而已。但是它的这个特点可以给我们带来很大的方便，比如说我们的页面有一个列表，而列表的数据是不断变化的，那么我们可以采用magicajax来处理，操作很简单，添加magicajax之后，将要更新的列表控件放在magicajax的控件之内，然后在pageload里面定义更新间隔的时间就ok了，atlas的原理和magicajax差不多。但是，需要注意的一个问题是，这几种框架都只支持IE，没有进行浏览器兼容方面的处理，用反编译工具察看他们的代码就可以知道。
除了这几种框架之外，我们平时用到的比较多的方式是自己创建xmlHttpRequest对象，这种方式和前面的几种框架相比更具有灵活性。另外，在这里还提一下aspnet2.0自带的异步回调接口，它和ajax一样也可以实现局部的无刷新，但它的实现实际上也是基于xmlhttprequest对象的，另外也是只支持IE，当然这是微软的一个竞争策略。
9.ajax应用举例
以上内容是转载高人写的资料，下面我将我在项目中实际应用给出个例子，这个例子是这样的：我参与的一个项目的值班安排模块里，选择值班人时，弹出的是个联系人树型TreeView结构图，点开哪个部门，然后部门下的联系人就展开了，原先是这样的，选择好某些联系人后，哪天白天或晚上的值班人就是这样的格式”小A，小B”，但是现在要求这样的格式”小A(部门一)，小B（部门二）”这里假设小A属于部门一，小B属于部门二。由于选择联系人是纯前台javascript的操作的，这里要通过联系人userlist表中的部门id，来取得部门的名称，也就是通过前台取后台的数据，这个在系列五里我也阐述过，下面给出代码：
var param= "date=<%=stryear%>/<%=strmonth%>/" + x <%=stryear%><%=strmonth%>
+"&Type=" + type
+"&Other=" + eval_r("formData.RBOTHER"+x+".value")
+"&ZBRY=" + eval_r("formData.RBZBRY"+x+".value")
+"&ZBRYID=" + eval_r("formData.RBZBRYID"+x+".value")
+"&Demo=" + eval_r("formData.RBDEMO"+x+".value")
+"&id=" + eval_r("formData.RBZBID"+x+".value");//传递的参数
var retVal = window.showModalDialog( "chooseUsers.asp?"+param,this, "dialogWidth=280px; dialogHeight=500px; help=no; status=no; scroll=no; resizable=yes; ");
//弹出对话框取得联系人
//ajax调用服务器端方法取到部门名称
if(retVal ['userIds']!=""&& retVal ['userIds']!=null)//联系人id集合格式1，2，3，4
{
var PostUrl=" ../../../Application/CallBoard/GetDepartMentByUid.aspx?userIDs="+objRetVal['userIds']+"";//后台处理页面url
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//新建一个xmlhttprequest对象
xmlHttp.open("POST", PostUrl, false);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("");
var builder= xmlHttp.responseText; //将值传递回来,拼成了新格式
eval_r("formData.RBZBRY"+x+".value = '" +builder+"'");// formData.RBZBRY为一文本控件,将显示值班人员新格式
}
}相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上がAjaxの原理、メリット、デメリットを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
