SSIは使わなくていい。Ajaxでも大丈夫。
指定したIDへAjaxでのファイル追加を関数にしています。
引数はID名とファイルのパスにしているので、サイト内で共通して使い回せます。
まずはjQueryでどう書いているか。
JavaScript（jQueryあり）
function ssiLoad(target, file) {
var targetObj = $(target);
$.ajax({
cache: 'false',
dataType: 'html',
url: file,
success: function(data) {
targetObj.append(data);
},
error: function() {
return false;
},
complete: function() {
return true;
}
});
}jQueryでは引数をjQueryのセレクタにしているので、クラス指定も可能です。
そしてjQueryなしで書く場合は？
JavaScript（jQueryなし）
function ssiLoad(targetId, file) {
var ajaxData = new XMLHttpRequest();
ajaxData.open('GET', file, true);
ajaxData.responseType = 'document';
ajaxData.setRequestHeader('Pragma', 'no-cache');
ajaxData.setRequestHeader('Cache-Control', 'no-cache');
ajaxData.setRequestHeader('If-Modified-Since', 'Thu, 01 Jun 1970 00:00:00 GMT');
ajaxData.send(null);
ajaxData.onreadystatechange = function() {
if (ajaxData.readyState === 4 && ajaxData.status == 200) {
var ajaxBody = ajaxData.response.querySelector('body');
var ajaxScript = ajaxBody.querySelectorAll('script');
if (ajaxScript.length > 0) {
var ajaxScriptList = new Array();
for (var i = 0, len = ajaxScript.length; i < len; i++) {
ajaxScriptList[i] = document.createElement('script');
ajaxScriptList[i].innerHTML = ajaxScript[i].innerHTML;
ajaxScript[i].parentNode.removeChild(ajaxScript[i]);
}
document.getElementById(targetId).innerHTML = ajaxBody.innerHTML;
for (var j = 0, len = ajaxScript.length; j < len; j++) {
document.getElementById(targetId).appendChild(ajaxScriptList[j]);
}
} else {
document.getElementById(targetId).innerHTML = ajaxBody.innerHTML;
}
} else {
return false;
}
}
ajaxData.onload = function() {
return true;
}
}ここだけ見るとjQueryに比べて長くなりましたが、jQueryを読み込みして無いのでページ全体では縮小するはずです。
「ajaxData.readyState」の中で読み込んだファイルからHTMLを取得して、IDへ書き込みしています。
jQueryはappendするだけでした。
jQueryなしでは、Ajaxのデータからscriptタグを見つけて、取り除きます。
先に残ったHTMLを書き込み、scriptタグを追加します。
innerHTMLで全部書き込みしたい所ですが、scriptタグ内の記述が動作してくれません。
読み込むファイルにscriptタグを書かないようにすれば、
「ajaxData.readyState」の中が2行になるので、jQueryと比べても書かれてる内容はそんなに大差なくなるんですけどねぇ。
JavaScript（共通ファイル内にscriptタグがない）
var ajaxBody = ajaxData.response.querySelector('body');
document.getElementById(targetId).innerHTML = ajaxBody.innerHTML;前回の続き、おまけ記事でした。