新卒から文系エンジニア→人材業界に転職した人のブログ

新卒から文系エンジニア→人材業界に転職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界へ。異業種×異職種の転職経験有り。

このエントリーをはてなブックマークに追加

【JavaScript】外部のテキストファイルをページ遷移なしで読み込む

【今回の内容】

 

 

今回は、前回から調べていたページ遷移なしで同一ページないの値をサーバとやり取りを行い、更新することを行ってみたいと思います。

 

具体的には、

 

「HTMLページに外部ファイルを読み込み、ページの一部を更新する」というの行ってみます。

 

 

 

【処理の手順】

1、xmlhttprequestオブジェクトの取得

2、xmlhttprequestオブジェクトのresponseTextの取得

3、テキストエリアに値をいれる

 

 

【補足】

「viewText()のパラメータ'test.txt'について」

ファイルの格納先+ファイル名ですが、自分のローカルでは同一フォルダにテキストファイルが格納されているため、ファイル名でviewTextに渡しています。

 

「function createHttpRequest内について」

function createHttpRequest内については、

ブラウザごとに条件を変え、xmlhttprequestオブジェクトを返しています。

 

「対応ブラウザについて」

IE10→動作確認

グーグルクローム→ショートカットのリンク先の最後に”-allow-file-access-from-files”を追加することで動作確認

※起動オプションで外部ファイルへのアクセスを認めるものみたいです。

 

 

 

 

【参考ソース】

<html>

<head>

<meta http-equiv="Content-Type" content="text/html" charset="Shift_JIS">

</head>

<body id="bodyyy">

<h2>XMLでテキストを読み込む</h2>

<body>

<input type="button" onclick="viewText('test.txt');" value="test.txtを読み込みます"></input>

<input type="button" onclick="viewText('test2.txt');" value="test.txt2を読み込みます"></input>

</br>

<textarea id="text" rows="40" cols="40" readonly></textarea>

<script Language="JavaScript" type="text/javascript">

function viewText(fileName){

var httpobj =createHttpRequest();

httpobj.open("GET",fileName,false);

httpobj.send(null);

document.getElementById("text").innerHTML=httpobj.responseText;

}

 

function createHttpRequest(){

if(window.ActiveXObject){

try{

return new ActiveXObject("Msxml2.XMLHTTP")

}catch(e){

try {return new ActiveXObject("Microsoft.XMLHTTP")

}catch(e2){

return null

}

}

}else if(window.XMLHttpRequest){

return new XMLHttpRequest()

}else{

return null}}

</script>

</body>

</html>

.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }