【Javascript + jQuery】「jQuery」で「Ajax」を使う方法

【Javascript + jQuery】
「jQuery」で「Ajax」を使う方法

「Ajax」は、
正式名「 Asynchronous JavaScript and XML」といい、
「Javascript」の技術の１つで、HTMLページから独立して、
バックグラウンドにおいて「Javascript」だけで、サーバー通信する非同期通信技術。
「Ajax」によって、「javascript」でサーバーとの通信中であっても、ユーザーは画面上で、HTML画面を操作し続けることができる。

「jQuery」でも、「Ajax」を使用することができる。
「Javascript」で「Ajax」を利用すると、
かなり複雑なコードと知識が必要ですが、
「jQuery」では、比較的シンプルなコードで、
「Ajax」を利用することができる。
ｓ

「Ajax」を使うための関数・メソッド

関数・メソッド	説明
$.ajax()	・$.ajax() ・jQuery.ajax()

.load()	指定URLから、「Ajax」でコンテンツを取得し、 HTMLとして要素内に配置・置換する。
$.get()	「$.ajax()」の簡易版
$.post()	「$.ajax()」の簡易版
$.getJSON()
$.getScript()

$.param()
.serialize()
.serializeArray()

「$.ajax()」の書式

jQuery.ajax({url, type, dataType, beforeSend, success, error, complete, timeout, cache});
jQuery.ajax(url[,settings])
jQuery.ajax([settings])

プロパティ	説明
送信設定
url	通信する URL（デフォルト、現在開いている URL）
type	デフォルトは、「GET」。「GET」か「POST」を指定。「type」ではなく「method」で指定しても可能。
data	サーバーに送信するデータ。文字列やオブジェクト形式で指定可能。


受信設定
dataType	受信時に受け取るデータタイプを指定。「text」「html」「xml」「json」「jsonp」「script」などが設定可能。省略すると「jQuery」が自動検出・設定してくれる。
beforeSend	AJAX通信開始前に呼ばれるコールバック関数を指定。
success	成功時に実行されるコールバック関数。成功した時のデータの処理を記述する。
error	通信に失敗したときに呼ばれるコールバック関数。通信の失敗したときに、どうするかを記述する。
complete	「Ajax」の通信終了時に呼ばれるコールバック関数。通信の成功・失敗にかかわらず実行される処理。
timeout	通信がエラーとして処理されるまでの時間（ミリ秒）を指定。デフォルトは、「0（制限なし）」。
cache	「GET」方式において、「false」に設定すると、毎回最新データを取得しに行く。キャッシュデータを利用しない設定になる。デフォルト設定は、「true（キャッシュする）」なので、キャッシュデータを取得していることもある。

「$.ajax」のサンプルコード

テキストファイルを受信して、全部をコンソール表示する

$("#ib001").on("click", function(){
$.ajax({
url:'./ディレクトリ名/ファイル名.txt',
type: "GET",
dataType: "text",
success: function (data) {
console. log(data);
}
});
});

「json」ファイルを受信して表示する

$("#ib001").on("click", function(){
$.ajax({
url:'./ディレクトリ名/ファイル名.json',
type: "GET",
dataType: "json",
success: function (data) {
console. log("データ内容は、Sample1 = "+data.sample1+" & Sample2 = "+data.sample2+"です。");
}
});
});

「POST」でPHPファイルを送受信する

$("#ib001").on("click", function(){
$.ajax({
url:'./ディレクトリ名/ファイル名.php',
type: "POST",
dataType: "json",
data:{ "myname": "Tony", "mypass": "abc123", }, success: function (data) {
if(data.result==="OK"){ console. log(data.message);
}else{ console. log("You can’t login.");
} }
});
});

Back