Ajax通信の処理状況を判定する[ajaxStart][ajaxStop]

2016年3月26日

jQueryにおいてAjax通信の処理がされていく中で、各種イベントが発生します。今回はサーバとやり取りする中で、それらイベントがどのようなタイミングで発生するのかを実際に表示させてみます。

 

 

スポンサーリンク

 

HTTPS化に伴い、現在本記事内のデモ画面は利用できない状態です。

デモ画面

 

デモ画面でのAjax通信の流れは以下のようになっています。

 

Ajax通信

 

フォームに名前を入れボタンを押すとAjax通信が始まります。ajax_php1、ajax_php2、ajax_php3の3つの関数が呼び出されサーバ上のPHPに名前をPOSTします

 

ajax_php3関数だけAjax通信が正常に完了できないようにしています(デモではPOST先のPHPファイルを作成していない)。test1.php及びtest2.phpではそれぞれ3秒間・6秒間の処理がかかります。この二つのPHPでの処理が正常に完了すればデータが返り、全てのAjax通信の完了となります。

 

 

ajaxstart.html(デモ画面)

 

12〜30行目

Ajax通信がされていく中で各イベント処理をおこなっています。これらイベントはページ全体(document)に対しておこないます。

 

 

 

test1.php

 

test2.php

 

サーバのPHPでは、それぞれ意図的に3秒、6秒と処理を送らせています。

 

 

参照文献


 

LINEで送る
Pocket

Copyright © 2019 思考の葉 All Rights Reserved.  プライバシーポリシー