Ajaxに悩んだ二年間

現代のWeb PageはAjax通信を用いてページの書き換え無しに表示データを更新する仕組みが広く使われています。Ajax = Asynchronous JavaScript and XMLという訳の分からない言葉の頭文字をつなげた造語です。Ajaxが提唱されたのは、古く Internet Explorer5.0の時代に遡ります。ここいら辺に関しては、やはり Microsoft社とIBM社の功績が大きいようです。このIBMのエンジニアが投稿されたブログに詳しく書かれています。

僕もjQueryを用いてこのAjaxという仕組みを用い、データをデータベースから読み出しそれを用いてホームページのDOMを書き換え、動的にページを画面更新無く刷新するようなページをいくつも作成してきました。実はこれもIBMのエンジニアのブログを読んで出来るようになったのです。

さて、jQuery + PHP + MySQLを用いたAjaxはこれまでに色々なサイトで作成してきました。そのほとんどは期待した通りに動作してきたのですが、一つだけ躓く場面があったのです。現在の鎌倉ライブHpは2017年に原型を作り、それを踏襲してきたのですが、基本的概念は、Web上のMySQL databaseにデータを入力して、ユーザー・ページではその databaseからデータを読み出してHpに反映する、そのようにしたのです。

もちろん DBにデータ入力する時にはPWで保護された部分にアクセスし、一般ではアクセスできないようにしています。この時問題となったのは、下記のプログラム部分です。それが不思議なことにうまく行ったり、行かなかったりするのです。

 function ajax_search() {
$( "#search_results" ).show();
var search_val = $( "#search_term" ).val();

$.post( "tri_chair_mod_add01new_backend.php", {
    search_term: search_val
}, function ( data ) {
    if ( data.length > 0 ) {
        $( "#search_results" ).html( data );
    }
} );

  }

これが時にうまく動作して時に動作しないのです。この原因についてどうしても難しすぎて分からなかったのですが、色々考えている内に、Ajaxとは Asynchronous (=非同期)とうのが本質だと思ったのです。Web pageは非同期で表示していかないとユーザーが待たされることになります。ですから、ある画面を描く時にも、あるいはデータを受け取る時にもどちらかがどちらかの完了を待つ(=同期)することが無く、どんどん進んで行くのです。これが原因ではないかと思いました。そこで以下のように変更したのです。

  function ajax_search() {
$( "#search_results" ).show();
var search_val = $( "#search_term" ).val();
        $.ajax({
            type: 'POST',
            url: "tri_chair_mod_add01new_backend.php",
            dataType: 'html',
            data: {
                search_term: search_val
            },
            async: false,
            success: function(data) {
                if ( data.length > 0 ) {
       $( "#search_results" ).html( data );
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert("Ajax error happened!");
            }
        });
  }

つまり、Ajaxのdefaultである async: trueというのを敢えて async: falseにしたのです。つまり同期をとるようにしたのです。これで長年の懸案が解決しました。とっても難しい概念です。

投稿者: (KAMAKURA & SAPPORO)Dr_Radialist

Expert Interventional Cardiologist and Amateur Computer Programmer

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です