ブックマークに1つのWeb開発ブログも含まれている場合、リモートスクリプトが新しい「Future of the Web」として宣伝されていることを間違いなく知っているでしょう。
少数の人がおそらく少し気に入っていると感じていますが、リモートスクリプトを使用する多数の有名なWebアプリケーションの最近のリリースは、シームレスなWebアプリケーションの作成にこれらのテクニックを利用し、Webページ機能を拡大することに明確な利点があることを示しています。
この記事は、リモートスクリプトの基礎、特に新たなXMLHTTPREQUESTプロトコルの紹介を提供することを目的としています。次に、使用可能なインターフェイスを作成しながら、そのプロトコルを実装する方法を示すサンプルアプリケーションを進めます。開始するには、コードアーカイブをダウンロードします。これには、ここに表示されている作業例を作成するために必要なすべてのファイルが含まれています。
キーテイクアウト
しかし、新しいWebエクスペリエンスを作成する機能とともに、リモートスクリプトは新しい使用不可能なWebエクスペリエンスを作成することができます。リモートスクリプトとシームレスなアプリケーションは、デスクトップアプリケーションデザインの領域から多くの問題をもたらし、Webで同じ問題を可能にします。リモートスクリプトインターフェイスがこれらの問題に対処し、ユーザーに可能な限り最高のエクスペリエンスを提供できるようにすることがあなたの義務です。
リモートスクリプトとアクセシビリティこれは、JavaScriptの相互作用とリモートスクリプト関数がWebベースのコンテンツの基本機能に追加される一般に受け入れられているベストプラクティスです。コンテンツは、これらのテクノロジーなしではアクセスしやすく使用可能でなければなりません。本格的なWebアプリケーションの場合、JavaScriptやリモートスクリプト機能を持っていないユーザーにまったく異なるシステムを提供することは許容される場合があります。 Gmailのチームは最近、サービスへの代替インターフェイスを非JavaScript、
を実装しました。Mozillaドキュメントをダウンロードすることもできます これらよりも古いブラウザのサポートが必要な場合、IFRAMEを使用したメソッドは実行可能なソリューションを提供します。ただし、これらのブラウザのコーディングは、標準のJavaScript Domメソッドを利用する能力も制限します。この記事では、より現代的なXMLHTTPREQUESTメソッドに焦点を当てます。 XMLHTTPREQUESTオブジェクトの作成
インターネットエクスプローラーを除くブラウザの場合、このようなxmlhttprequestオブジェクトを作成できます。
ただし、Internet Explorerでは、XmlhttpRequestがActiveXオブジェクトとして実装されています。 IEの場合、このようにオブジェクトが作成されます：
var requester = new XMLHttpRequest();
XMLHTTPREQUESTオブジェクトを使用してデータの輸送
URLは相対的または絶対的なものである可能性がありますが、ドメインのセキュリティ上の懸念により、ターゲットはそれを要求するページと同じドメインに存在する必要があります。
var requester = new ActiveXObject("Microsoft.XMLHTTP");try
{
var requester = new XMLHttpRequest();
}
catch (error)
{
try
{
var requester = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (error)
{
return false;
}
}
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");1â€「ロード
requester.send(null);
2†'ロード
3–インタラクティブ
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オブジェクトでデータを解析する
ResponseXMLは、オブジェクトによって取得されたXMLデータのDOM構造オブジェクトを保存します。このオブジェクトは、GetElementsByTagname（）、ChildNodes []、ParentNodeなど、標準のJavaScript DOMアクセスメソッドとプロパティを使用して航行可能です。
ResponseTextは、データを1つの完全な文字列として保存します。サーバーが提供するデータのコンテンツタイプがテキスト/プレーンまたはテキスト/HTMLである場合、これはデータを含む唯一のプロパティです。任意のテキスト/XMLデータのコピーはフラット化され、ResponseXMLの代替としてここに配置されます。
標準のDOMアクセスメソッドを使用して、データのさまざまな部分にアクセスできます。タグ間に含まれるデータは、親の子テキストノードを表すと見なされるため、データを取得する際には、その余分な構造層を考慮する必要があることを忘れないでください。
また、空白に注意する必要があります。XMLファイルのインデント値は、値に不要な白人を生成するか、テキストノードを追加する場合があります。
XMLHTTPREQUESTオブジェクトからのデータを解析したら、Fit！
を見ると、Webページに自由に変更、削除、書き込みできます！
この例では、次のような3つのアクションにリモートスクリプトが使用されます。
領収書番号の検証の待ち時間を最小限に抑える
例1：xmlhttprequest
を実装します従来のサーバー/クライアントアプリケーションでは、ecardフォーム全体をサーバーに送信してチェックし、ブラウザに戻す必要があります。リモートスクリプトモデルを使用すると、ユーザーがそのフィールドの処理が終了したらすぐに領収書番号を確認できます。したがって、ユーザーがフォームを送信すると、ブラウザはデータが有効かどうかを既に識別しています。
データをリモートで確認する最初のステップは、ユーザーがいつ領収書番号フィールドに値を入力したかを知ることです。これは、フィールドのオンチェンジイベントハンドラーを使用して検出できます。テキストフィールドの「変更」は、ユーザーがテキストフィールドの値を変更し、そのフィールドから「ぼかし」を変更するたびに登録されます（つまり、タブまたはクリックします）。これは通常、ユーザーがフィールドの記入を終了し、含めるデータを処理できることを示す適切な兆候です。このOnchangeイベントをキャプチャすることにより、フィールドのコンテンツの検証を開始するようにスクリプトに伝えることができます。この記事の最初の部分、つまりフォークされたトライ/キャッチ構造と、xmlhttprequestオブジェクトを制御するopen（）およびsend（）メソッドから、その構文の一部を認識するかもしれません。
最初のIFステートメントは、XMLHTTPREQUESTオブジェクトがすでに存在し、現在実行中のかどうかを確認するためにチェックします。もしそうなら、それはその接続を中止します。これにより、多くの矛盾するXmlhttpRequestコールが同時に実行されないようになり、ネットワークが詰まります。その後、この関数は続行され、新しいxmlhttprequestオブジェクトを作成し、サーバー側の検証スクリプトへの接続を開きます。
領収書番号が無効な場合、送信されるコンテンツタイプのヘッダーは「テキスト/プレーン」であることに注意してください。これにより、メッセージの印刷プロセスが多少簡素化されますが、クライアント側では、XmlhttpRequestオブジェクトのResponseXMLプロパティには何も含まれないことも意味します。そのため、サーバー側のスクリプトがどのようなものを返しているかを常に認識し、ResponseXMLまたはResponsetTextに適切に注目してください。
{
if（requester.readyState == 4）
/ *データが正常に取得された場合 */ var requester = new XMLHttpRequest();
if（requester.status == 200）
{
WRETEDETAILS（）;
}
/ * IEは場合によっては0のステータスコードを返しますので、このケースを無視します */
else if（requester.status！= 0）
{
Alert（ "URLを取得しているときにエラーが発生しました：" requester.statustext）;
}
}
trueを返します。
}
成功したステータスコードが返されると、wretedetails（）が呼び出されます。返されたデータを解析し、Webページに何をすべきかを決定するのはこの機能です。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;
}
}
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");例2：使用可能なリモートスクリプトインターフェイスを作成します
例1は、領収書番号を検証し、データベースから取得したデータを自動的に挿入するためにリモートスクリプトを使用しました。ただし、この情報はどれも特によく使用されておらず、ユーザーにとって何が起こっているのかは明らかではありませんでした。例2は、最初の例でこれやその他の欠陥を修正し、ユーザーにとって体験をより迅速、簡単、より理解しやすくすることを目的としています。以下の5つのヒントは、悪い体験を良い体験に変えるために使用できるいくつかの変更を説明しています。
ヒント＃1：なぜ彼らが待っているのかをユーザーに伝えます
リモートスクリプトは瞬時ではありません。 Web接続の速度に関係なく、外部ソースとの通信時間は異なります。そのため、サーバーとの通信が発生している間、ユーザーがなぜ待っているのかをユーザーに伝えることが不可欠です。 （例のPHPスクリプトは、Sleep（）呼び出しを使用して、ネットワークトラフィックやその他の要因によって引き起こされる可能性のある待機期間を強調しています。）
リモートスクリプトアプリケーションは通常のブラウザインターフェイスを使用して呼び出しを行わないため、通常、転送ステータスとアクティビティをユーザーに通知するステータスバーは、通常どおりに機能しないため、ユーザーにフィードバックを提供する必要があります。
例2では、領収書番号が検証されている間に、領収書番号フィールドの横にラベルが表示され、待機を説明します。
xmlhttprequest接続が完了したら、完了を示すラベルが変更されます。
ステータスメッセージは、領収書番号フィールドのオンチェンジイベントがトリガーされるときに、xmlhttprequest接続の直前に初期化されます。
メッセージを更新するには、ユーザーに閉鎖を提供するため、完了を示すことが重要です。読み込みメッセージが消えた場合、ユーザーは成功したことを確信できませんでした。 上記の2つのコードサンプルでは、メッセージ関数は、フォーム要素のステータスラベルを動的に作成し、関連要素に視覚的に隣接する配置を行うカスタム関数です。また、ステータスラベルのクラスを受け入れます。これにより、CSSスタイルをロード、エラー、完了メッセージに異なる方法で適用できます。
var requester = new XMLHttpRequest();
同じ機能がフォーム送信ボタンに適用されます。繰り返しますが、これはユーザーに何らかのアクションが行われていることを警告し、またボタンをクリックしたことを知らせます。
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");エラーが発生したらすぐにキャッチするのが最善です。現在Webに表示されている多くのフォームは、サーバー側のスクリプトまたは不可能なJavaScriptアラートのいずれかを使用して、フォームエラーが表示される前にフォームを送信するためにユーザーに依存しています（例1に記載されています）。これらのメソッドには、ユーザーにいくつかの欠点があります：
フォームを送信するプロセスは、ユーザーの時間を取り上げます。
JavaScriptアラートは、修正を必要とするすべてのフィールドを永久にマークしません。
エラーがコミットされた後にエラーをよく示すには、ユーザーが誤ったフィールドが彼らに求めたものを精神的に思い出す必要があります。
ユーザーがどのフォーム要素を修正するかを知っていても、フォームを再サブリミングして、それらの要素が適切に修正されているかどうかを確認する必要があります。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ははるかに役立つアプリケーションになります。
リモートスクリプトとajax
に関するよくある質問ajaxとリモートスクリプトの主な違いは何ですか？
リモートスクリプトは、フルページをリロードすることなく、Webページがバックグラウンドでサーバーと通信できるようにすることでユーザーエクスペリエンスを向上させます。これにより、より速く、よりスムーズで、より応答性の高いWebアプリケーションが得られ、ユーザーエクスペリエンス全体が改善されます。ただし、言語の選択は、ユーザーのブラウザのクライアント側の機能に依存します。
Webテクノロジーと同様に、リモートスクリプティングは、クロスサイトスクリプティング（XSS）や横断的なリクエスト（CSRF）などのさまざまなセキュリティの脅威に対して脆弱です。したがって、これらの脅威から保護するために、入力検証や出力エンコードなどの適切なセキュリティ対策を実装することが重要です。
リモートスクリプトは、HTTPリクエストを使用してデータ送信を処理します。リクエストをサーバーに送信し、リクエストを処理し、応答を送信します。この応答は、クライアント側のスクリプトによって処理され、フルページのリロードなしでWebページを更新します。非同期データ交換が可能になります。つまり、ユーザーはサーバーがリクエストを処理している間、ページとの対話を続けることができます。 AjaxはXMLデータ形式もサポートしています。これは、プレーンテキストよりも構造化され、処理しやすいです。
リモートスクリプティングの一般的なユースケースは何ですか？また、無限のスクロールなど、ページを更新せずに大量のデータをロードする必要があるアプリケーションでも使用されています。ただし、最新のWebブラウザーは、役立つ開発者ツールを提供します。これらのツールを使用すると、ネットワークリクエストを検査し、コンソールログを表示し、コードを介して問題を識別および修正することができます。
リモートスクリプティングを実装するためのいくつかのベストプラクティスは次のとおりです。エラーを優雅に処理します。パフォーマンスのためのスクリプトを最適化します。適切なセキュリティ対策の実装。さまざまなブラウザでスクリプトをテストして、互換性を確保します。
以上がajax：リモートスクリプトとの使用可能な対話性の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
