Perl で、Google の PageRank を表示する方法

Perl で、Google の PageRank を表示するには以下のモジュールを使う。
ここではクライアント／サーバ間の通信、画面表示に AJAX を使っている。

ブラウザに URL を入力し、「チェック」ボタンを押す。
ブラウザからサーバに URL が送られる。
サーバ側で PageRank を計算し、ブラウザに XML として返す
ブラウザで XML を受け取り、表示

ここで、ブラウザ側 (JavaScript) で XML を受け取るには、以下の部分が重要である。

var xml = xmlHttp.responseXML;
var pagerank = xml.documentElement
                  .getElementsByTagName('PageRank')[0]
                  .childNodes[0]
                  .nodeValue;

以下はサーバ側コード、XML のフォーマット、クライアント側 JavaScript である。

使用するモジュール

use WWW::Google::PageRank;

サーバ側の CGI (Perl) コード

#!/usr/bin/perl

# created by yas 2006/01/08

use lib 'WWW::Google::PageRank モジュールまでのパス: …/lib/perl5/site_perl';

use strict;
use utf8;
use WWW::Google::PageRank;
use CGI;

our $XML_HEADER = "Content-type: text/xml\n\n"   # XML を送るときは絶対にこれが必要!!! MUST!!!
                . "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n"; #  XML Header

my $CGI   = new CGI;
my $proxy = new WWW::Google::PageRank;

my $pagerank = $proxy->get($CGI->param('url'));

my $xml = "$XML_HEADER"
        . qq|<xml><PageRank>$pagerank</PageRank></xml>\n|;
print $xml;

1;

サーバがクライアントに送る XML の例 (～で囲まれた「1」の部分が PageRank であるのでサーバがブラウザから受け取った URL によって毎回変わる)

Content-type: text/xml

<?xml version="1.0" encoding="UTF-8"?>
<xml><PageRank>1</PageRank></xml>

クライアント (ブラウザ) 側のコード

//<![CDATA[

var BASE_URL = '/perltips';
var CGI_FILE = '/pagerank.cgi';

// 特に IE に対応するために、XMLHttpRequest オブジェクトをブラウザによって作成
function createXmlHttp() {

    try {
        return new ActiveXObject ('Msxml2.XMLHTTP');
    } catch(e) {
        try {
            return new ActiveXObject ('Microsoft.XMLHTTP');
        } catch(e1) {
            try {
                return new XMLHttpRequest();
            } catch(e2) {
                return null;
            }
        }
    }
}

// メイン部分。HTML <input type="button" onClick="getPageRank"> タグの
// onClick で関連付けられている。ボタンが押されると呼び出される。
function getPageRank() {

    if ((xmlhttp = createXmlHttp()) == null) {
        window.alert('XMLHTTP Initialization Failed.');
    } else {
        xmlhttp.abort();    // 連続して HTTP 通信する場合は必ず呼び出す。
    }

    post('url=' + document.getElementById('url').value);  // submit から url を取得
}

function repaint(xml) {

   var pagerank = '';

    if(xml) {

        // IE の場合はより厳密にチェックが必要、Firefox は xml だけでよい
        if(xml.documentElement) {
            pagerank = xml.documentElement
                          .getElementsByTagName('PageRank')[0]
                          .childNodes[0]
                          .nodeValue;
        }
    }

    // このスクリプトが呼ばれる HTML には、<div id="PageRank"></div> があるとする。
    document.getElementById('PageRank').innerHTML = 'PageRank: ' + pagerank;
}

// post メソッドは、例えば getPath メソッドから呼ばれる
function post(data) {

    var xmlHttp = createXmlHttp();

    xmlHttp.onreadystatechange = function() {

        if (xmlHttp.readyState == 4) {
            var xml = xmlHttp.responseXML;
            repaint(xml);
        }
    }

    xmlHttp.open('POST', BASE_URL + CGI_FILE, true);
    xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlHttp.send(data);
}

//]]>