第5章　「非同期通信処理」

jQueryでは非同期通信処理も手軽に処理できます。もっとも簡単なものとしてはページ内に別のテキストファイルを非同期で読み込み表示するものになります。この場合、ページ上のエレメント上に表示するためにload()を使います。load()は3つのパラメータが指定できますが、最初のパラメータ以外は省略することができます。
load()の最初のパラメータに読み込むファイル名のURLを指定します。非同期通信で使われるXMLHttpRequest()の都合上、同一ドメイン上にあるデータしか読み込むことができません。別のドメイン上のデータを読み込むにはCGIなどを利用しなければいけません (JSONデータの場合は、このドメインによる制約はありません)。
サンプル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>
<div id="news">読み込み中です</div>
</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(){
$("#news").load("news.txt");
});


ページが読み込まれた際に指定する$(function(){})ではなく、$(エレメント).ready(function(){})と記述する方が、どちらかと言えばスマートかもしれません。この場合はDOMで指定されたエレメントが準備でき次第処理が実行されます。
実際のコードはサンプル2のようになります。（サンプル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>
<div id="news">読み込み中です</div>
</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】
$("#news").ready(function(){
$("#news").load("news.txt");
});

[目次へ]