ajax通信とは
URLを入力して希望するWebページをリクエストして、サーバーからのデータが送られてきて希望するページを閲覧するという通常の手順と違い、Ajax通信はJavaScriptを使用して必要なコンテンツを更新する仕組みです。通常の通信はページを全て読み込んで表示しますが、Ajaxはある一部分だけを読み込んで変更することができるものです。
Ajaxで送受信するには loadメソッドを使用する方法と$.ajaxを使用する方法があります。
loadメソッドを使用する方法は$( )で指定されたjQueryオブジェクトに設定するメソッドです。
これを使用すると別ページのコンテンツを読み込むことが可能です。
例
$('div').load('mypage.html h1')
$.ajaxを使用する方法はjQueryオブジェクト上で呼び出すのではなく、jQueryや$で直接呼び出される関数です。
$.ajaxは複数のオプションを指定できます。
主なものは
type →メソッド名
url →送信先url
data → 送信するデータ
dataType →受診するデータ形式
contentType →送信するデータ形式
timeout →タイムアウトの時間
cache →キャッシュを利用するかどうか デフォルトはfalse
success→通信が正常に終了したときの処理
error→エラーが出たときの処理
などです。
コールバックを指定することができます。
Ajax通信では、セキュリティ上、Ajaxを使用するHTMLファイルが置かれているドメインのサーバとしか通信できません。
これをクロスドメイン制約といいます。
クロスドメイン制約を受けずに他のドメインとやり取りする方法はいくつかあります。
ここではjquery.xdomainajax.jsを使用する方法を解説します。
jquery.xdomainajax.js使用方法
jquery.xdomainajax.jsをダウンロードして、以下のとおりリンクをします。
HTMLのhead部分
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.xdomainajax.js" type="text/javascript"></script>
jQueryのコード
$(function() {
$.ajax({
type: 'GET',
url: 'http://aaa.bbbb.cccc',
dataType: 'html',
success: function(data) {
my_content = $(data.responseText).find('.whats').text();
$('.newdata').append(my_content);
},
error:function() {
alert('問題がありました。新着情報は表示できません。\n当ホームページはJavaScriptを使用しています。お使いのブラウザでJavaScriptが無効になっていると、機能が正確に動作しません。JavaScriptを有効に設定してからご利用くださるようお願いいたします。');
}
});
});
HTMLのbody部分
<section id="whatsnew" class="clearfix"> <h2>新着情報</h2> <div class="newdata"></div> </section>
