Edited at

【jQuery】ajax-config.jsなるものを作ってみた。(Spring Security利用時にも使える)

More than 1 year has passed since last update.

このJavaScriptを好きにカスタマイズして、ajaxメソッドのトップで読み込めば設定が全体に生きる。


thymeleaf


sample.html

    <!--/* CSRFトークン取得用metaタグ */-->

<meta name="_csrf" th:content="${_csrf.token}" />
<meta name="_csrf_header" th:content="${_csrf.headerName}" />


ajax-config.js


ajax-config.js


///////////////////////////////////////////////////////////////////////////////////////////////
// Ajax通信の設定
///////////////////////////////////////////////////////////////////////////////////////////////
$(function () {
/**
* layout.htmlから取得したコンテキストパス.
* 例)/elabel/edit にアクセスしたい場合は「contextPath + 'elabel/edit'」がURLとして利用できる.
*/

contextPath = $('#contextPath').val();
});

/**設定を変更したい場合は個別JSファイル内のAjaxメソッドにオプションを記述して上書き */
(function () {
$.ajaxSetup({
cache: false, /** 一度使用したAjax通信のレスポンスをキャッシュさせない. */
timeout: 15000, /** タイムアウト設定(暫定) */
beforeSend: function (xhr, settings) { /** 通信開始直前の処理 */
setCsrfTokenToAjaxHeader();
// ここにクルクルGIFが動き出す処理とか入れるといい感じ
},
success: function (data, status, xhr) { /**通信成功時の処理 */
},
error: function (XMLHttpRequest, textStatus, errorThrown) {/**通信失敗時の処理 */
console.log("ajax通信に失敗しました");
console.log("XMLHttpRequest : " + XMLHttpRequest.status);
console.log("textStatus : " + textStatus);
console.log("errorThrown : " + errorThrown.message);
},
complete: function (xhr, status) { /**通信完了時の処理(エラーか否かに関わらず) */
// ここにクルクルGIFを止める処理とか入れるといい感じ
},
});
})();

/**
* Spring SecurityのCSRF対策によるトークンをajax通信のヘッダに埋め込める関数.
* 利用するAjax通信の直前に呼び出す形で利用してください.
*/

function setCsrfTokenToAjaxHeader() {
var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");
$(document).ajaxSend(function (e, xhr, options) {
xhr.setRequestHeader(header, token);
});
}