XMLHTTPオブジェクトカプセル化技術サンプルコードの詳細説明

ajax テクノロジーの実装は主に xmlhttprequest に依存しますが、非同期データ送信のためにこれを呼び出す場合、xmlhttp は短期間のプロセスであるため (イベントの処理後に破棄されます)、オブジェクトがパッケージ化されていない場合は、 xmlhttprequest を再構築するには、呼び出しごとに大規模なコード セクションを記述する必要がありますが、これは実際には良いアイデアではありません。幸いなことに、多くのオープンソース Ajax フレームワークは、xmlhttp をカプセル化するためのソリューションを提供しています。ここでは、ajaxtags に付属するprototype-1.4.0.jsをマスターとして使用して、xmlhttpオブジェクトを再利用可能なメソッドにカプセル化する方法を確認します。

prototype.js では、最初に変数を定義します。Ajax

　 var Ajax = {
　　　 getTransport: function() {
　　　　 return Try.these(
　　　　　 function() {return new ActiveXObject('Msxml2.XMLHTTP')},
　　　　　 function() {return new ActiveXObject('Microsoft.XMLHTTP')},
　　　　　 function() {return new XMLHttpRequest()}
　　　 ) || false;
　 },
　　 
　　 activeRequestCount: 0
}

この変数は xmlhttprequest を返します。Ajax.getTransport() を呼び出すと、毎回新しい xmlhttprequest オブジェクトが返されることがわかります。

基本メソッド Ajax.Base と基本メソッドのプロトタイプは Ajax 変数で定義されます (最初、各スクリプト メソッドにはデフォルトで空のプロトタイプがあり、これは Object のプロトタイプを継承します。それを Object で変更すると、この基本メソッドは Ajax.Request に継承されます。継承されたプロトタイプの同じ名前のメソッドまたは変数が Ajax.Request に埋め込まれた場合、オーバーロードが実装されることに注意してください。

Ajax.Base プロトタイプで最も重要なのは、後で使用する setOptions メソッドです。プロトタイプの

setOptions: function(options) {
　　 this.options = {
　　　 method:　　　 'post',
　　　 asynchronous: true,
　　　 parameters:　 ''
　　 }

Requestは、Ajax.Requestプロトタイプ(Ajax.Request.prototype)を定義することで実装されます。ただし、Ajax.Request を直接呼び出すことはできません。主な理由は、Ajax.Request が統一された処理プロセスを提供していないことです。また、リクエストを通じて応答を取得する必要がある場合もあります。 (顧客がメッセージを送信したのに応答が届かないことを想像してください。それは非常に迷惑です~) プロトタイプは応答 (Ajax.Responders) もカプセル化しますが、両方は互いに独立しています。これらを統合するにはどうすればよいでしょうか。

プロトタイプには 2 つのソリューションが提供されています。1 つは Ajax.Updater で、もう 1 つは Ajax.PeriodicalUpdater です。この 2 つは、次の 3 つのパラメーターを渡す必要があるという共通点があります。たとえば、返されたデータを HTML の

に出力したい場合は、コンテナを ID の値に変更するだけで済みます。コンテナが見つからない場合は、スクリプト エラーが発生します。

url:

requestリクエストが渡される宛先。リクエスト オブジェクトはサーブレットの do*** メソッドによってのみ自動的に取得できるため、宛先はサーブレットまたは jspservlet である必要があります。

options:

構造体は、上記の Ajax.Base で定義された setOptions() のオプション構造体と同じである必要があります。空の場合、または書き込まれていない場合は、Ajax.Base で定義された初期値が使用されます (何も指定されていない場合に使用されます)。パラメータが渡されます)。

2 つの違いは、Ajax.Updater は、responseText が完全に取得され、例外が発生しない場合にのみ、コンテナにコンテンツが書き込まれることです。ただし、PeriodicalUpdater は、responseText を取得するときに書き込みます。完了したかどうかは関係ありません。取得したら、例外が発生するか、responseText が完全に取得されるまで、コンテンツをコンテナーに入力します。ほとんどの場合、最初のメソッドを使用する必要があります。これは、最初のメソッドは例外が発生したときにコンテナ内の例外情報を表示しますが、2 番目のメソッドは表示しない可能性があるためです。

xmlhttp がカプセル化されたので、必要なのは上記の 3 つのパラメーターのみです。オプション パラメーターを設定するときは、post メソッドを使用する場合はオプションの構造に従って設定する必要があることに注意してください。 opitons で postBody 属性を設定し、転送する queryString を本文に入れることもできます。 post メソッドを使用して転送するスクリプトの例は次のとおりです。

/*表单提交用post方法*/
function doRequest(container,paraments,url){
　　 var options ={
　　　 method:　　　 'post',
　　　 asynchronous: true,
　　　 postBody: paraments
　　 };
　　 new Ajax.Updater(container,url,options);　　
}

最後に言わなければならないのは、中国語のエンコードの問題です。 、プロトタイプは渡されたパラメーターには影響しません。エンコーディング変換作業が実行され、渡された各値は encodeURIComponent を通じて処理されます。エンコードは utf-8 に変換されます。バックグラウンドでリクエストを取得する場合は、ページのエンコード形式に関係なく、一律に request.setCharacterEncoding("UTF-8") を使用してリクエストのエンコードを設定する必要があります。 post メソッドを使用してデータを転送すると、自動的に実行されます:

request． setHeader('Content-type','application/x-www-form-urlencoded') 送信データのエンコード形式が正しいことを確認してください。

以上がXMLHTTPオブジェクトカプセル化技術サンプルコードの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。