JavaScript

Ajaxリクエスト（非同期通信）でJavaScriptファイルを読み込み実行する方法

  /

Web開発をしていると、ページのリロードをせずにサーバーからデータを取得したい場面に遭遇することがよくあります。これを実現するための手段の一つがAjax（非同期通信:Asynchronous JavaScript and XML）です。
今回は、jQueryの$.ajax()メソッドを使用して、外部のJavaScriptファイルを読み込み、そのファイル内のスクリプトを実行する方法を紹介します。

Contents

概要

今回の目標は、ボタンをクリックすると、事前に用意されたJavaScriptファイルをAjaxを使って読み込み、その中のスクリプトを実行することです。この方法を使うと、動的にスクリプトをロードして実行することができ、ページのインタラクティブ性を高めることができます。

jQueryの読み込み、JavaScriptの記述

まず、jQueryを読み込みます。今回はGoogleが提供しているCDNを利用します。

次に、Ajaxリクエストを送信し、外部のJavaScriptファイルを読み込むスクリプトを記述します。
読込むjsファイルはajax1.jsとajax2.jsです。
（jsファイルの文字コードはutf-8にしてます）
#idAj01と#idAj02エリアクリックで$.ajax（）を使ってjsファイルを読込みます・

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

	$("#idAj01").click(function(){
		//ajax1.jsを読込み
		$.ajax({
			type: "GET",
			url: "ajax1.js",
			dataType: "script"
		});
	});
	
	$("#idAj02").click(function(){
		//ajax2.jsを読込み
		$.ajax({
			type: "GET",
			url: "ajax2.js",
			dataType: "script"
		});
	});

});
</script>

CSSの記述

ボタンのスタイルを整えます。今回は、クリックできるエリアを見やすくするために、シンプルなスタイルを適用します。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:2.0em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:700px;
	margin:0 auto;
	text-align:center;
}
#idAj01{
	padding:10px;
	background-color:#FFFF66;
	width:200px;
	margin:0 auto;
	cursor:pointer;
}
#idAj01:hover{
	background-color:#FFFFCC;
}
#idAj02{
	padding:10px;
	background-color:#FF99FF;
	width:200px;
	margin:0 auto;
	cursor:pointer;
}
#idAj02:hover{
	background-color:#FFCCFF;
}
-->
</style>

HTMLの記述

※id=”idAj01″またはid=”idAj02″エリアをクリックするとajax1.jsまたはajax2.jsファイルを読み込みjsファイル内のJavaScript処理を実行します。必要に応じて変更して下さい。

<div id="idWrap">
    <h1>以下（黄色、ピンク）のエリアをクリックすると、Ajaxリクエスト（非同期通信）を使って<br />
    <a href="ajax1.js" target="_blank">ajax1.js</a>と<a href="ajax2.js" target="_blank">ajax2.js</a>のjsファイルを読込み、読込んだJavaScritを実行します。</h1>
    
    <div id="idAj01">ajax1.jsを読込み</div>
    <br />
    <br />
    <div id="idAj02">ajax2.jsを読込み</div>
    
</div><!--/idWrap-->

実行結果の確認

上記のコードをブラウザで実行すると、クリックするだけで外部のJavaScriptファイルが非同期に読み込まれ、スクリプトが実行されます。これにより、ページの動的な操作が可能になり、ユーザーエクスペリエンスが向上します。

Ajaxリクエスト（非同期通信）を使ってjsファイルを読込み実行するデモページ

実際に動作を確認したい場合は、以下のリンクからデモページにアクセスしてください。

Ajaxリクエスト（非同期通信）を使ってjsファイルを読込み実行するデモページ

まとめ

今回は、jQueryの$.ajax()メソッドを使って、外部のJavaScriptファイルを読み込み実行する方法を紹介しました。この手法を使うと、必要に応じてスクリプトを動的にロードできるため、アプリケーションの柔軟性が増します。ぜひ、実際のプロジェクトで活用してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

Ajax 非同期通信 外部ファイル読込
関連記事