今回は、jQuery.get(),jQuery.post(),jQuery.ajax()の3つで、テキストファイルを取得したいと思います。
はじめにjQuery.getで書いてみます。
test.txtとindex.htmlはutf-8で保存しておいてください。
テキストファイルには、
【test.txt】
apple
orange
grape
banana
と書いておきましょう。
【main.js】
$(function(){
var httpObj = jQuery.get("./test.txt", null, function(){
document.getElementById("text").innerHTML = httpObj.responseText;
});
});
【index.html】
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>jQueryObject</title>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./main.js"></script>
<body>
<div id="text"></div>
</body>
</html>
結果
apple orange grape banana
次に、jQuery.postで書きかえます。main.jsを以下のように書きかえてください。
【main.js】
$(function(){
var httpObj = jQuery.post("./ggg.txt",null, function(){
document.getElementById("text").innerHTML = httpObj.responseText;
});
});
最後に、jQuery.ajaxで書きかえてみます。main.jsを以下のように書きかえてください。
【main.js】
$(function(){
jQuery.ajax({
url : "./test.txt",
type : "get",
success : function(data){
document.getElementById("text").innerHTML = data;
}
});
});
関連リンク
・第5章 「非同期通信でデータを読み込む」