勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

Ajaxの負荷対策

      2014/07/03

Ajaxを使ってボタンを押した際に表示を切り替える処理。
都度Ajaxを使ってたんだけど、それだとサーバーに負荷が
かかるとのご指摘で、その対処法。

-----------
Ajaxでカンマ区切りの文字列を取得
↓↓
受け取ってカンマ取り外して配列化
↓↓
配列から一つずつ取り出す。取り出した分配列から削除
↓↓
無くなったら冒頭に戻る
-----------

というもので、DBへの接続を極力減らす。

$(function(){

//変数を宣言。グローバル変数として使えるようにする。
var name_js = "";
var name_array = "";

//Ajax部分を関数化
function name_ajax(){
$.ajax({
dataType : "jsonp",
url: "https://aaa/bbb/ccc/index.php",
success: function(msg){
if(msg){
//文字列を変数に入れる
name_js = msg;
//文字列をカンマを取って配列化
name_array = name_js.split(",");
//配列の一番最初の値を取り出す
$("#name").val(name_array[0]);
                    //取り出したところを配列から排除する
name_array.splice(0, 1);
}
}
});
}

    //ページ読み込み時にAjaxを使用
name_ajax();

    //マウスボタンを押した際に処理
$("#name_change").mousedown(function(){
        //配列の中身が0の場合の処理
if (name_array.length == 0) {
            //Ajaxの関数を呼び出して配列取得
name_ajax();
        //配列の中身がある場合の処理
} else {
            //配列の一番最初の値を取り出す
            $("#name").val(name_array[0]);
            //取り出したところを配列から排除する
name_array.splice(0, 1);
}
});
});

値取り出し、配列から排除を2回書いているので、

もうちょっとスマートに出来そう。

 - Ajax, jQuery

  関連記事

jquery_logo
classの取り扱い

jQueryでclassを扱う際、 //id=aaaにclass=testを付与 ...

jquery_logo
jQueryのtoggleに引数

社内のソースで、 $(".hoge").toggle(flg == 1? fal ...

jquery_logo
jQueryでチェックボックスの全チェック&チェック解除

フォームのチェックボックスで「全てにチェックを入れる」「全てのチェックを外す」と ...

jquery_logo
jQueryプラグインの作成

面白そうだったのでメモ。 ■参考サイト http://www.entacl.in ...

javascript_logo_unofficial-300x300
他サイトのRSS情報を画像付きで表示させる

WordPressでAというサイトを作成し、AのRSS情報をBというサイトでアイ ...

jquery_logo
スクロールしてもついてくる追尾型の広告を作る方法

スマホサイトとかでよく見る、スクロールしてもページ下部とかに常時表示されている追 ...

jquery_logo
jQueryとCSSの連携

$(function(){ $("#change_small").click(f ...

jquery_logo
テキストエリアを自動でリサイズ

改行するだけで勝手にリサイズしてくれるので、 ユーザー用でも管理用でも使えそう。 ...

jquery_logo
画像をつなぎ合わせて360度ビューの様に見せるjQueryプラグイン

3Dデータではなく、コマ送りになっている2D画像を用いて360度ビューの様に見せ ...

jquery_logo
jQueryで画像を遅延ロードする(jquery.lazyload.js)

画像を遅延ロードさせたい時にはlazyloadが便利。 ■ダウンロード http ...