JavaScript本格入門を読む・10

Ajaxアプリケーションで構造データを扱う

昨日モヤモヤしてたけど、yahoo周りは本を読むだけにして、JASONPのほうは書くことにしました。

入力された値をもとに問い合わせURLを作成し、その結果をXMLデータとして出力する

これがね、やりたかったんだけどね・・・

JSONデータを扱う

・eval関数を利用すれば、そのままオブジェクトとしてJavaScriptのコード内で利用できる
・XMLに比べるとデータサイズをおさえられる

クロスドメイン環境でAjax技術を実装する

スクリプトタグであれば、外部サーバからもスクリプトを読み込める

よし、はてなのほう書くぞ。

http://b.hatena.ne.jp/entry/jsonlite/?callback=show&url=http%3A%2F%2Fwww.nicovideo.jp

まずはこれではてながどのような情報を返すのか見る。

function search(){
    var url = 'http://b.hatena.ne.jp/entry/jsonlite/?callback=show&url='
    + encodeURIComponent(document.fm.url.value);
    var scr = document.createElement('script');
    scr.type = 'text/javascript';
    scr.src = url;
    document.getElementsByTagName('body').item(0).appendChild(scr);
}
function show(data){
    var count = document.getElementById('count');
    var result = document.getElementById('result');
    result.innerHTML = '';
    if(data == null){
        count.innerHTML = 0;
    } else {
        count.innerHTML = data.count;
        var ul = document.createElement('ul');
        for (var i=0; i<data.bookmarks.length; i++){
            var li = document.createElement('li');
            var anchor = document.createElement('a');
            anchor.href = 'http://b.hatena.ne.jp/' +bm.user
            var text = document.createTextNode(bm.user + '' +bm.timestamp);
            anchor.appendChild(text);
            li.appendChild(anchor);
            ul.appendChild(li);
        }
        var result = document.getElementById('result');
       result.appendChild(ul);
    }
}
（中略）
<form name="fm">
<label>URL:
<input type="text" name="url" size="50"
        value="http://www.nicovideo.jp" /></label>
<input type="button" id="disp" value="検索" onclick="search()" />
</form>
<hr />
<span id="count">-</span>件、ブクマされています。
<div id="result"></div>

ひゃっほーすごい。
なんか今までの集大成ってかんじ！むしろspan久々に書いたｗ
これがスクリプトタグで読み込んで処理できるなんてすごい・・・すごいよ！

9.jQuery

ついにやってきたぞ最終章！（何故なら「10.現場で避けて通れない応用知識」は現場に出ないのでいらんだろ、って思って////）
えーと、まずはjQueryをダウンロードするのか。
Download jQuery | jQuery
どれダウンロードすればいいかわからなくて色々ぐぐってしまった・・・
とりあえず2.1のminiでいいのかな。

条件に合致したデータを抽出する

<div id="list">
    <table border="0">
        <tr>
            <td><img src="http://ch.res.nimg.jp/img/system/blog/ch2526250.jpg" height="160" width="120" /></td>
            <td><img src="http://ch.res.nimg.jp/img/system/blog/ch2567654.jpg" height="160" width="120" /></td>
            <td><img src="http://ch.res.nimg.jp/img/system/blog/ch2584861.jpg" height="160" width="120" /></td>
            <td><img src="http://ch.res.nimg.jp/img/system/blog/ch2581686.jpg" height="160" width="120" /></td>
            <td><img src="http://ch.res.nimg.jp/img/system/blog/ch1254.jpg" height="160" width="120" /></td>
            <td><img src="http://ch.res.nimg.jp/img/system/blog/ch65001.jpg" height="160" width="120" /></td>
        </tr>
    </table>
</div>
(略)
        $('#list img').animate({width:240, height:320}, 3000)

ななんじゃこりゃーーーーー
1行しか書いてないよ！？うそっいつものgetElementByIdをせこせこ書くのはどうしたんですかーーーー
jQueryすごすぎじゃない！？すごい・・・上のはなんだったんだってくらいすごい・・・
ちょっとここ数ヶ月で1番感動したわ。
興奮しすぎてアップしてみた。
ブロマガ動くよ

複数のメソッドを続けて呼び出す

<select id="channel">
    <option value="video">ソードアート・オンラインⅡ　第1話「銃の世界」</option>
    <option value="blomaga">MSSPブロマガ</option>
    <option value="video">美少女戦士セーラームーンCrystal　Act.1 うさぎ-SAILORMOON-</option>
    <option value="blomaga">ニコニコゲーム実況チャンネル ブロマガ</option>
    <option value="video">アルドノア・ゼロ　第1話「火星のプリンセス」</option>
（中略）
        $('<option></option>')
                .attr('value', 'js_master')
                .text('redcat1113の秘密の部屋')
                .css('background-color', '#FFff00')
                .appendTo('#channel');

CSSが動かないーと思ったらローカルだったからか。アップしたら動きました。
チャンネルだよ

<select id="channel">
    <option class="video">ソードアート・オンラインⅡ　第1話「銃の世界」</option>
    <option class="blomaga">MSSPブロマガ</option>
    <option class="video">美少女戦士セーラームーンCrystal　Act.1 うさぎ-SAILORMOON-</option>
    <option class="blomaga">ニコニコゲーム実況チャンネル ブロマガ</option>
    <option class="video">アルドノア・ゼロ　第1話「火星のプリンセス」</option>
</select>
（中略）
        $('#channel').
                find('option.video').css('backgroundColor', '#66ccff').end().
                find('option.blomaga').css('backgroundColor', '#ccffcc');

こっちもアップ。
チャンネル2だよ

イベントリスナを登録する

    $(
            function(){
                $('#btn').click(
                        function(){
                            window.alert('ボタンがクリックされたよ');
                        }
                );
            }
    );
    //-->
（略）
<input type="button" id="btn" value="ダイアログ表示"/>

イベントリスナのクロスブラウザ対応もjQueryがブラウザ間の仕様差を吸収してくれるんだって！
ほんと、jQueryがいいこすぎてやばいわ・・・

jQueryでAjaxを実装する

またyahooJSONなのでここは読むだけ。やっぱすっきりしたなー

サーバからの応答をそのままページに反映する

おおまたPHPか・・・id:fukkenに教えてもらった
PHP IDE :: JetBrains PhpStormこれをいれたぞ！

<?php
require_once 'magpie/rss_fetch.inc';
define('MAGPIE_OUTPUT_ENCODING','UTF-8');
define('MAGPIE_CACHE_ON', TRUE);
$rss = fetch_rss($_REQUEST['url']);
mb_convert_variables('UTF-8', 'auto', $rss);
print('<ul>');
foreach($rss->items as $item){
    $pub = $item['pubdate']==null ? $item['dc']['date'] : $item['pubdate'];
    ?>
<li>
    <a href='<?php print($item['link']); ?>'>
        <?php print($item['title']); ?></a>
        (<?php print(date('Y/m/d',strtotime($pub))); ?>）
</li>
<?php } ?>
</ul>

PHP。やっぱりサジェストありがたいけど、＝周りが苦手

$(
        function() {
            $('#disp').click(
                    function() {
                        $('#result').load('rss.php', $('form').serializeArray());
                    }
            );
        }
);
(中略)
<form>
    URL：
<input type="text" name="url" size="50"
       value="http://www.wings.msn.to/contents/rss.php" />
<input type="button" id="disp" value="読み込み" />
    </form>
<hr />
<div id="result"></div>

RSSフィード
そして動かないわけだよね。
diffって直しても動かない・・・
なんか昨日もだけど、同じディレクトリにあるファイルを読みにいってないような気がする・・・
つまりは私がジオシティーズの配置を間違っているのではないだろうか。
がーん。道のりは険しいぜ。
今日はここまでにしておくか。
たぶん明日が最後。