解 説

ajax通信とは

URLを入力して希望するWebページをリクエストして、サーバーからのデータが送られてきて希望するページを閲覧するという通常の手順と違い、Ajax通信はJavaScriptを使用して必要なコンテンツを更新する仕組みです。通常の通信はページを全て読み込んで表示しますが、Ajaxはある一部分だけを読み込んで変更することができるものです。

Ajaxで送受信するには loadメソッドを使用する方法と$.ajaxを使用する方法があります。
loadメソッドを使用する方法は$( )で指定されたjQueryオブジェクトに設定するメソッドです。
これを使用すると別ページのコンテンツを読み込むことが可能です。

$.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部分

jQueryのコード

HTMLのbody部分