- PR -

Ajaxについて質問です。

1
投稿者投稿内容
LARK
会議室デビュー日: 2004/03/22
投稿数: 5
投稿日時: 2006-03-13 09:25
本当に初心者で申し訳けないのですが、教えていただけませんでしょうか。
外部テキストファイルを読みに行き、HTMLに読み込み表示させるのには成功したのですが、１ページに何箇所も読み込み表示させたい箇所があり、複数枚のテキストファイル毎に複数個所に表示させたいのです。
本など買って色々と試行錯誤したのですが、どうしてもうまくいきません。
複数毎のテキストファイルを１箇所に表示させる事はできています。
具体的には<div id=disp1></div>の場所にしか表示されないので、
<div id="disp2">・・・とidを複数設定できたら良いのですが。。。

以下私が買った本についていたjsファイルのソースを少しいじってみたものです。
-------------------------ここから
//グローバル変数の定義
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;
}
// Safari対策
if (target_node.nodeType == 3) {
target_node = target_node.parentNode;
}
var checked_radio = target_node.id;
// テキストファイルのURLを定義
var target_url
if(checked_radio == 'text1') {
target_url = 'text1.txt';
} else if(checked_radio == 'text2') {
target_url = 'text2.txt';
} else if(checked_radio == 'text3') {
target_url = 'text3.txt';
}
// 処理を実行するための関数リファレンスを定義
var funcRef = function(text_data){
document.getElementById('disp1').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 text1 = document.getElementById('text1');
addListener(text1, 'click', dispContent, false);
var text2 = document.getElementById('text2');
addListener(text2, 'click', dispContent, false);
var text3 = document.getElementById('text3');
addListener(text3, '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);
-----------------------------ここまで
何卒宜しくお願い致します。
mio
ぬし
会議室デビュー日: 2005/08/25
投稿数: 734
お住まい・勤務地: 神奈川県
投稿日時: 2006-03-13 10:50
>document.getElementById('disp1').innerHTML = text_data
ここが決めうちなのが、disp1にしか入らない原因ですが、disp1、disp2への表示を、どういうトリガーで切り替えるんでしょうか？

それとも、複数のファイルを読んで、それぞれdisp1、disp2へ入れたいんでしょうか？

後者であれば、コールバック関数を増やして、httpRequestを2回呼ぶとか、
戻り情報に2つのHTMLを持たせて、コールバック関数で2つに分けてそれぞれに入れるか、とかになりますが。
LARK
会議室デビュー日: 2004/03/22
投稿数: 5
投稿日時: 2006-03-14 02:26
mioさんありがとうございます！

複数ファイルを読んでそれぞれをdisp1・・・に入れたいのです。
なるほどコールバックですね。
もう一度自力でなんとか解決してみます。

ありがとうございました。
1

スキルアップ／キャリアアップ（JOB@IT）