Ajaxリクエスト(非同期通信)の$.ajax()を使って別に用意したjsファイルを読込み、読込んだjsファイル内に記述されてるJavaScript処理を実行する方法をご紹介します。
Contents
ディスプレイ広告
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-->
Ajaxリクエスト(非同期通信)を使ってjsファイルを読込み実行するデモページ
Ajaxリクエスト(非同期通信)を使ってjsファイルを読込み実行するデモページ
Ajax(非同期通信)にはその他にもxmlやphpの読み込み等も出来ます。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。