WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

Ajaxを使って外部ファイルを読み込む

jQuery

Ajaxとは「Asynchronous（エイシンクロナス） JavaScript + XML」の略です。簡単に言えばJavaScriptとXMLを使って非同期にサーバとの間の通信を行うことが出来ます。
通常Webページの内容を変更するためには画面遷移やリロードする必要がありますが、ajaxを使用すればリロードせずにページの内容を変更することができます。
サーバーにアクセスすることなくページを変更できるのでサーバーの負荷軽減や、リロードの時間の解消によるUX(ユーザーエクスペリエンス)の向上などが利点としてあげられます。


jQueryでは$.loadと$.ajaxの２種類の方法があります。


※Google ChromeはローカルではAjaxが動かないので、firefoxで確認してみましょう。



$.loadを使って外部ファイルを読み込む

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>loadを使った非同期通信</title>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
  $('#text').load('list.txt');
</script>
</head>
<body>
<div>
<ul id="text"></ul>
</div>
</body>
</html>


list.txt

<li>テスト１</li>
<li>テスト２</li>
<li>テスト３</li>
<li>テスト４</li>
<li>テスト５</li>


$.ajaxを使った方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS overflow</title>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$(function() {
 $.ajax({
	url: 'list.txt',
	dataType: 'text',
	success: function(data) {
	$('#text').html(data);
	},
	error: function(data) {
		alert('error');
	}
 });
});
</script>
</head>
<body>
<div>
<ul id="text"></ul>
</div>
</body>
</html>


www.sejuku.net