JavaScript - ダイナミックなデータ(非同期処理、データ取得中の表示、プログレスバー)

Head First JavaScript
頭とからだで覚えるJavaScriptの基本
(オライリージャパン)
Michael Morrison (著) 豊福 剛 (翻訳)

開発環境

• OS X Mavericks - Apple(OS)
• Emacs (CUI)、BBEdit - Bare Bones Software, Inc. (GUI) (Text Editor)
• Safari、Firefox + Firebug (Webプラウザ、プラグイン)
• JavaScript (プログラミング言語)
• jQuery (JavaScript Library)

Head First JavaScript ―頭とからだで覚えるJavaScriptの基本( Michael Morrison (著), 豊福 剛 (翻訳)、オライリージャパン)の12章(ダイナミックなデータ)、自分で考えてみよう(p.571)を解いてみる。

その他参考書籍

• JavaScript 第6版
• JavaScriptリファレンス 第6版
• JavaScriptクックブック
• jQueryクックブック

自分で考えてみよう(p.571)

コード(BBEdit)

ajax.js

var Blog = function (date, body, image) {
        this.date = date ? new Date(date) : new Date();
        this.body = body || 'Nothing going on today';
        this.image = image;
    },
    AjaxRequest = function () {
        this.request = null;
        if (window.XMLHttpRequest) {
            try {
                this.request = new XMLHttpRequest();
            } catch (e) {
                this.request = null;
            }
        } else if (window.ActiveXObject) {
            try {
                this.request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    this.request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    this.request = null;
                }
            }
        }
    },
    getText = function (elem) {
        var text = '',
            i,
            max,
            child,
            value,
            nodes;
        if (elem) {
            if (elem.childNodes) {
                for (i = 0, max = elem.childNodes.length; i < max; i += 1) {
                    child = elem.childNodes[i];
                    value = child.nodeValue;
                    if (value) {
                        text += value;
                    } else {
                        nodes = child.childNodes;
                        if (nodes) {
                            value = nodes[0].nodeValue;
                            if (value) {
                                text += value;
                            }
                        }
                    }
                }
            }
        }
        return text;
    },
    div = document.getElementById('d0'),
    contents = [],
    ajax_req,
    url = 'http://mkamimura.com/kamimura_blog/javascript/' +
            'head_first_javascript/blog.xml',
    handler = function () {
        var xml_data,
            blog,
            title,
            author,
            entries,
            entry,
            i,
            max;
        if (ajax_req.getReadyState() === 4 && ajax_req.getStatus() === 200) {
            xml_data = ajax_req.getResponseXML();
            blog = xml_data.getElementsByTagName('blog')[0];
            title = blog.getElementsByTagName('title')[0];
            Blog.title = getText(title);
            author = blog.getElementsByTagName('author')[0];
            entries = blog.getElementsByTagName('entry');
            Blog.prototype.signature = getText(author);
            for (i = 0, max = entries.length; i < max; i += 1) {
                entry = entries[i];
                contents.push(new Blog(
                    getText(entry.getElementsByTagName('date')[0]),
                    getText(entry.getElementsByTagName('body')[0]),
                    getText(entry.getElementsByTagName('image')[0])));
            }
            Blog.showBlog(5);
        }
    },
    // 読み込みデータの読み込み中はプログレスバーを表示
    loadBlog = function () {
        div.innerHTML = '読み込み中 <progress />'
        ajax_req.send('GET', url, handler)
    };

Date.prototype.shortFormat = function () {
    return (this.getMonth() + 1) + '/' + this.getDate() + '/' +
        this.getFullYear();
};

Blog.blogSorter = function (entry1, entry2) {
    return entry2.date - entry1.date;
};
Blog.showBlog = function (n) {
    var blog_html = '<div>' + Blog.title + '</div>',
        i,
        highlight = true;
    contents.sort(Blog.blogSorter);
    if (!n) {
        n = contents.length;
    }
    for (i = 0; i < n; i += 1) {
        blog_html += contents[i].toHTML(highlight);
        highlight = ! highlight;
    };
    div.innerHTML = blog_html;
};
Blog.showSignature = function () {
    return 'This blog created by ' + Blog.prototype.signature;
};
Blog.prototype.toHTML = function (highlight) {
    var blog_html = highlight ? '<div style="background-color: #EEEEEE;">' :
                                '<div>';
    blog_html += '<strong>' + this.date.shortFormat() + '</strong><br />';
    if (this.image) {
        blog_html += '<table><tr><td><img src="' + this.image + '" /></td>' +
                '<td style="vertical-align:top">' + this.body + '</td></tr>' +
                '</table>';
    } else {
        blog_html += this.body + '<br />';
    }
    blog_html += '<em>' + Blog.showSignature() + '</em></div><br />';
    return blog_html;
};

AjaxRequest.prototype.send = function (type, url, handler, post_data_type,
        post_data) {
    if(this.request !== null) {
        this.request.abort();
        url += "?dummy=" + new Date().getTime();
        
        try {
            this.request.onreadystatechange = handler;
            this.request.open(type, url, true);
            
            if (type.toLowerCase() === 'get') {
                this.request.send(null);
            } else {
                this.request.setRequestHeader('Content-Type', poast_data_type);
                this.request.send(post_data);
            }
        } catch (e) {
            div.innerHTML = 'サーバとの通信でAjaxエラー\n' + '詳細: ' + e;
        }
    }
};
AjaxRequest.prototype.getReadyState = function () {
    return this.request.readyState;
};
AjaxRequest.prototype.getStatus = function () {
    return this.request.status;
};
AjaxRequest.prototype.getResponseXML = function () {
    return this.request.responseXML;
};

ajax_req = new AjaxRequest();
loadBlog();