Ajax コードはどの程度洗練されている必要がありますか?

StackOverflow https://stackoverflow.com/questions/43507

  •  09-06-2019
  •  | 
  •  

質問

多くのオンライン チュートリアルで簡単な Ajax ソース コードの例を見てきました。私が知りたいのは、サンプルのソースコードを使用しても問題ないのかどうかということです。

現実世界のアプリケーションに組み込まれるコードにさらに何か追加するものはありますか?

アプリケーションをより堅牢で安全なものにするためには、どのような手順を踏めばよいでしょうか?

Web から入手したサンプル ソース コードは次のとおりです。

function getChats() {
    xmlHttp=GetXmlHttpObject();
    if (xmlHttp==null) {
            return;
    } 
    var url="getchat.php?latest="+latest;   
    xmlHttp.onreadystatechange=stateChanged;
    xmlHttp.open("GET",url,true);
    xmlHttp.send(null);
} 

function GetXmlHttpObject() {
    var xmlHttp=null;
    try {
            xmlHttp=new XMLHttpRequest();
    } catch (e) {
            try {
                    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
    }
    return xmlHttp;
}
役に立ちましたか？

解決

あなたが投稿したコードには、重要な要素が 1 つ欠けています。関数の状態が変更されました。

自分で投稿したコードをよく理解していない場合は、getchats.php への呼び出しが完了すると、「stateChanged」関数が呼び出され、その関数が応答を処理することになります。呼び出しているスクリプトと関数自体には「gets」という接頭辞が付いているので、応答はあなたが興味を持つものであると確信しています。

それはさておき、投稿したコードを改善する方法はたくさんあります。単一の「xmlHttp」オブジェクトを宣言し、それをすべての関数で利用できるようにすることで機能すると思います（そうしないと、stateChanged 関数は応答を取得する方法がないため）。これは、最後のリクエスト (または最後のいくつか) がまだ応答していない前に AJAX リクエストを実行するまでは問題ありません。その場合、オブジェクト参照は毎回最新のリクエストに上書きされます。

また、AJAX コードには、適切なメッセージをユーザーに配信できるように、成功と失敗 (サーバー エラー、ページが見つからないなど) の場合に対応する機能が備わっています。

Web サイトで AJAX 機能を使用したいだけの場合は、次の方法を案内します。 jQuery または 似ている フレームワーク.

しかし、実際にテクノロジーと舞台裏で何が起こっているのかを理解したいのであれば、私はあなたが行っていることを続け、小規模で軽量な AJAX クラスを自分で構築しようとしているときに具体的な質問をするでしょう。これが私のやり方です。今日は jQuery フレームワークを使用していますが...舞台裏でどのように機能しているかを知ることができて、今でもうれしく思います。

他のヒント

次のようなフレームワークを使用します DOMアシスタント これはすでに大変な作業を行っており、さらに堅牢になるだけでなく、追加の便利な機能も追加されます。

それとは別に、あなたのコードはそれが仕事をするように見えます。

正直に言って、Ajax で利用できる多数のライブラリの 1 つを使用することをお勧めします。私が使う プロトタイプ 私自身、他の人は好む jQuery. 。プロトタイプはかなりミニマルなので好きです。の プロトタイプの Ajax チュートリアル それをよく説明しています。また、エラーを簡単に処理することもできます。

new Ajax.Request('/some_url',
  {
    method:'get',
    onSuccess: function(transport){
      var response = transport.responseText || "no response text";
      alert("Success! \n\n" + response);
    },
    onFailure: function(){ alert('Something went wrong...') }
  });
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top