Ajaxリクエスト（非同期通信）を使ってjsファイルを読込み実行する方法｜DAD UNION

Ajaxリクエスト（非同期通信）の$.ajax（）を使って別に用意したjsファイルを読込み、読込んだjsファイル内に記述されてるJavaScript処理を実行する方法をご紹介します。

Contents

Ajaxリクエストを使ってjsファイルを読込み実行するJavaScriptの記述
Ajaxリクエスト（jsファイルを読み）を実行するボタンのCSSの記述
Ajaxリクエスト（jsファイルを読み）を実行するHTMLの記述例
Ajaxリクエスト（非同期通信）を使ってjsファイルを読込み実行するデモページ

Ajaxリクエストを使ってjsファイルを読込み実行するJavaScriptの記述

※読込むjsファイルはajax1.jsとajax2.jsです。
（jsファイルの文字コードはutf-8にしてます）
jqueryファイルを読み込みます。#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>

Ajaxリクエスト（jsファイルを読み）を実行するボタンの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>

Ajaxリクエスト（jsファイルを読み）を実行する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-->