外部HTMLをAjaxで読みこんで表示するAjaxViewer
最近ようやくJavaScriptの勉強を始めました。
いままではJavaScriptのオブジェクト指向的な部分が全く分かっていなかったのですが、ようやく少し分かり始めた気がします。
今日はJavaScriptの勉強を兼ねて、外部のHTMLを非同期に読み込んで指定されたDOM要素の中に吐き出すスクリプトを書いてみました。元々「京の路（MovableType）」のサイドバー再構築の負荷を軽減するため、別ファイルに書き出したサイドバーをAjaxで読み込んでいたのですが、今回書いたスクリプトはそこで使っていたスクリプトをオブジェクト指向的に書き直したものです。
「こういう風に書くともっとスマートだよ」とか、アドバイスや感想などいただけるとうれしいです！
LANG : JAVASCRIPT
-
var AjaxViewer = function( id ) {
-
this.initialize( id );
-
};
-
-
AjaxViewer.prototype = {
-
/* デフォルトでは ajax_viewer_id を書き換える */
-
id : 'ajax_viewer_id',
-
-
initialize : function( id ) {
-
/* 引数で id が与えられたら this.id を変更 */
-
if ( id ) this.id = id;
-
-
/* XMLHttpRequest を生成 */
-
if ( window.XMLHttpRequest ) {
-
// Firefox, Safari, IE7
-
this.request = new XMLHttpRequest( );
-
} else {
-
try {
-
// IE 6.0 以上
-
this.request = new ActiveXObject( 'Msxml2.XMLHTTP' );
-
} catch( e ) {
-
try {
-
// IE 5.5 以下
-
this.request = new ActiveXObject( 'Microsoft.XMLHTTP' );
-
} catch( e ) {
-
this.request = null;
-
}
-
}
-
}
-
},
-
-
escape_for_safari : function( low_text ) {
-
/**
-
* Safari の文字化対応
-
* （参考：http://kawa.at.webry.info/200511/article_9.html）
-
*/
-
if ( navigator.appVersion.indexOf( 'KHTML' )> -1 ) {
-
var escaped_text = escape( low_text );
-
if ( escaped_text.indexOf( '%u' ) <0 &&
-
escaped_text.indexOf( '%' )> -1 ) {
-
return decodeURIComponent( escaped_text );
-
}
-
}
-
return low_text;
-
},
-
-
callback : function( self ) {
-
var area = document.getElementById( self.id );
-
area.innerHTML = self.escape_for_safari( self.request.responseText );
-
},
-
-
load : function( url ) {
-
if ( !this.request ) return;
-
this.request.open( 'GET', url, true );
-
/**
-
* 内部で定義された function() では this にアクセスできないので
-
* this の代わりに self という変数を用意する
-
* （参考：http://d.hatena.ne.jp/cloned/20070301）
-
*/
-
var self = this;
-
this.request.onreadystatechange = function( ) {
-
if ( self.request.readyState == 4 &&
-
self.request.status == 200 ) {
-
self.callback( self );
-
}
-
};
-
this.request.send( '' );
-
}
-
-
};
使い方は以下の通り。
あらかじめ外部HTMLを吐き出すために、指定したid要素（ここでは'menu'）を持つdivを用意しておいてください。
LANG : JAVASCRIPT
-
/* idを引数で渡す */
-
var menu = new AjaxViewer( 'menu' );
-
/* urlを引数で渡す */
-
menu.load( 'http://blog.matake.jp/menu.html' );
