スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
以後の更新内容の改善のために、是非ともご評価のほどよろしくお願いします!→

Ajaxでの並行処理をしていて「えっ」と思ったこと

Ajaxを楽に扱えるようになったりする「prototype.js」というライブラリを使って、諸用に片をつけようと思っていたのですが、ちょっと予想だにしていなかったことでつまづきました。

どうも、同時接続数が制限されているようです。(おそらくブラウザによるもの。)


(汚いですが)以下のコードを見てください。PHPです。

<?php
$fileName = "test.php";

if(isset($_POST['num'])){
    sleep(3);   // 3秒待機
    print date("H:i:s")." ... No." . $_POST['num'] . "<br />";
} else {
    print "<script type=\"text/javascript\" src=\"./prototype.js\"></script>\n".
          "<div id=\"result\"></div>\n".
          "<script type=\"text/javascript\">\n".
          "<!--\n".
          "function output(http){\n".
          "    document.getElementById('result').innerHTML += http.responseText;\n".
          "}\n".
          "var url = '" . $fileName . "';\n".
          "new Ajax.Request(url, {parameters:'num=1', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=2', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=3', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=4', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=5', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=6', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=7', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=8', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=9', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=10', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=11', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=12', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=13', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=14', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=15', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=16', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=17', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=18', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=19', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=20', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=21', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=22', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=23', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=24', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=25', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=26', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=27', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=28', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=29', onComplete:output});\n".
          "new Ajax.Request(url, {parameters:'num=30', onComplete:output});\n".
          "-->\n".
          "</script>\n";
}
?>

これを「test.php」という名前で保存して、あとはブラウザからアクセスするだけ。
単にAjaxのリクエストを30個連続で投げるだけのものです。
投げると、その時の時刻と渡したパラメータを出力します。
その出力をリクエスト側で受け取って、divのinnerHTMLに追加します。

実行すれば、これら30個のリクエストが一気に投げられて(sleepの時間を除いて)数秒もかからないうちに30件の結果が得られるのでは...なんて思っていました。
しかし世の中甘くはありませんでした。orz

以下、ブラウザごとの結果です。

Chrome Firefox Safari
01:54:03 ... No.2
01:54:03 ... No.1
01:54:03 ... No.3
01:54:03 ... No.4
01:54:03 ... No.6
01:54:03 ... No.5
01:54:06 ... No.7
01:54:06 ... No.8
01:54:06 ... No.9
01:54:06 ... No.12
01:54:06 ... No.10
01:54:06 ... No.11
01:54:09 ... No.13
01:54:09 ... No.14
01:54:09 ... No.15
01:54:09 ... No.16
01:54:09 ... No.17
01:54:09 ... No.18
01:54:12 ... No.19
01:54:12 ... No.20
01:54:12 ... No.21
01:54:12 ... No.22
01:54:12 ... No.23
01:54:12 ... No.24
01:54:15 ... No.25
01:54:15 ... No.27
01:54:15 ... No.26
01:54:15 ... No.28
01:54:15 ... No.29
01:54:15 ... No.30
01:54:25 ... No.3
01:54:25 ... No.1
01:54:25 ... No.2
01:54:25 ... No.4
01:54:25 ... No.5
01:54:25 ... No.6
01:54:28 ... No.9
01:54:28 ... No.7
01:54:28 ... No.10
01:54:28 ... No.8
01:54:28 ... No.11
01:54:28 ... No.12
01:54:31 ... No.14
01:54:31 ... No.16
01:54:31 ... No.13
01:54:31 ... No.15
01:54:31 ... No.17
01:54:31 ... No.18
01:54:34 ... No.19
01:54:34 ... No.21
01:54:34 ... No.22
01:54:34 ... No.20
01:54:34 ... No.23
01:54:34 ... No.24
01:54:37 ... No.25
01:54:37 ... No.26
01:54:37 ... No.27
01:54:37 ... No.28
01:54:37 ... No.29
01:54:37 ... No.30
01:54:48 ... No.16
01:54:48 ... No.7
01:54:48 ... No.9
01:54:48 ... No.6
01:54:51 ... No.27
01:54:51 ... No.29
01:54:51 ... No.17
01:54:51 ... No.30
01:54:54 ... No.24
01:54:54 ... No.25
01:54:54 ... No.3
01:54:54 ... No.15
01:54:57 ... No.19
01:54:57 ... No.12
01:54:57 ... No.21
01:54:57 ... No.20
01:55:00 ... No.11
01:55:00 ... No.8
01:55:00 ... No.28
01:55:00 ... No.18
01:55:03 ... No.23
01:55:03 ... No.1
01:55:03 ... No.5
01:55:03 ... No.4
01:55:06 ... No.26
01:55:06 ... No.14
01:55:06 ... No.13
01:55:06 ... No.10
01:55:09 ... No.22
01:55:09 ... No.2

一気には処理してくれなかった...orz

結局、ChromeとFirefoxは6つ、Safariは4つしか同時処理をやってくれないようです。
これはブラウザの仕様かな??

むぅ...とりあえず、自分が実装しようとしていたことは根本的にできなさそう...ということがわかりました。

機会があれば調べようと思いますが、まあまたいつの日にか(←いや今調べろよっ...
スポンサーサイト
以後の更新内容の改善のために、是非ともご評価のほどよろしくお願いします!→

テーマ : JavaScript /  ジャンル : コンピュータ

[JavaScript] 所持金計算スクリプト

小ネタ...というか何というか個人的に欲しかったので、
硬貨・紙幣の枚数などを入力して合計金額を出すスクリプトを書きます。
プログラム的にも工夫などない上、需要もないとは思いますが悪しからず...。

硬貨・紙幣枚数から合計金額を求める

1 5 10 50 100 500 1,000 2,000 5,000 10,000
Others(split by comma). Input positive or negative numbers.
  ¥0

以下がそのスクリプト(HTML含む)です。

<script type="text/javascript">
<!--
function calc(){
  var other = 0;
  var others = document.getElementById('others').value.split(',');
  for(var i = 0; i < others.length; i++){
    temp = parseInt(others[i]);
    other += isNaN(temp) ? 0 : temp;
  }

  var coin1 = parseInt(document.getElementById('coin1').value);
  var coin5 = parseInt(document.getElementById('coin5').value);
  var coin10 = parseInt(document.getElementById('coin10').value);
  var coin50 = parseInt(document.getElementById('coin50').value);
  var coin100 = parseInt(document.getElementById('coin100').value);
  var coin500 = parseInt(document.getElementById('coin500').value);
  var coin1000 = parseInt(document.getElementById('coin1000').value);
  var coin2000 = parseInt(document.getElementById('coin2000').value);
  var coin5000 = parseInt(document.getElementById('coin5000').value);
  var coin10000 = parseInt(document.getElementById('coin10000').value);

  coin1 = isNaN(coin1) ? 0 : coin1;
  coin5 = isNaN(coin5) ? 0 : coin5;
  coin10 = isNaN(coin10) ? 0 : coin10;
  coin50 = isNaN(coin50) ? 0 : coin50;
  coin100 = isNaN(coin100) ? 0 : coin100;
  coin500 = isNaN(coin500) ? 0 : coin500;
  coin1000 = isNaN(coin1000) ? 0 : coin1000;
  coin2000 = isNaN(coin2000) ? 0 : coin2000;
  coin5000 = isNaN(coin5000) ? 0 : coin5000;
  coin10000 = isNaN(coin10000) ? 0 : coin10000;

  document.getElementById('process').innerHTML =
    ("(" + 1*coin1 + " + " + 5*coin5 + " + " + 10*coin10 + " + " + 50*coin50 + " + " +
     100*coin100 + " + " + 500*coin500 + ") + (" + 1000*coin1000 + " + " +
     2000*coin2000 + " + " + 5000*coin5000 + " + " + 10000*coin10000 + ") + (" + other + ")");

  document.getElementById('result').innerHTML = "¥" +
    (1*coin1 + 5*coin5 + 10*coin10 + 50*coin50 + 100*coin100 + 500*coin500 +
     1000*coin1000 + 2000*coin2000 + 5000*coin5000 + 10000*coin10000 + other);
}
-->
</script>
<table border="1" cellspacing="0">
  <tr style="background-color:#dddddd; color:#000000; text-align:center;">
    <td style="width:50px;">1</td>
    <td style="width:50px;">5</td>
    <td style="width:50px;">10</td>
    <td style="width:50px;">50</td>
    <td style="width:50px;">100</td>
    <td style="width:50px;">500</td>
    <td style="width:1px;"></td>
    <td style="width:50px;">1,000</td>
    <td style="width:50px;">2,000</td>
    <td style="width:50px;">5,000</td>
    <td style="width:50px;">10,000</td>
  </tr>
  <tr>
    <td><input id="coin1" type="text" style="width:50px; text-align:right;" onKeyUp="calc()" /></td>
    <td><input id="coin5" type="text" style="width:50px; text-align:right;" onKeyUp="calc()" /></td>
    <td><input id="coin10" type="text" style="width:50px; text-align:right;" onKeyUp="calc()" /></td>
    <td><input id="coin50" type="text" style="width:50px; text-align:right;" onKeyUp="calc()" /></td>
    <td><input id="coin100" type="text" style="width:50px; text-align:right;" onKeyUp="calc()" /></td>
    <td><input id="coin500" type="text" style="width:50px; text-align:right;" onKeyUp="calc()" /></td>
    <td style="width:1px;"></td>
    <td><input id="coin1000" type="text" style="width:50px; text-align:right;" onKeyUp="calc()" /></td>
    <td><input id="coin2000" type="text" style="width:50px; text-align:right;" onKeyUp="calc()" /></td>
    <td><input id="coin5000" type="text" style="width:50px; text-align:right;" onKeyUp="calc()" /></td>
    <td><input id="coin10000" type="text" style="width:50px; text-align:right;" onKeyUp="calc()" /></td>
  </tr>
  <tr>
    <td colspan="11" style="background-color:#dddddd; color:#000000; text-align:center;">Others(split by comma). Input positive or negative numbers.</td>
  </tr>
  <tr>
    <td colspan="11"><input id="others" type="text" style="width:100%;" onChange="calc()" /></td>
  </tr>
  <tr>
    <td align="center"><input type="button" value="Calc" onClick="calc()" /></td>
    <td colspan="8" id="process" style="font-size:8px;">&nbsp;</td>
    <td colspan="2" id="result" style="background-color:#ffcccc; text-align:center;">¥0</td>
  </tr>
</table>

よし、これでお小遣い帳計算が多少楽になります(笑)
以後の更新内容の改善のために、是非ともご評価のほどよろしくお願いします!→

テーマ : JavaScript /  ジャンル : コンピュータ

[JavaScript] for-in構文にはご用心

JavaScriptで配列の要素全てを列挙したりする際には、for-in構文なんてのが便利なのですが、今回はそのfor-in構文に(というより機能拡張ウンヌンで)苦しめられましたのでメモしておきます。
(for-in構文:PerlやPHPでいうところのforeach構文です)
[2011.03.11追記]:勘違いしていたことがあるようで、この記事の下部に追記しました!

JavaScriptで配列を定義して、その全要素を列挙する際、以下のようにすればできます。
(もちろん他の方法もあります。)
// 配列変数の宣言
var ary = new Array( 10, 20, 30, 40, 50 );

// 順番にアラートを出す
for( i in ary ) {
    alert( i );
}

これを実行すると、アラートダイアログが5回連続で出るはずです。

そんな便利なfor-in構文なので、今回作っているものでも利用していました。

しかし、実はこれにはちょっと厄介なことが含まれます。


prototype.jsを使っているとマズイ

まず何が起きたかですが、

なんかヤケに多く回ってない??

...という現象です。明らかに配列の要素数より多くループしている様子でした。

<script type="text/javascript">
<!--
var ary = new Array();
for( i in ary ){
    alert( i );
}
-->
</script>

これを実行すると要素が列挙されますが、要素と言ってもnewしたばかりですから、
何も入っていません(と思いますよね。。。)

そこで実際に実行してみると、確かにアラートも何も出ません。(ぇ



しかし、問題はここからです...

<script type="text/javascript" src="./prototype.js"></script>
<script type="text/javascript">
<!--
var ary = new Array();
for( i in ary ){
    alert( i );
}
-->
</script>
(これは実行しないでください。40回くらいアラートが出ちゃいますよ^^;)

Ajaxなんかを便利に扱える、おなじみprototype.jsを読み込んだだけですが。。。
これを実行すると、下に挙げる単語がそれぞれアラートに出されます。超ウザイ。(笑)

each, eachSlice, all, any, collect, detect, findAll, grep, include, inGroupsOf, inject, invoke, max, min, partition, pluck, reject, sortBy, toArray, zip, size, inspect, map, find, select, filter, member, entries, every, some, _reverse, _each, clear, first, last,compact, flatten, without, reverse, reduce, uniq, intersect, clone, toJSON


ん??「toArray」などという文字列が出ているあたり、なんかメソッド名っぽい。。。

疑いの矛先はprototype.jsを指しました。レッツ解剖っ(ソースコード見てみました。)


あらら、どうやらArrayを拡張しているらしいです。
「Array.prototype」がどうとかなんとか。

「いやぁ、さすがprototype.jsだわあ」と思った瞬間でした。(←?)



ところで、これらはメソッドであり、配列の要素じゃないからfor-inで出てるくのはおかしいんじゃねぇの??...と若僧は思ったのですが、
そういえばこんな記事を見たことがありました。

javascriptの関数が変態すぎる - 俺のメモ
URL:http://d.hatena.ne.jp/kayai/20110131

(こちらの記事の趣旨とはあまり関係ないですが印象に残っていたので引用させていただきます。)

そうでした。関数もオブジェクトとして変数に入れられたのでした。
つまりは関数の入った変数がプロパティになっていたわけで。(ですよね??^^;)


まったく...それは困ったな...for-in構文を使うなということか...。


ふつうにforで。。。

結局はforで素直にやりゃいいんですよね、forで。

// 配列変数の宣言
var ary = new Array( 10, 20, 30, 40, 50 );

// ふつうにforで。
for( i = 0; i < ary.length; i++ ){
    alert( i );
}


このforだと、さっきの見知らぬプロパティは出ません。


あれっ、プロパティになったくせに「配列名.length」には反映されてないのかよコンチクショウッ。
(ここはよくわかっていない...)

若僧の戯言なのでご容赦をば。。。ご指摘は大歓迎でございますっ。

結局この件で1時間ほどあがいていました(泣)
もうちょっと早く解決できるようになりたいです。精進せねば(--;;


[2011.03.11] 追記:配列はfor、連想配列はfor-in

...と、ここまで書いたのですが、すみません、勘違いしている部分がありました。

まずはこちらのサイト...
JavaScript の配列と連想配列の違い
URL:http://d.hatena.ne.jp/amachang/20070202/1170386546

普段からよくPHPを使っているのですが、そこでは配列も連想配列も見境なしにforeach構文を使っていました。(もしかしてそれもダメだったりするのでしょうか。。。)

// 連想配列の宣言
var ary = { hoge : "hogeVal", foo : "fooVal" };

// 連想配列にはfor-in
for( i in ary ){
    alert( i );
}

おぉ、確かに先程のような打ち覚えのない単語は出てきません!!

つまり、配列はfor構文、連想配列はfor-in構文を使うということですね。


失礼いたしましたm(_ _;)m

他参考:『Array.prototype は使用しない方がいい? - JavaScript - 教えて!goo
URL:http://oshiete.goo.ne.jp/qa/5081024.html
以後の更新内容の改善のために、是非ともご評価のほどよろしくお願いします!→

テーマ : JavaScript /  ジャンル : コンピュータ

JavaScriptポケットリファレンスを買いました。

JavaScriptポケットリファレンス



ちょっと前までは「JavaScript」を否定する立場でしたが、


本日、技術評論社の「JavaScriptポケットリファレンス」を購入いたしました。





『技術評論社のポケットリファレンス』では、PHP版ですでにお世話になっていたので
JavaScriptもこのシリーズで学ぼうと思います。







ところで、「Ajax」って何ができるんだろ・・・   この本にもチョロッと載っていたような・・・

「非同期通信」とか何とか聞いたことあっても意味がわからない言葉が並んでましたが・・・

チャットとか作れたらいいなぁ・・・ と思いつつ今日はこれくらいで。
以後の更新内容の改善のために、是非ともご評価のほどよろしくお願いします!→

テーマ : JavaScript(ジャバスクリプト) /  ジャンル : コンピュータ

JavaScriptで、全てにチェック入れる! ?ついでに外したりデフォルトに?

JavaScriptにも興味を持ち始めたわけですが、


先日の記事での

「JavaScriptで、全てにチェック入れる! ?とんだ勘違い?」

ですが、これの一般的な利用方法としてもうちょっと改造してみました。



今度は、「全て外す」とか、「デフォルトに戻す」とか。





「デフォルトに戻すなら、inputのresetを使えば簡単にできるじゃないかっ!!」

って言われそうですね。でも、同一フォーム内に、チェックボックス以外のもの
(例えば入力欄textとか)があったら、それも含めてリセットしちゃいます。
あくまでチェックボックスだけをデフォルトに戻したいなぁ?って時に使えるかな??




これを実行すると、下 【追記】みたいになります。

続きを読む

以後の更新内容の改善のために、是非ともご評価のほどよろしくお願いします!→
カテゴリー
ようこそ!
Author: Torasuke
Profile: 地元大学の情報系学部に息をひそめる二回生。
   SA SW


ブログ内検索
最近のコメント
オススメ
京都の大学生のラボブログ
Python,Java,Objective-C,GAE,Macなど
Python独習中の大学生のブログ


ltzz.info
ここの管理者さんには謁見済み!(えっ

 Use OpenOffice.org
無補償でも良いなら、MSOfficeよりOpenOfficeで十分です。

Mozilla Firefox ブラウザ無料ダウンロード
当サイトは、Firefoxというブラウザで動作確認しています。私は以前、IE派でしたが、一度乗り換えて慣れてしまうと、Firefoxのほうが便利だということを実感しました。

是非よろしくお願いします。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。