「Ajax」とは?
簡単に言うとJavaScriptでサーバー側と非同期通信を行うためのものになります。
サーバーと通信中であっても別の処理を引き続き行えます。
ユーザーに待ち時間を感じさせないサイトを作ることができます。
jQueryでAjax
jQueryでなくてもjavascriptやaxiosなどでできますが、ここではjQueryによる方法を紹介します。
書き方①
$.ajax({
url: サーバーのURLなど,
type: 方法(GET / POSTなど),
success: function(data) {
//データ取得が成功したときの処理
},
//通信エラーになった場合の処理
error: function(err) {
//データ取得が失敗したときの処理
}
});
書き方➁
$.ajax({
url: サーバーのURLなど,
type: 方法(GET / POSTなど),
data:,サーバーへ送信するデータです。 もし文字列で無ければ、クエリー文字列に変換されます。(【JSON.stringify(jsonデータ)】),
ContentType: ファイル形式(【application/json; charset=UTF-8】や【text/html; charset=UTF-8】など),
cache:【false】を指定するとキャッシュが残らない。,
timeout:通信がうまく終わらないときに指定した秒数後エラーにします。指定しないと通信が終わるまでローディングになります。(【10000】など),
xhrFields:ネイティブのXHRオブジェクト上に設定する、フィールド名/フィールド値のペアのオブジェクトを指定します。(クロスドメイン対策の【withCredentials: true】など),
beforeSend:function(xhr, setting) {
//Ajax通信を送信する前に任意の処理(以下はベーシック認証の情報を付与してベーシック認証が必要なサイトでも通信ができるようにする)
xhr.setRequestHeader('Authorization', 'Basic ' + $.base64.encode(ベーシック認証ID:ベーシック認証pass));
}
}).done(
//通信が成功した場合の処理または関数
).fail(
//通信が失敗した場合の処理または関数
);