質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1049閲覧

unloadイベントの際に、GET通信を行いたい

tetakaha759

総合スコア20

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2021/12/30 06:02

前提・実現したいこと

jQueryの「unload」イベントが発生した際、GET通信を行いたいと考えています。
イベントの中で「console.dir」による文字列出力はできるのですが、GET通信がほぼ成功しません。
「ほぼ」と記載しているのは、ごく稀(20回に1回程度)に通信が成功するときがあります。

発生している問題・エラーメッセージ

下記のソースにある通り、「①メッセージ表示」→「②GET通信(非同期)」→「③GET通信(同期」→「④メッセージ表示」としていますが、①はほぼ実行され、②以降はほぼ実行されない状態です。
#画面遷移してしまうため、Chromeデベロッパーツールでメッセージが表示されるのは一瞬だけ

ただし、「③GET通信(同期)」の際に、「同期通信は非推奨」といった警告メッセージが一瞬表示されることもあるので、処理自体は実行されているかもしれないのですが、その結果を確認できません。

該当のソースコード

jQuery

1$(window).on('unload', () => { 2 //①メッセージ表示 ほぼ実行される 3 console.dir ("before GET"); 4 5 //②GET通信(非同期) ほとんど実行されない 6 $.get('GET通信でのアクセス先URL'); 7 8 //③GET通信(同期) ほとんど実行されない、ただし「同期通信は非推奨」という警告メッセージが出るときあり 9 $.ajax ({ type: 'GET', async: false, url: 'GET通信でのアクセス先URL' }); 10 11 //④メッセージ表示 ほとんど実行されない 12 console.dir("after GET");

試したこと

画面遷移してしまうから、遷移するまでに処理が終わらないと無視されてしまうのでは、と考えて上記のコードに「window.open()」などとして新たな画面でも出そうかと思いましたが、これも画面が表示されませんでした。

unloadイベント時に、GET通信を成功させる手段をご存じの方は、何とぞご教示いただけませんでしょうか。

補足情報(FW/ツールのバージョンなど)

jQuery 3.4.1
Chrome 96.0.4664.110

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/12/30 10:10

なぜunloadなのでしょうか。それによって何を行いたいのかにもよります。
tetakaha759

2021/12/30 13:55

ご返信、ありがとうございました。 実際には、「unload」にこだわっている訳ではありません。 ただ、現在いる画面から再ロードしたり、別のサイトへ移動した際に「再ロード/サイト移動」の時間を記録するためのリンク(GET通信)を呼び出したいと考えています。 まだ試し切れてはいませんが、「pagehide」も使えるのでは、と挑戦中です。。
guest

回答1

0

自己解決

上記、自己解決しました。

アクセス先のURLを「POST通信」に変更し、「pagehide」および「navigator.sendBeacon」を組み合わせることで、ページ遷移時にアクセス先URLへの通信が確実に行われるようになりました。

jQuery

1$(window).on('pagehide', () => { 2 //以下はすべて実行される 3 console.dir ("before POST"); 4 5 navigator.sendBeacon ('POST通信でのアクセス先URL'); 6 7 console.dir("after POST");

投稿2021/12/30 23:33

tetakaha759

総合スコア20

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問