[Javascript] Ajaxライブラリ

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

「jQueryを使えばいいじゃない」とよく言われるが、たかが外部サーバーからデータを取得するだけの事を自分で行えないのが嫌だったので、以前から自作したライブラリを使っていたが、この度、不具合を発見したので、修正版を公開しておきます。

過去の記事

WEBページ内で外部サーバーに設置してあるTEXTファイルを読んだり、書いたりするために、URLに対してデータをリクエストして、返り値を取得した後
イベント処理として関数を実行できるライブラリを作っていた。

[プログラム学習] JavaScript #4 「ファイル読み込み」
[プログラム学習] JavaScript #5 「ファイル書き込み」

改修版

解説

今回発見した問題点というのは、このAJAX処理を同一ページ内で連続して実行した時に、ライブラリ内で使っている変数が、後から実行した処理が上書きしてしまうという不具合を見つけた。
例えば、複数のリスト型エレメントがあった場合、そのリスト1つずつにサーバーに問い合わせてそれぞれ別の値を返す処理を入れた時に、通常のfor分内でこのajax処理を行なってしまうと、楽勝で結果がバグってしまうのである。

このバグを修正するのは、ぶつかっている変数の「httpoj」の部分をグローバル変数になってしまっているので、これをローカル変数にして、関数が呼ばれる度に完結させなければいけない。
そして、「createHttpRequest」関数をnew演算子を使用して、これにより関数を呼び出す度にインスタンス化されるので、結果グローバルから上書きされることがなくなるのだ。

以前のバージョンと変えたのは、set関数の中身だけで、使い方は互換性をもたせているので、ライブラリを更新するだけでバグが無くなるハズ。

使い方

上記をサンプルとして、適宜内容を変更することでサーバー通信が可能になる。
今回のライブラリ改修で、連続アクセスも可能になるので、より強固なライブラリになったという事だ。
なんか、バグが治って、少しうれしい・・・

2 comments

  • 【送信Query仕様】
    POST送信を行う場合にQuery情報の登録方法は2通りの仕様を採用しています。

    1. 配列方式

    Ex) querys:[ “aa[]=1” , “aa[]=2” , “aa[]=3” ]
    この方法のメリットは、PHPサーバーへのクエリ送信を行う場合にExの様に同じkey名をセットする事ができます。

    2. オブジェクト方式

    Ex) quert:{ “aa”:1 , “bb”:2 , “cc”:3 }
    スタンダードな方法なので、通常はこちらを使うほうが分かりやすいかもしれません。

    注意点

    クエリ設定を行なってmethodを「GET」にすると、ライブラリ内で自動的にURLにクエリを追加する方式になりますが、古いブラウザなどは数KbのURLしか対応していないものもあるので、長文送信の場合はPOSTで行いましょう。
    また、urlの箇所にGET記述を行う場合は、POST設定を行なってもurl部分はGET記述で送信されます。
    これはサーバーセキュリティでPOSTとGETを切り分けている場合を想定しているので、ライブラリでの対応範囲を広げるための処置なので、ご自身で切り分けてご使用ください。

  • ajax処理で不具合を見つけたので改修をしました。

    【issue】
    「content-type」が「application/x-www-form-urlencoded」に固定されている。

    【dealing with】
    optionに「type」を追加して、「content-type」を個別にセットできるようにした。
    ※デフォルト(指定なし)は「application/x-www-form-urlencoded」

    【source】

    【how to use】

    【注意点】
    type指定する時は、methodを「get」にしてください。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です