innerhtml.js
3.41 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
//グローバル変数の定義
var httpObj;
var timerId;
var timeout_sec = 10; //タイムアウトの秒数
// テキストの内容を表示
function dispContent(e) {
// チェックされたラジオボタンのid属性値を取得
var target_node;
if(e.target) {
target_node = e.target;
} else {
target_node = e.srcElement;
}
var checked_radio = target_node.id;
// テキストファイルのURLを定義
var target_url;
if(checked_radio == 'tokyo') {
target_url = 'content1.txt';
} else if(checked_radio == 'nagoya') {
target_url = 'content2.txt';
} else if(checked_radio == 'osaka') {
target_url = 'content3.txt';
}
// 処理を実行するための関数リファレンスを定義
var funcRef = function(text_data) {
document.getElementById('content').innerHTML = text_data;
}
// HTTP通信を開始し、完了したら上記関数を実行させる
httpRequest(target_url, funcRef);
}
// 引数に与えられたURLにHTTPリクエストを行ない、指定された関数を実行
function httpRequest(target_url, funcitonReference) {
try {
if(window.XMLHttpRequest) {
httpObj = new XMLHttpRequest();
} else if(window.ActiveXObject) {
httpObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
httpObj = false;
}
} catch(e) {
httpObj = false;
}
if(! httpObj) {
httpObjGenerateFail();
}
// タイマーをセット
timerId = setInterval('timeoutCheck()', 1000);
httpObj.open("GET", target_url, true);
httpObj.onreadystatechange = function() {
if (httpObj.readyState == 4) {
clearInterval(timerId);
if (httpObj.status == 200) {
funcitonReference(httpObj.responseText);
} else {
alert(httpObj.status + ' : ' + httpObj.statusText);
return false;
}
}
}
httpObj.send('');
}
// XMLHttpRequestオブジェクト生成に失敗した場合の処理
function httpObjGenerateFail() {
alert('ご利用のブラウザーでは、当サイトをご利用頂けません。');
return false;
}
// HTTPタイムアウト処理
function timeoutCheck() {
timeout_sec --;
if(timeout_sec <= 0) {
// タイマーをストップする
clearInterval(timerId);
// HTTPリクエストを中断する
httpObj.abort();
// エラーダイアログを表示
alert('タイムアウトです。');
return false;
}
}
// イベントリスナーをセットする
function setListeners(e) {
var tokyo = document.getElementById('tokyo');
addListener(tokyo, 'click', dispContent, false);
var nagoya = document.getElementById('nagoya');
addListener(nagoya, 'click', dispContent, false);
var osaka = document.getElementById('osaka');
addListener(osaka, 'click', dispContent, false);
}
function addListener(elem, eventType, func, cap) {
if(elem.addEventListener) {
elem.addEventListener(eventType, func, cap);
} else if(elem.attachEvent) {
elem.attachEvent('on' + eventType, func);
} else {
alert('ご利用のブラウザーはサポートされていません。');
return false;
}
}
// HTMLがロードされた際に、setListeners()関数を実行させる
addListener(window, 'load', setListeners, false);