全てのajax送信処理前に実行されるメソッドajaxSend()を使わなかった話

2019/11/4 JavaScript

ajax処理の実行と非同期な処理を書きたくて色々と調べていたら ajaxSend() という便利なメソッドを見つけました。今回の記事ではajaxSend()の使い方と、使わないに至った内容をご紹介します。

 

やりたかったこと

ボタンをクリックしたら、次の２つの処理を非同期に実施する。

１．画面を部分的に書き換える

２．JavaServletに命令を送信する

 

ajaxSend()の機能

ajaxSend()はajax送信処理前に実行されるメソッドです。同一ページ内で起きる全てのajax送信処理前に実行されます。

 

ajaxSend()のsample code

$( document ).ajaxSend(function( event, jqxhr, settings ) {
  if ( settings.url == "ajax/test.html" ) {
    $( ".log" ).text( "Triggered ajaxSend handler." );
  }
});

同一ページ内で起きるすべてのajax送信処理前に実行されるので、$(document)の後に記載するのがお作法です。jQuery1.8以降では$(document)の後でないと動作しなくなったようです。

 

ボタンをクリックしたら画面書き換えしJavaServletに命令という処理は複数のボタンで実装した機能でしたので、このajaxSend()を使ってまとめて書いてしまおうと思ったのです。

ajaxSend()は同一ページ内で起きる全てのajax送信処理前に実行されますが、個別のajax送信処理前に実行したい場合にはbeforeSend()を使うと良いでしょう。

 

複雑になる

ということで記載してみましたが、書き換える画面の内容は共通ではないのでボタンごとに分岐処理が入ります。すると処理を簡潔にするために導入したajaxSend()が複雑な処理を持つようになってきました。これでは本末転倒です。他に方法は無いのかと考えてみたところ、方法が簡潔に記載する方法が見つかりました。

 

代替策

非同期で処理したいだけなら、次のコードのようにajax処理の後ろに記載すれば良かったのです。

$.ajax({
  method: "POST",
  url: "./sample",
  data: { name: "John", location: "Boston" }
}).done(function() {
  console.log("done");
}).fail(function() {
  console.log("error");
});

$(#detail).text("<div id='list'>sample list</div>");

 

このコードで画面書き換えとJavaServletに命令が非同期で実施されました。今までdone内に画面書き換え処理を記載して、ajaxSend()を使う方法をとろうと思っていましたが上記の方がシンプルです。ということで今回調査したajaxSend()ですが、今回は出番が無いので削除することにしました。

 

今回調査したajaxSend()のように、同一ページ全ての処理に反応するイベントをグローバルイベントと言います。グローバルイベントは他の処理と関連なく設置することが出来てしまうので、注意して扱わないと保守が大変になると思います。

 

ajaxSend() 参考：https://api.jquery.com/ajaxsend/

,