fc2ブログ
 
■プロフィール

クリエイトウェーブ

Author:クリエイトウェーブ
開発における、諸々を書いていきたいなと思っています。
mail : info@createwave.jp

■最近の記事
■カテゴリー
■最近のコメント
■月別アーカイブ

■最近のトラックバック
■ブログ内検索

■RSSフィード
■リンク
javaScriptでGETやPOST通信の同期、非同期
おつかれさまです。
フッチーです。

クリエイトウェーブは、去年後半までActionScript3案件が80%以上という状況でしたが、去年後半から状況が変わってきています。現在はunity案件が60%、ActionScriptが10%、HTML5が20%、HP制作が10%という状況でしょうか。(あくまで感覚です・・・)

予想ですが、今年後半は、unity40%、ActionScript3が25%、HTML5が25%、HP制作10%ぐらいになるのではないかと思っている所です。

さて、最近はHTML5のゲーム制作も良く行なっています。Canvasという機能を使いFlashのようなゲームを作るのです。
jActionというオリジナルフレームワークも開発中です。
デジタルエージェンシーtadashikuという会社様と共同でフレームワークの展開も行なっています。

http://jaction.info/
良かったら使ってみてください。

HTML5(Canvas上の)ゲーム制作そのものは、大分こなれてきました。Canvasとかイベント制御の命令ばっかり書いてたのですが、SNSゲームとか考えるとやっぱり通信は大事。 

で、色々調べてやってみました。
var url = "get_test";
var request = new XMLHttpRequest();
request.open("GET", url, true); //trueで非同期通信
request.send("");

request.onreadystatechange = function()
{
    if (request.readyState == 4 && request.status == 200)
    {
        console.log(request);
    }
    else
    {
        console.log("失敗");
    }
}

たしかに動いてるけど、あれれれれ!? 
console.log(request);
が3回実行されてしまうぞ!?

PCのGoogleCrome、アンドロイド、iPhone全部やってみたけど3回実行されてる・・・
まさか、通信が3回発生してるのでは? と思いPHP側でログを書きだしてみると1回だけで一安心。

onreadystatechange は、通信のステータスが変化する度に反応するイベントなのだなと思ったら、そのとおりだった。(メソッド名がいかにもそうなので、気づけ!って感じですが><)

読みきった最後の1回だけでいいのにと思っていたら、ちゃんとありました。
onreadystatechange ではなく、onload

まとめると、こうなります。

●同期通信
var url = "get_test";
var request = new XMLHttpRequest();
request.open("GET", url, false); //falseで同期通信
request.send("");

//同期通信の場合は、次の行で答えが帰ってくる
if (request.readyState == 4 && request.status == 200)
{
    console.log(request);
}

●非同期通信
var url = "get_test";
var request = new XMLHttpRequest();
request.open("GET", url, true); //trueで非同期通信
request.send("");

//非同期通信で読み込み終了時に値をとる
request.onload = function()
{
    if (request.readyState == 4 && request.status == 200)
    {
        console.log(request);
    }
    else
    {
        console.log("失敗");
    }
};


//非同期通信でreadyStateが変化する度に値をとる
//今回の実験では3回呼ばれる
request.onreadystatechange = function()
{
    if (request.readyState == 4 && request.status == 200)
    {
        console.log(request);
    }
    else
    {
        console.log("失敗");
    }
};

個人的には、非同期通信でonload 命令の方法が一番良く使いそう。
非同期じゃないと、答え帰ってくるまでに、ローディング中とかの演出が出来ないので

ちなみに、この命令はIEとかじゃ動かないんじゃないかなあと思っているのですが、スマフォゲームのみをターゲットにしてるので、個人的には気にしてなかったりします。

だってPCはFlashがあるし(笑
個人的には、HTML5とFlashでは開発コストに差がありすぎ&パフォーマンスも差がありすぎ と感じてます。

HTML5のすぐ動作実験できるとかデバッグの優位性とかを書いてる人もたまにいますが、jsファイルを生で置く時点でインタプリタなので、そうなるのは当たり前。 かわりにパフォーマンスとトレード関係なのでFlashと比べるとどうしても遅いです。PCでは、充分なスピードでるので、CPUの発展やjsエンジンの発展で吸収されていくでしょうが、当分の間悩まされそうです。

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

カテゴリー:HTML5/javaScript | TM(0) | CM(1)
次のページ