ajax：リモートスクリプトとの使用可能な対話性

ブックマークに1つのWeb開発ブログも含まれている場合、リモートスクリプトが新しい「Future of the Web」として宣伝されていることを間違いなく知っているでしょう。

少数の人がおそらく少し気に入っていると感じていますが、リモートスクリプトを使用する多数の有名なWebアプリケーションの最近のリリースは、シームレスなWebアプリケーションの作成にこれらのテクニックを利用し、Webページ機能を拡大することに明確な利点があることを示しています。

この記事は、リモートスクリプトの基礎、特に新たなXMLHTTPREQUESTプロトコルの紹介を提供することを目的としています。次に、使用可能なインターフェイスを作成しながら、そのプロトコルを実装する方法を示すサンプルアプリケーションを進めます。

開始するには、コードアーカイブをダウンロードします。これには、ここに表示されている作業例を作成するために必要なすべてのファイルが含まれています。

キーテイクアウト

ajaxとリモートスクリプトは、ウェブページを更新する必要なくサーバーとのデータ交換を許可し、よりスムーズでインタラクティブなユーザーエクスペリエンスにつながることにより、Webアプリケーションを強化します。 適切なエラー処理とアクセシビリティの考慮事項は、AJAXを実装する場合に不可欠です。障害者や古いブラウザテクノロジーを含むすべてのユーザーがコンテンツに効果的にアクセスできるようにすることができます。

XMLHTTPREQUESTオブジェクトの作成は、ブラウザによって異なり、特にAJAX機能にActiveXを必要とするインターネットエクスプローラーの古いバージョンでは、互換性のためのフォールバックメカニズムが必要です。

ajaxアプリケーションは、クロスサイトスクリプト（XSS）やクロスサイトリクエストフォーファリー（CSRF）などの一般的なWebの脆弱性から保護するために、データを安全に処理する必要があります。

AJAXのデバッグは、その非同期性のために複雑になる可能性がありますが、ブラウザの最新の開発ツールは、AJAXの要求と応答の監視とトラブルシューティングを効果的に支援できます。

リモートスクリプトとは？

基本的に、リモートスクリプトにより、クライアント側のJavaScriptは、Webページを更新せずにサーバーからデータをリクエストできます。それでおしまい。シームレスなWebアプリケーションを作成する他のすべては、ドキュメントオブジェクトモデルを操作する確立された方法に基づいています。これは、Googleが提案しているように、選択する単語のリストを作成するのと同じくらい簡単なことかもしれません。または、map.search.ch。

のようなマップ画像をナビゲートおよびズームするためのインターフェイス全体の作成を伴う可能性があります。

しかし、新しいWebエクスペリエンスを作成する機能とともに、リモートスクリプトは新しい使用不可能なWebエクスペリエンスを作成することができます。リモートスクリプトとシームレスなアプリケーションは、デスクトップアプリケーションデザインの領域から多くの問題をもたらし、Webで同じ問題を可能にします。リモートスクリプトインターフェイスがこれらの問題に対処し、ユーザーに可能な限り最高のエクスペリエンスを提供できるようにすることがあなたの義務です。

リモートスクリプトとアクセシビリティ

オンラインアプリケーションやWebページと同様に、ユーザーのニーズを常に考慮する必要があります。一部のユーザーは、JavaScript機能を欠くブラウザを持っている場合があります。または、JavaScriptを実行できても、リモートスクリプト機能がない場合があります。

これは、JavaScriptの相互作用とリモートスクリプト関数がWebベースのコンテンツの基本機能に追加される一般に受け入れられているベストプラクティスです。コンテンツは、これらのテクノロジーなしではアクセスしやすく使用可能でなければなりません。本格的なWebアプリケーションの場合、JavaScriptやリモートスクリプト機能を持っていないユーザーにまったく異なるシステムを提供することは許容される場合があります。 Gmailのチームは最近、サービスへの代替インターフェイスを非JavaScript、

を実装しました。 ではありませんが、公開標準ではありませんが、ほとんどの最新のブラウザは一貫して実装しており、JavaScriptデータ取得の事実上の標準になるための途中です。 Internet Explorer 5 Windows、Mozilla 1.0、Safari 1.2、およびOperaの今後のバージョン8.0はすべて、利用可能なオブジェクトとしてXmlhttprequestを導入しています。

インターネットエクスプローラーXMLHTTPREQUEST APIは、ダウンロードできます

Mozillaドキュメントをダウンロードすることもできます これらよりも古いブラウザのサポートが必要な場合、IFRAMEを使用したメソッドは実行可能なソリューションを提供します。ただし、これらのブラウザのコーディングは、標準のJavaScript Domメソッドを利用する能力も制限します。この記事では、より現代的なXMLHTTPREQUESTメソッドに焦点を当てます。 XMLHTTPREQUESTオブジェクトの作成

インターネットエクスプローラーを除くブラウザの場合、このようなxmlhttprequestオブジェクトを作成できます。

ただし、Internet Explorerでは、XmlhttpRequestがActiveXオブジェクトとして実装されています。 IEの場合、このようにオブジェクトが作成されます：

注：これは、ユーザーがインターネットエクスプローラーでActiveXオブジェクトを無効にしている場合、JavaScriptが有効になっていてもXMLHTTPREQUESTを使用できないことを意味します。 これらのブラウザで使用されるオブジェクト作成構文の違いに対処するには、トライ/キャッチ構造を使用して正しいオブジェクトを自動的に提供するか、XMLHTTPREQUESTオブジェクトが使用できない場合はエラーを返します。

var requester = new XMLHttpRequest();

ありがたいことに、実装の違いはそこで終わり、xmlhttprequestオブジェクトへの後続のすべてのメソッド呼び出しは、スクリプトが実行されているブラウザに関係なく実行できます。

XMLHTTPREQUESTオブジェクトを使用してデータの輸送

xmlhttprequestオブジェクトが作成されたら、サーバーからデータを取得するために2つの個別のメソッドを呼び出す必要があります。

URLは相対的または絶対的なものである可能性がありますが、ドメインのセキュリティ上の懸念により、ターゲットはそれを要求するページと同じドメインに存在する必要があります。

var requester = new ActiveXObject("Microsoft.XMLHTTP");

open（）メソッドは、要求が非同期（true、default）または同期（false）で行われるかどうかを指定するオプションの3番目のブール引数も実行します。同期リクエストを使用すると、ブラウザはオブジェクトが完了するまでフリーズし、ユーザーインタラクションを許可します。非同期リクエストがバックグラウンドで発生し、他のスクリプトを実行し、ユーザーがブラウザにアクセスし続けることができます。非同期リクエストを使用することをお勧めします。それ以外の場合は、ユーザーのブラウザがロックアップするリスクを実行している間、不正になったリクエストを待っています。 Open（）のオプションの4番目と5番目の引数は、パスワードで保護されたURLにアクセスするときの認証のためのユーザー名とパスワードです。

try 

{ 

  var requester = new XMLHttpRequest(); 

} 

catch (error) 

{ 

  try 

  { 

    var requester = new ActiveXObject("Microsoft.XMLHTTP"); 

  } 

  catch (error) 

  { 

    return false; 

  } 

}

open（）が接続の初期化に使用されると、send（）メソッドが接続をアクティブにしてリクエストを行います。 send（）は1つの引数を取り、CGI変数などの追加データを呼び出しとともに送信できます。 Internet Explorerはそれをオプションとして扱いますが、Mozillaは値が渡されない場合はエラーを返します。

get requestメソッドを使用してcgi変数を送信するには、変数をopen（）urlにハードコードする必要があります。

POSTリクエスト方法を使用してCGI変数を送信するには、CGI変数をsend（）メソッドに渡すことができます。

send（）を呼び出すと、xmlhttprequestはサーバーに連絡し、要求したデータを取得します。ただし、このプロセスには不確定な時間がかかります。オブジェクトがいつデータの取得を終了したかを確認するには、イベントリスナーを使用する必要があります。 xmlhttprequestオブジェクトの場合、そのReadyState変数の変更を聞く必要があります。この変数は、オブジェクトの接続のステータスを指定し、次のいずれかにすることができます。

open() initialises the connection we wish to make, and takes two arguments, with several optionals. The first argument is the type of request we want to send; the second argument identifies the location from which we wish to request data. For instance, if we wanted to use a GET request to access feed.xml at the root of our server, we'd initialise the XMLHttpRequest object like this:

requester.open("GET", "/feed.xml");

0– uninitialised

1â€「ロード

requester.send(null);

2†'ロード

3–インタラクティブ

4–完了
ReadyState変数の変更は、特別なOnreadyStateChangeリスナーを使用して監視できます。そのため、ReadyStateが変更されたときにイベントを処理する関数を設定する必要があります。

var requester = new XMLHttpRequest();

var requester = new ActiveXObject("Microsoft.XMLHTTP");

try 

{ 

  var requester = new XMLHttpRequest(); 

} 

catch (error) 

{ 

  try 

  { 

    var requester = new ActiveXObject("Microsoft.XMLHTTP"); 

  } 

  catch (error) 

  { 

    return false; 

  } 

}

XMLHTTPREQUESTオブジェクトでは、Open（）メソッドを複数回呼び出すことができますが、ReadyStateChangeイベントはReadyStateが「4」（Mozillaで）に変更されると再び更新されないため、各オブジェクトは実際に1回の呼び出しにのみ使用できます。したがって、リモートコールを行うたびに、新しいXMLHTTPREQUESTオブジェクトを作成する必要があります。 xmlhttpRequestオブジェクトでデータを解析する

リクエストを成功させた場合、xmlhttprequestオブジェクトの2つのプロパティにデータが含まれる場合があります。

ResponseXMLは、オブジェクトによって取得されたXMLデータのDOM構造オブジェクトを保存します。このオブジェクトは、GetElementsByTagname（）、ChildNodes []、ParentNodeなど、標準のJavaScript DOMアクセスメソッドとプロパティを使用して航行可能です。

ResponseTextは、データを1つの完全な文字列として保存します。サーバーが提供するデータのコンテンツタイプがテキスト/プレーンまたはテキスト/HTMLである場合、これはデータを含む唯一のプロパティです。任意のテキスト/XMLデータのコピーはフラット化され、ResponseXMLの代替としてここに配置されます。

• データの複雑さによっては、単純にテキスト文字列としてデータを返す方が簡単な場合があります。ただし、より複雑なデータ型については、おそらくこのようなXML形式を使用する必要があります。
        JOHN SMITH

        john@smith.com

標準のDOMアクセスメソッドを使用して、データのさまざまな部分にアクセスできます。タグ間に含まれるデータは、親の子テキストノードを表すと見なされるため、データを取得する際には、その余分な構造層を考慮する必要があることを忘れないでください。

また、空白に注意する必要があります。XMLファイルのインデント値は、値に不要な白人を生成するか、テキストノードを追加する場合があります。
XMLHTTPREQUESTオブジェクトからのデータを解析したら、Fit！
を見ると、Webページに自由に変更、削除、書き込みできます！

リモートスクリプトアプリケーションの例

サンプルアプリケーションにより、ユーザーは友人のメールアドレスに無料のECARDを送信できます。これを行うために、ユーザーは最初に領収書番号を入力する必要があります。領収書番号は、以前に商品を購入したときに受け取ったもので、その後ExamPlecoのデータベースに保存されています。次に、ユーザーはecardが送信される前に残りのフィールドを完了し、受信者のメールアドレス、メッセージ、およびカードに使用されるグラフィック画像を入力する必要があります。

この例では、次のような3つのアクションにリモートスクリプトが使用されます。

領収書番号の検証の待ち時間を最小限に抑える

領収書番号が検証されたら、取得したデータのエントリをフォームに自動化する
ecardが正常に送信されたら、ページの内容を書き直します
• これらのアクションに加えて、この例にはJavaScriptが含まれており、提出前に他のフォームフィールドを検証し、ユーザーがECARDグラフィックを選択できるようにします。

この例は、2つの別々のバージョンで作成されています。これらのバージョンの最初のものは、アプリケーション内のXMLHTTPREQUESTプロトコルの実装を示していますが、いくつかの推定ではないユーザビリティの問題が含まれています。これらの問題は、ページベースのアプリケーションモデルからよりダイナミックでインタラクティブな環境に移行するときに発生する可能性のある問題のいくつかを強調することを目的としています。

例1：xmlhttprequest

を実装します

従来のサーバー/クライアントアプリケーションでは、ecardフォーム全体をサーバーに送信してチェックし、ブラウザに戻す必要があります。リモートスクリプトモデルを使用すると、ユーザーがそのフィールドの処理が終了したらすぐに領収書番号を確認できます。したがって、ユーザーがフォームを送信すると、ブラウザはデータが有効かどうかを既に識別しています。

データをリモートで確認する最初のステップは、ユーザーがいつ領収書番号フィールドに値を入力したかを知ることです。これは、フィールドのオンチェンジイベントハンドラーを使用して検出できます。テキストフィールドの「変更」は、ユーザーがテキストフィールドの値を変更し、そのフィールドから「ぼかし」を変更するたびに登録されます（つまり、タブまたはクリックします）。これは通常、ユーザーがフィールドの記入を終了し、含めるデータを処理できることを示す適切な兆候です。このOnchangeイベントをキャプチャすることにより、フィールドのコンテンツの検証を開始するようにスクリプトに伝えることができます。

この記事の最初の部分、つまりフォークされたトライ/キャッチ構造と、xmlhttprequestオブジェクトを制御するopen（）およびsend（）メソッドから、その構文の一部を認識するかもしれません。

最初のIFステートメントは、XMLHTTPREQUESTオブジェクトがすでに存在し、現在実行中のかどうかを確認するためにチェックします。もしそうなら、それはその接続を中止します。これにより、多くの矛盾するXmlhttpRequestコールが同時に実行されないようになり、ネットワークが詰まります。その後、この関数は続行され、新しいxmlhttprequestオブジェクトを作成し、サーバー側の検証スクリプトへの接続を開きます。 この例では、コードを簡素化するためにハードコーディングされた値とデータが使用されていますが、実際の世界では、このPHPスクリプトはデータベースに対して領収書番号を確認し、その番号の適切なデータを返します。

領収書番号が無効な場合、送信されるコンテンツタイプのヘッダーは「テキスト/プレーン」であることに注意してください。これにより、メッセージの印刷プロセスが多少簡素化されますが、クライアント側では、XmlhttpRequestオブジェクトのResponseXMLプロパティには何も含まれないことも意味します。そのため、サーバー側のスクリプトがどのようなものを返しているかを常に認識し、ResponseXMLまたはResponsetTextに適切に注目してください。

サーバー側のスクリプトを呼び出すだけでなく、onChangereCeipt（）は、onreadystatechangereceipt（）を割り当てて、onreadystatechangeイベントを介して接続のステータスを監視します。これは、接続がいつ完成し、さらにアクションを実行する必要があるのはこの関数です。これを行うには、以前に説明したReadyState/Status Conditionのネストを使用します。

var requester = new XMLHttpRequest();

機能oneadystatechangereceipt（）

{

 / * XMLHRオブジェクトがデータの取得が完了した場合 */

 if（requester.readyState == 4）

 {

   / *データが正常に取得された場合 */
   if（requester.status == 200）
   {
     WRETEDETAILS（）;  
   }
   / * IEは場合によっては0のステータスコードを返しますので、このケースを無視します */
   else if（requester.status！= 0）
   {
     Alert（ "URLを取得しているときにエラーが発生しました：" requester.statustext）;  
   }
 }
 
 trueを返します。  
}

成功したステータスコードが返されると、wretedetails（）が呼び出されます。返されたデータを解析し、Webページに何をすべきかを決定するのはこの機能です。

var requester = new XMLHttpRequest();

この関数は、最初にxmlhttprequestオブジェクトの応答プロパティをチェックして、領収書番号が有効かどうかを確認します。有効な場合、データはXML形式になり、その最初の文字はオープニングアングルブラケット（WRETEDETAILS（）の実行は、領収書番号検証のためのリモートスクリプトプロセスの終了をマークします。フィールドに拡張された有効なプロパティが設定された場合、ブラウザはデータが問題ないかどうかを知っており、フォームを送信しようとするときにユーザーにエラーを警告することができます。

フォームにエラーがある場合、[提出]ボタンがクリックされたときにアラート（）ダイアログが表示され、フォームが送信される前にユーザーにエラーを修正するように依頼します。

var requester = new ActiveXObject("Microsoft.XMLHTTP");

これにより、ユーザーに提示された初期フォームが削除され、最終的なステータスメッセージが挿入されます。

try 

{ 

  var requester = new XMLHttpRequest(); 

} 

catch (error) 

{ 

  try 

  { 

    var requester = new ActiveXObject("Microsoft.XMLHTTP"); 

  } 

  catch (error) 

  { 

    return false; 

  } 

}

open() initialises the connection we wish to make, and takes two arguments, with several optionals. The first argument is the type of request we want to send; the second argument identifies the location from which we wish to request data. For instance, if we wanted to use a GET request to access feed.xml at the root of our server, we'd initialise the XMLHttpRequest object like this:

requester.open("GET", "/feed.xml");

このアプリケーションはページ全体を書き直しますが、リモートスクリプトを使用してDOMの特定の部分をどのように変更できるかを簡単に確認できます。これにより、アプリケーションインターフェイスの別々の部分がWebページ自体とは独立して更新できます。

例2：使用可能なリモートスクリプトインターフェイスを作成します

リモートスクリプトモデルは、ほとんどのWebに浸透する標準のページベースのインタラクションとはまったく異なります。その違いにより、プロジェクトに簡単に導入できる新しいユーザビリティの落とし穴が生じます。これらの落とし穴は通常、ユーザーがアクセスしている間にインターフェイスの動的操作から、またはWebページの外部のデータにアクセスする必要性から生じます。

例1は、領収書番号を検証し、データベースから取得したデータを自動的に挿入するためにリモートスクリプトを使用しました。ただし、この情報はどれも特によく使用されておらず、ユーザーにとって何が起こっているのかは明らかではありませんでした。例2は、最初の例でこれやその他の欠陥を修正し、ユーザーにとって体験をより迅速、簡単、より理解しやすくすることを目的としています。以下の5つのヒントは、悪い体験を良い体験に変えるために使用できるいくつかの変更を説明しています。

ヒント＃1：なぜ彼らが待っているのかをユーザーに伝えます

リモートスクリプトは瞬時ではありません。 Web接続の速度に関係なく、外部ソースとの通信時間は異なります。そのため、サーバーとの通信が発生している間、ユーザーがなぜ待っているのかをユーザーに伝えることが不可欠です。 （例のPHPスクリプトは、Sleep（）呼び出しを使用して、ネットワークトラフィックやその他の要因によって引き起こされる可能性のある待機期間を強調しています。）

リモートスクリプトアプリケーションは通常のブラウザインターフェイスを使用して呼び出しを行わないため、通常、転送ステータスとアクティビティをユーザーに通知するステータスバーは、通常どおりに機能しないため、ユーザーにフィードバックを提供する必要があります。

例2では、​​領収書番号が検証されている間に、領収書番号フィールドの横にラベルが表示され、待機を説明します。

xmlhttprequest接続が完了したら、完了を示すラベルが変更されます。

ステータスメッセージは、領収書番号フィールドのオンチェンジイベントがトリガーされるときに、xmlhttprequest接続の直前に初期化されます。

リモートスクリプト操作が終了したら、メッセージが更新され、領収書番号が有効かどうかをユーザーに伝えます。

メッセージを更新するには、ユーザーに閉鎖を提供するため、完了を示すことが重要です。読み込みメッセージが消えた場合、ユーザーは成功したことを確信できませんでした。 上記の2つのコードサンプルでは、​​メッセージ関数は、フォーム要素のステータスラベルを動的に作成し、関連要素に視覚的に隣接する配置を行うカスタム関数です。また、ステータスラベルのクラスを受け入れます。これにより、CSSスタイルをロード、エラー、完了メッセージに異なる方法で適用できます。

var requester = new XMLHttpRequest();

xmlhttprequestプロセスが実行されている間、ラベルはアニメーション化して、アクションが進行中でまだ生きていることを示します。例2では、​​これはアニメーションGIFを使用したCSSスタイリングを介して実行されますが、JavaScriptアニメーションを使用して実行することもできます。

同じ機能がフォーム送信ボタンに適用されます。繰り返しますが、これはユーザーに何らかのアクションが行われていることを警告し、またボタンをクリックしたことを知らせます。

var requester = new ActiveXObject("Microsoft.XMLHTTP");

これを達成するには、送信ボタンの値とCSSクラスを変更するだけです。

ヒント＃2：ユーザーの相互作用に干渉しないでください

try 

{ 

  var requester = new XMLHttpRequest(); 

} 

catch (error) 

{ 

  try 

  { 

    var requester = new ActiveXObject("Microsoft.XMLHTTP"); 

  } 

  catch (error) 

  { 

    return false; 

  } 

}

ユーザーは、タスクの完了を妨げるインターフェイスに不満を感じます。例1では、ユーザーが領収書番号を入力した後にそのような干渉が発生する可能性があります。領収書番号が確認される前に名前とメールアドレスを記入し始めた場合、ユーザーデータがサーバーから受信されると、これらの詳細が上書きされます。 これを修正するために、例2は、スクリプトがデータを入力する前に、ユーザーがテキストフィールドの値を変更したかどうかをチェックします。テキストフィールドのデフォルト値は、ページが読み込まれたときに検出され、カスタムDOMプロパティを使用して記録できます。

スクリプトがデータにデータを書き込もうとする前に、フィールドのデフォルト値を現在の内容に対してチェックすることができます。

var requester = new XMLHttpRequest();

これにより、ユーザーはおそらく自分の名前を私たちよりもよく知っている - は、熱心な自動化によって上書きされたエントリがないことを確認します。

避けるべき干渉の他のいくつかの一般的なケースには、ユーザーが別のフィールドに記入している間にカーソルをフィールドに移動し、ユーザーをインターフェイスからロックします（そのため、xmlhttprequestは非同期に使用する必要があります）。

var requester = new ActiveXObject("Microsoft.XMLHTTP");

ヒント＃3：早期にエラーをキャッチしますが、早すぎません

エラーが発生したらすぐにキャッチするのが最善です。現在Webに表示されている多くのフォームは、サーバー側のスクリプトまたは不可能なJavaScriptアラートのいずれかを使用して、フォームエラーが表示される前にフォームを送信するためにユーザーに依存しています（例1に記載されています）。これらのメソッドには、ユーザーにいくつかの欠点があります：

フォームを送信するプロセスは、ユーザーの時間を取り上げます。

JavaScriptアラートは、修正を必要とするすべてのフィールドを永久にマークしません。

エラーがコミットされた後にエラーをよく示すには、ユーザーが誤ったフィールドが彼らに求めたものを精神的に思い出す必要があります。

ユーザーがどのフォーム要素を修正するかを知っていても、フォームを再サブリミングして、それらの要素が適切に修正されているかどうかを確認する必要があります。

これらの理由により、ユーザーがエラーを作成したらすぐにユーザーに通知する方がはるかに優れています。例2では、​​ユーザーが無効な電子メールアドレスを入力した場合、アプリケーションはすぐにそれらを通知します。通知は、ヒント＃1からのメッセージ（）関数を使用して、電子メールフィールドのすぐ隣に配置されます。
• ただし、ユーザーがタイピングを開始するとすぐに有効性をチェックしてはなりません。迷惑なことは言うまでもなく、データの入力が終了する前にエラーを犯したと言われます。フィールドチェックは、ユーザーがエントリを確定した後、つまり入力から離れたときにのみ行う必要があります。テキストフィールドの場合、このタイプのアクションは、Onchangeイベントを使用してキャプチャされるのが最適です。

  var requester = new XMLHttpRequest();

  イベントによってトリガーされる関数は、フィールドをチェックして、それに含まれるデータがそのデータ型に対して有効であることを確認できます。

  var requester = new ActiveXObject("Microsoft.XMLHTTP");

  ヒント＃4：エラーが修正されたときにユーザーに知らせてください

  フィールドが正しくないことがわかっていて、ユーザーがエラーにアラートされたら、ユーザーが正しいと変更したときにユーザーに知らせることも同様に重要です。 この状況では、ブラウザのオンチェンジイベントが発射されるのを待つのに十分ではありません。通常、ユーザーがフォーム要素を解除した場合にのみ発生するためです。したがって、OnKeyUpイベントを使用して、間違っていることが知られているフィールドの正確性を確認するのが最善です。
  onkeyUpemail（）関数は、電子メールフィールドにエラーメッセージが表示されているかどうかを確認してから、フィールドが正しいかどうかを確認します。したがって、ユーザーがフィールドを適切に修正するとすぐに、エラーメッセージが消えます。ただし、ユーザーが初めてフィールドに入力している場合、メッセージは表示されません。
  これらのシナリオは、必須のフィールドがスキップされたケースをキャプチャしないため、ユーザーが不完全なフォームを送信できるようにすることをお勧めします。

  try 
  
  { 
  
    var requester = new XMLHttpRequest(); 
  
  } 
  
  catch (error) 
  
  { 
  
    try 
  
    { 
  
      var requester = new ActiveXObject("Microsoft.XMLHTTP"); 
  
    } 
  
    catch (error) 
  
    { 
  
      return false; 
  
    } 
  
  }

  ヒント＃5：インターフェイスフィードバックを提供

  open() initialises the connection we wish to make, and takes two arguments, with several optionals. The first argument is the type of request we want to send; the second argument identifies the location from which we wish to request data. For instance, if we wanted to use a GET request to access feed.xml at the root of our server, we'd initialise the XMLHttpRequest object like this:
  
  

  シームレスなWebアプリケーションを作成すると、ブラウザでまだ見られていない新しい機能を探索できますが、そうすることで、使用可能なインターフェイスデザインの基礎を覚えておく必要があります。そのような基盤の1つは、インターフェイスフィードバックの提供です。ユーザーに何ができるか、何ができたかを知らせることです。

  例1では、ユーザーがECARDグラフィックスのサムネイルをクリックできることは完全には明らかではありません。これは、カーソルがいつでも配置されている画像に灰色のアウトラインを与えると、簡単に反動できます。
  ：Hover Pseudoクラスは、CSSを使用した人なら誰でも馴染みがあります。オブジェクトは、カーソルがそのオブジェクトの上に移動すると、外観を変更できます。マウスオーバー効果はCSSだけで理論的に達成できますが、インターネットエクスプローラーの現在のバージョンは、アンカータグ以外の要素へのホバー効果を許可しません。したがって、画像要素にホバー効果を達成するために、例2はマウスオーバーとオンマウスアウトイベントハンドラーを添付します。
  これらのイベントハンドラーは、各画像のクラスを変更し、CSSを使用して視覚的なフィードバックを提供できるようにすることができます。
  カーソルを変更して「クリック可能性」を示すことは、ユーザーにフィードバックを提供するのにも役立ちます。これは、CSSの単純なルールを使用して実行できます：

  var requester = new XMLHttpRequest();

  結論

  これらすべての変更を例1に変更した後、例2ははるかに役立つアプリケーションになります。

  

  ここで提供されるヒントの中で共通のテーマは、常にユーザーを快適で制御できるようにすることです。ユーザーが何が起こっているのかを理解するために必要な情報を所有していない場合、彼らはあなたのアプリケーションを不安で見ることができ、そのパフォーマンスは結果として苦しみます。 この記事は、主にリモートスクリプトのプロセスとその使いやすさの懸念に焦点を当てていますが、シームレスなWebアプリケーションを作成する際に考慮すべきアクセシビリティのポイントもあります。例3は、ECARDアプリケーションのはるかに複雑なバージョンで、より強力なスクリプトを使用し、JavaScriptがない、またはXmlhttpRequestなしでユーザーにアクセスしやすい分解を使用します。上記のテクニックを習得したら、この最後の例を見て、アプリケーションを本当に堅牢にして始めることをお勧めします。

  リモートスクリプトとajax

  に関するよくある質問

  ajaxとリモートスクリプトの主な違いは何ですか？

  ajax（非同期JavascriptとXML）とリモートスクリプトは、両方のテクニックがインタラクティブなWebアプリケーションを作成するために使用されます。主な違いは、データの処理方法にあります。 AjaxはXMLを使用してデータを送信および受信しますが、リモートスクリプトはXML、JSON、またはプレーンテキストを含む任意のデータ形式を使用できます。 Ajaxは、リモートスクリプトの特定の実装であり、これはより広範な概念です。

  リモートスクリプトはユーザーエクスペリエンスをどのように改善するのですか？

  リモートスクリプトは、フルページをリロードすることなく、Webページがバックグラウンドでサーバーと通信できるようにすることでユーザーエクスペリエンスを向上させます。これにより、より速く、よりスムーズで、より応答性の高いWebアプリケーションが得られ、ユーザーエクスペリエンス全体が改善されます。ただし、言語の選択は、ユーザーのブラウザのクライアント側の機能に依存します。

  リモートスクリプトを使用することのセキュリティへの影響は何ですか？

  ​​

  Webテクノロジーと同様に、リモートスクリプティングは、クロスサイトスクリプティング（XSS）や横断的なリクエスト（CSRF）などのさまざまなセキュリティの脅威に対して脆弱です。したがって、これらの脅威から保護するために、入力検証や出力エンコードなどの適切なセキュリティ対策を実装することが重要です。

  リモートスクリプトは、データの送信をどのように処理しますか？

  ​​

  リモートスクリプトは、HTTPリクエストを使用してデータ送信を処理します。リクエストをサーバーに送信し、リクエストを処理し、応答を送信します。この応答は、クライアント側のスクリプトによって処理され、フルページのリロードなしでWebページを更新します。非同期データ交換が可能になります。つまり、ユーザーはサーバーがリクエストを処理している間、ページとの対話を続けることができます。 AjaxはXMLデータ形式もサポートしています。これは、プレーンテキストよりも構造化され、処理しやすいです。

  モバイルアプリケーションにリモートスクリプトを使用できますか？ただし、モバイルデバイスの処理能力とネットワークの帯域幅が限られているため、パフォーマンスと効率のためにスクリプトを最適化することが重要です。

  リモートスクリプティングの一般的なユースケースは何ですか？また、無限のスクロールなど、ページを更新せずに大量のデータをロードする必要があるアプリケーションでも使用されています。ただし、最新のWebブラウザーは、役立つ開発者ツールを提供します。これらのツールを使用すると、ネットワークリクエストを検査し、コンソールログを表示し、コードを介して問題を識別および修正することができます。

  リモートスクリプトを実装するためのベストプラクティスは何ですか？

  リモートスクリプティングを実装するためのいくつかのベストプラクティスは次のとおりです。エラーを優雅に処理します。パフォーマンスのためのスクリプトを最適化します。適切なセキュリティ対策の実装。さまざまなブラウザでスクリプトをテストして、互換性を確保します。

以上がajax：リモートスクリプトとの使用可能な対話性の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。