jQuery または XMLHttpRequest を使ってサーバー上のテキストファイルを読み込む

jQuery または JavaScript の XMLHttpRequest でサーバー上にあるテキストファイルを読み込んでページに表示する例。

テキストファイルの読み込み

例えば cron を使って定期的にアマゾントップセラーの情報を取得し、サーバー上にテキストファイルとして保存しているとする。 その情報をサイト（ページ）に表示する方法はいろいろあるが、私は PHP を使ってサイトを作っているので、基本的に PHP で処理してページに表示させている。 ただ、JavaScript で処理したい場合もたまにある。 普段あまり JavaScript を使わないので、ここでは自分のサイトで使ったコードをメモしておく。

jQuery

JavaScript で何かしようと思ったら、まず思いつくのが jQuery の利用。 ここでは example.txt を読み取り、その中身を処理し、id="example" という要素にそれを追加している。 ファイルの中身は1行ごとに商品情報が書かれていて、それを配列に分解し、必要な数だけ抜き出してリストとして表示している。 何をどう処理するかは人それぞれなので、適宜自分のサイトに合わせて記述する。

$.ajax({
    type: 'GET',
    dataType: 'text',
    scriptCharset: 'UTF-8',
    timeout: 10000,
    url: '/data/example.txt'
}).done(function(data, status, xhr){
    var data_list = data.split("\n");
    var output = '';
    
    for(let i=0;i<3;i++){
        output += '<li>' + data_list[i] + '</li>';
    }
    
    document.getElementById('example').insertAdjacentHTML('afterbegin', '<ul>' + output + '</ul>');
});

XMLHttpRequest

jQuery は便利だけど、まずそれを読み込まないといけない。 読み込めなかったら処理できないし、jQuery に依存したくないときもある。 そこで XMLHttpRequest を使う。

以下のコードは上記の例とやっていることは同じ。 意外とシンプルに書けるので良いかもしれない。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/data/example.txt', true);

xhr.onreadystatechange = function(){
    if((xhr.readyState == 4) && (xhr.status == 200)){
        var data_list = xhr.responseText.split("\n");
        var output = '';
        
        for(let i=0;i<3;i++){
            output += '<li>' + data_list[i] + '</li>';
        }
        
        document.getElementById('example').insertAdjacentHTML('afterbegin', '<ul>' + output + '</ul>');
    }
}

xhr.send(null);

ここでは書いていないが、使う場合は即時関数 (function(){ ～ })(); などで囲んでおくと良い。

jQuery を使い始めると、すぐそれに頼ってしまうので反省したい。