Ajax経由でページリダイレクト情報を取得することは可能ですか？

Question

ajaxがない場合、http://example.com/1をロードし、http://example.com/2にリダイレクトすると、ブラウザは適切なヘッダーを取得し、ブラウザURLが更新されます。 jQuery Ajaxでこの情報を取得する方法はありますか？

たとえば、Ajax経由でhttp://api.example.comをリクエストしています。 PHPでは、このページはhttp://api2.example.comにリダイレクトされます。このことを知ることは可能でしょうか？

使用： 私はリンクを持つnavbarを持っています。すべてのページはで、AJAXでコンテナにロードされており、リンクごとにHTML5履歴を使用してブラウザバーにURLをプッシュします。

ただし、ページがリダイレクトされると、ページに新しいリンクが正しく表示されますか？私はブラウザバーでもそれを変更したいと思います。 AjaxのURLがリダイレクトされた場合、そのURLがリダイレクトされる場所を知りたいと思います。

なぜこれが重要ですか？ 私のリンクは、フォームデータ、リクエスト、各種認証を扱います。たとえば、私が要求する場合、https://oauth.example.org?code=56hycf86はsuccessまたはfailureページにリダイレクトされます。私のAjaxは適切なHTMLコンテンツを取得しますが、URLブラウザバーには同じURLのAuth IDが残っていますが、再ロードするとエラーが発生します。他にもセキュリティ上の問題があります。

私は事を正しく説明したかどうか分かりませんが、助けてくれてありがとう。

Answer 1

ようにjQueryを使用して、すべての応答を取得することができます。ただし、すべてのブラウザでサポートされていない機能がある場合は、XMLHttpRequestオブジェクトのresponseURLプロパティにアクセスできます。

次のコードスニペットで試すことができます。リダイレクトボタンは1リダイレクトで返信するURLにajaxリクエストを送信します（複数のリダイレクトがある場合にも機能します）。 no redirectボタンは、リダイレクトのないURLにajaxリクエストを送信します。

私の知る限り、この方法はIE 11以前のchrome/firefox/operaブラウザではサポートされていません。

document.getElementById("no-redirect").addEventListener("click", function() { 
 
    testRedirect("https://httpbin.org/get"); 
 
}); 
 

 
document.getElementById("redirect").addEventListener("click", function() { 
 
    testRedirect("https://httpbin.org/redirect/1"); 
 
}); 
 

 

 
function testRedirect(url) { 
 
    var xhr = new XMLHttpRequest(); 
 
    xhr.onreadystatechange = function(e) { 
 
    if (xhr.status == 200 && xhr.readyState == 4) { 
 
     if (url != xhr.responseURL) { 
 
     alert("redirect detected to: " + xhr.responseURL) 
 
     } else { 
 
     alert("no redirect detected") 
 

 
     } 
 
    } 
 
    } 
 
    xhr.open("GET", url, true); 
 
    xhr.send(); 
 
}

<button id="redirect"> 
 
    Redirect 
 
</button> 
 
<button id="no-redirect"> 
 
    No Redirect 
 
</button>

Answer 2

はい、Ajaxを使用してhttp://api.example.comをリクエストすると、ブラウザはリダイレクトされません。あなたは、まあ、残念ながら、Ajaxは常にリダイレクトを次の怒鳴る

$.ajax({ 
    url: "http://api.example.com", 
    success: function(data, textStatus, xhr) { 
     console.log(xhr.status); 
    }, 
    complete: function(xhr, textStatus) { 
     console.log(xhr.status); 
    } 
}); 

Answer 3

これは、あなたが探している正確に何ではないかもしれませんが、多分それは同様の効果を得るために役立ちます。

ページhttp://api.example.comの機能を制御している場合は、AJAX経由で電話をかけたときの反応を変更できます。

あなたはAJAX呼び出しに変数を含めることができます。この呼び出しとしてマークします。この変数が存在する場合は、他のページにリダイレクトせず、答えにリダイレクトされるURLを含めます。

AJAx呼び出しで返されるデータは、1つのキーがリダイレクトURLを表すハッシュである可能性があります。

data = {status => 1, redirect => 'http://ap2.example.com', …} 

（申し訳ありませんがそれが有効なPHPのハッシュない場合）

Answer 4

ない、私はそれを理解したが、ちょうど何かをしようとした場合必ず、それはあなたが探しているものでない場合、削除するために私に連絡してください回答。ここ

は、我々は、リンクをクリックするときに、ブラウザがその値に応じて、あなたは、対応するAJAX呼び出しを使用してロードするページを決定することができ、パラメータを表すURLで新しいセグメントを持つことになりますURLにこの/#/を注入します..

JS/jQueryの：

var navLinks = $('#nav a'), 
    params = [], 
    baseURL = '//localhost/test/js-url-parameters-second'; 

navLinks.each(function(){ 
    var oldHREF = $(this).attr('href'); 
    $(this).attr('href', baseURL +'/#/'+ oldHREF); 
}); 

navLinks.on('click', function(){ 
    checkURL($(this).attr('href')); 
}); 

function checkURL(docURL){ 
    // if /#/ found then we have URL parameters 
    // grabbing the parameters part of the URL 
    if(docURL.indexOf('/#/') > -1){ 
     docURL = docURL.split('/#/')[1]; 
     if(docURL != ''){ 
      // omit the last forward slash if exists 
      if(docURL[docURL.length - 1] == '/'){ 
       docURL = docURL.substring(0, docURL.length - 1); 
      } 
      console.log(docURL); 
      $('#page-type').text(docURL); 
     } 
    } else { 
     console.log('No URL parameters found'); 
    } 
} 

HTML：

<div id="nav"> 
    <a href="home" data-name="Home">Home</a> 
    <a href="about" data-name="About">About</a> 
    <a href="contact" data-name="Contact">Contact</a> 
</div> 
<hr> 
<div id="container"> 
    this is the <span id="page-type">Home</span> page 
</div> 

Answer 5

すでに説明したように、このブラウザでは最高のブラウザサポートはまだありません。この場合、httpリクエストのヘッダーとCookieが2つあります。

これらの利点は、クエリ文字列キー、ハッシュタグなどのコンテンツ自体や、応答データに埋め込まれたコンテンツ自体に干渉しないことです。

---

要求ヘッダー

サーバ側

• PHP

  $req->addHeader("X-Response-Url", "...."); 
  

• ASP

  headers.Add("X-Response-Url", "...."); 
  

枚の

クライアント側

xhr.onreadystatechange = function(e) { 
    if (xhr.status == 200 && xhr.readyState == 4) { 

    var resp_url = xhr.getResponseHeader("X-Response-Url"); 

    if (send_url != resp_url) { 
     // redirected 
    } 

    } 
} 

---

クッキー

• PHP

  setcookie("XResponseUrl", "..."); 
  

• ASP

  JavaScriptを使用して、

クライアント側

xhr.onreadystatechange = function(e) { 
    if (xhr.status == 200 && xhr.readyState == 4) { 

    var resp_url = getCookie("XResponseUrl"); 

    if (send_url != resp_url) { 
     // redirected 
    } 

    } 
} 


function getCookie(name) { 
    var re = new RegExp(name + "=([^;]+)"); 
    var value = re.exec(document.cookie); 
    return (value != null) ? unescape(value[1]) : null; 
}