fc2ブログ

Home > user javascript > XMLHttpRequestを使ってみた

XMLHttpRequestを使ってみた

user javascript

XMLHttpRequestは HTTP通信を行う JavaScriptオブジェクト。ページ遷移無しでサーバとデータ交換できるため、いわゆる Ajaxで良く使われていると。

XMLHttpRequestの流れ

  1. XMLHttpRequestオブジェクトを生成
  2. リクエストの初期化
  3. リクエストを送信
  4. レスポンスを受信

例として、はてなブックマークのページからキーボードショートカットのヘルプのデータを取ってくるスクリプトを書いてみた。

はてなブックマークのページを開いて、hを押すと、キーボードショートカットのヘルプのページからデートを受け取り、加工したショートカットの説明を新しいウィンドウに開く。

Operaのポップアップの設定を「ポップアップをバックグラウンドで開く」または「すべてのポップアップを有効にする」にしておく。ポップアップの設定は、サイト設定の編集>一般設定または設定>一般設定から行う。

// ==UserScript==
// @include http://b.hatena.ne.jp/*
// @exclude
// ==/UserScript==

document.addEventListener('load', function() {
    Bookmark.keybind.add('h', function() {
        // XMLHttpRequestオブジェクトを生成
        var req = new XMLHttpRequest();

        // レスポンスの処理
        req.onreadystatechange = function () {
            // レスポンスを受信
            if (req.readyState == 4 && req.status == 200) {
                var key = req.responseText.match(/<ul class="help">(.|\n|\r)*?<\/ul>/);
                var keyhelp = '<style>*{font-size:12px;}</style>' + key[0];
                var w = window.open('','_blank','width=580,height=220');
                w.document.write(keyhelp);
                w.document.close();
                w.focus();
            }
        };

        // リクエストの初期化
        req.open('GET', 'http://b.hatena.ne.jp/help/keybind', true);
        // リクエストを送信
        req.send(null); 
    });
}, false);

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/119-faa7e021
Listed below are links to weblogs that reference
XMLHttpRequestを使ってみた from Karafuto Blog

Home > user javascript > XMLHttpRequestを使ってみた

おまかせリンク(R)
全記事表示リンク
Search
Meta
Feeds

Page Top