Có thể nhận thông tin chuyển hướng trang qua Ajax không?

Question

Nếu không có ajax, nếu chúng tôi tải http://example.com/1 và nếu nó chuyển hướng đến http://example.com/2 thì trình duyệt sẽ nhận được tiêu đề thích hợp và URL của trình duyệt được cập nhật. Có cách nào để có được thông tin này thông qua jQuery Ajax không? Ví dụ: Tôi yêu cầu http://api.example.com qua Ajax. Trong PHP, trang này được chuyển hướng đến http://api2.example.com. Có thể biết điều này không?

Sử dụng: Tôi có thanh điều hướng có liên kết. Tất cả các trang đều được tải vào vùng chứa qua AJAX và tôi đẩy url trên Thanh trình duyệt bằng lịch sử HTML5 theo liên kết.

Tuy nhiên, nếu trang được chuyển hướng, trang sẽ có liên kết mới phải không? Tôi cũng muốn thay đổi điều đó trong thanh Trình duyệt. Tôi muốn biết nơi mà URL Ajax được chuyển hướng trong trường hợp nó được chuyển hướng.

Tại sao điều này lại quan trọng? Các liên kết của tôi xử lý dữ liệu biểu mẫu, yêu cầu và các xác thực khác nhau. Ví dụ: nếu tôi yêu cầu, https://oauth.example.org?code=56hycf86 chuyển hướng đến trang success hoặc failure. Ajax của tôi có được nội dung html đúng nhưng thanh trình duyệt URL vẫn có URL với cùng một Auth ID, nếu được nạp lại, sẽ tạo ra lỗi. Ngoài ra còn có các vấn đề bảo mật khác.

Tôi không biết liệu tôi có giải thích đúng hay không, nhưng cảm ơn sự giúp đỡ của bạn.

Answer 1

Thật không may, ajax luôn theo sau chuyển hướng. Tuy nhiên, có một tính năng không được hỗ trợ trong tất cả các trình duyệt, bạn có thể truy cập thuộc tính responseURL của đối tượng XMLHttpRequest.

Bạn có thể dùng thử trong đoạn mã bên dưới. nút chuyển hướng gửi yêu cầu ajax đến URL trả lời bằng 1 chuyển hướng (nó cũng hoạt động nếu có nhiều chuyển hướng). Nút chuyển hướng không gửi yêu cầu ajax đến URL không có chuyển hướng.

Theo như tôi biết phương pháp này không được hỗ trợ trong IE 11 và các phiên bản cũ hơn của trình duyệt 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

Có, khi bạn yêu cầu http://api.example.com sử dụng Ajax, trình duyệt không chuyển hướng. Bạn có thể nhận được tất cả phản hồi bằng cách sử dụng jQuery như dưới đây

$.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

này có thể không được chính xác những gì bạn đang tìm kiếm, nhưng có lẽ nó sẽ giúp bạn để có được một hiệu ứng tương tự.

Nếu bạn kiểm soát trang http://api.example.com làm gì, bạn có thể thay đổi cách phản ứng khi nhận được cuộc gọi qua AJAX.

Bạn có thể bao gồm một biến trong cuộc gọi AJAX, đánh dấu cuộc gọi đó, nếu có biến này, không chuyển hướng đến trang khác, nhưng bao gồm url sẽ chuyển hướng đến câu trả lời.

Dữ liệu được trả về trong cuộc gọi AJAx có thể là băm, trong đó một khóa biểu thị url chuyển hướng.

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

(Xin lỗi nếu đó không phải là một PHP băm hợp lệ)

Answer 4

không chắc chắn nếu tôi hiểu nó, nhưng chỉ cần cố gắng một cái gì đó, nếu nó không phải là những gì bạn đang tìm kiếm xin vui lòng thông báo cho tôi để xóa các câu trả lời.

ở đây chúng tôi tiêm này /#/ trong URL để khi nhấp vào liên kết trình duyệt sẽ có một phân khúc mới trong URL mà đại diện cho tham số đó tùy thuộc vào giá trị của nó bạn có thể xác định trang để tải bằng cách sử dụng cuộc gọi AJAX tương ứng ..

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

Như đã đề cập responseURL chưa có hỗ trợ trình duyệt tốt nhất, có thêm 2 lựa chọn thay thế cho trường hợp này có thể được sử dụng, tiêu đề yêu cầu http và cookie.

Lợi ích của chúng là chúng không ảnh hưởng đến chính nội dung, ví dụ như các khóa chuỗi truy vấn ví dụ, thẻ băm hoặc được nhúng trong dữ liệu phản hồi.

---

Tiêu đề yêu cầu

Server side

• PHP

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

• ASP

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

phía khách hàng

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 
    } 

    } 
} 

---

Cookies

• PHP

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

• ASP

  Response.Cookies("XResponseUrl") = "..." 
  

phía khách hàng

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; 
}