第5章　「非同期通信でデータを読み込む」

ページ内にテキストデータやHTMLデータを読み込むのではなく、単純にテキストデータ、XMLデータとして読み込む事もできます。単純にデータを読み込むにはjQuery.get()を使います。パラメータは3つ指定することができます。3つのパラメータのうち最初のパラメータ以外は省略することができます。
最初のパラメータが読み込むファイルのURL、2番目はgetメソッド時に送信するデータ、3番目が通信処理が発生した際に呼び出す処理（関数）になります。jQuery.get()は戻り値としてXMLHttpRequestオブジェクトを返します。XMLHttpRequestオブジェクトが返されるので、通信データはresponseText、responseXMLで取得することができます。もちろん、通信ステータスなども取得できます。
サンプル1はテキストファイルを読み込み、読み込まれたデータをアラートダイアログに表示します。（サンプル1を実行する）

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQueryサンプル</h1>
<p>非同期通信の処理</p>
</body>
</html>


【CSS】
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}
div {
width:320px;
background-color:yellow;
border:1px solid red;
}


【JavaScript】
$(function(){
var httpObj = jQuery.get("./news.txt",null, function(){
alert(httpObj.responseText);
});
});


jQueryではjQuery.get()だけでなくjQuery.post()も用意されています。jQuery.post()はpostメソッドで通信処理を行ないます。
また、jQuery.get()、jQuery.post()以外にjQuery.ajax()を使って通信処理を行なうこともできます。jQuery.ajax()ではパラメータは1つで{}内に必要なオプションパラメータを指定します。
オプションパラメータでよく使うのがurl, type, successです。urlは通信対象となるファイルやCGI、typeは通信メソッドでgetまたはpostになります（他にもありますが、この2つで通常は十分です）。successは通信が正しく完了した場合に呼び出す処理を指定します。
サンプル2ではサンプル1と同じ処理をjQuery.ajax()を使って書き直したものです。（サンプル2を実行する）

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>jQuery Sample</title>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>jQueryサンプル</h1>
<p>非同期通信の処理</p>
</body>
</html>


【CSS】
h1 {
font-size:14pt;
border-bottom:1px dotted gray;
width:320px;
}


【JavaScript】
$(function(){
jQuery.ajax({
url : "./news.txt",
type : "get",
success : function(data){
alert(data);
}
});
});

[目次へ]