Ajaxリクエストレスポンスで新しいウィンドウを開いたときのインターセプトに対処する方法

今回は、Ajaxリクエストレスポンスにおける新規ウィンドウオープンのインターセプトへの対処方法について紹介します。実際のケースを見てみましょう。

1. 問題の説明 ajax 非同期リクエストが成功した後、URL を開くために新しいウィンドウを開く必要があります。

window.open

() メソッドが使用されますが、これは によってインターセプトされます。ブラウザ上で動作し、ユーザーがクリックする必要があります。

2. 問題分析 ブラウザが新しく開かれたウィンドウをインターセプトする理由は、その操作がユーザーによってアクティブにトリガーされていないため、たとえ ajax

コールバックがあったとしても、安全ではないと考えてインターセプトするためです。関数

クリックや送信 (trigger('click')) などのユーザーの動作をシミュレートする場合、ブラウザーはユーザーによってアクティブにトリガーされていないと判断するため、安全に実行できず、インターセプトされます。

手順:

1. :void(0)" onclick="fun()"> で指定された fun メソッドの場合window.open() はブラウザがアクティブであると認識するため、インターセプトされません。 ただし、ajax リクエストの応答でウィンドウを開くとインターセプトされます。 2. 新しいウィンドウを開く代わりに元の Web ページのアドレスを変更する場合は、window.location = newurl を使用してこれを実現し、傍受されないようにすることができます。

3. 解決策 ajax リクエストの前に、window.open を使用して空のウィンドウを開き、そのウィンドウの location 属性を ajax 応答関数の新しい URL に設定します。

次のようなコード例:

function fun(){
var tmpWin =window.open()
ajax(xxx, handle(){ 
//回调函数。这是伪代码，语法不准。
var newurl = xxxx
tmpWin.location = newurl;
})
}

上記のメソッドには問題があります。最初に空のウィンドウが開かれるため、ajax リクエストが失敗した場合 (ネットワークまたはビジネス ロジックの問題)、新しいウィンドウには正常な結果が表示されません。ユーザーに混乱を引き起こす可能性があります。

解決策の 1 つは、ajax に問題がある場合、tmpWin.

document
.write("Server processException"); などのプロンプトを表示することを検討することです。 Ajax の応答時間が長すぎるのを防ぐためにも、ウィンドウが作成され、すぐにプロンプ​​ト tmpWin.document.write("サーバーが処理中です、お待ちください");

後で ajax が正常に戻った場合、場所の値が設定されているため、元の出力情報は上書きされます。新しいページの情報。

別の方法もありますが、これにも欠点があります:

ajax は同期リクエストとして設定できるため、ajax リクエストの後に window.open を使用して新しいウィンドウを開くことができます。例:

function fun(){
var result;
ajax({ //需要设置同步请求
.....
result = xxx 
.......
}) 
if(result){
window.open(xxxx)
}
}

上記のアプローチは、ajax リクエストの結果を判断した後に新しいウィンドウを開くため、上記の問題を回避します。

ただし、これは同期リクエストであるため、サーバーの応答時間が長すぎると、まずインターフェイスが一時停止し (ユーザー エクスペリエンスが低下し)、次に新しいウィンドウがブロックされるという問題が見つかりました。 。

サーバーがすぐに戻る場合のみ問題ありません。 テスト中、サーバー コードの処理中に 1 秒スリープしたところ、新しいウィンドウがブロックされていることがわかりました。

4. まとめ まとめると、ajax が戻った後に新しいウィンドウを開くための特に完璧な方法はないことがわかります。具体的には、自社システムの業務特性に応じた適切な対応が必要です。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

IE での Ajax 送信の文字化けコードに対処する方法

Ajax がデータ型をサーバーに送信する手順の詳細な説明

以上がAjaxリクエストレスポンスで新しいウィンドウを開いたときのインターセプトに対処する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。