使用JQuery通過AJAX獲取文件

Question

我到處尋找問題的答案，但我找不到我想知道的東西。

這是我想要做的：我有一個來自同一域和其他域的圖像，pdf或html頁面的URL。 是否可以使用AJAX“下載”它們？ 但是我不想讓它們在我的服務器上或其他任何地方，我只是想直接在我的網站上使用它們而不必再次上傳它們（以節省時間）。

當內容來自其他域時，我也遇到了“XMLHttpRequest.getAllResponseHeaders（）”的麻煩。 我嘗試使用倍數網址。 我什么也沒收到：“”。 這是正常的嗎？

謝謝您的幫助 ！ :)

Answer 1

遺憾的是，無法對網站主機域外部域上的資源進行AJAX請求，編輯： 除非他們實施變通方法，如CORS或JSONP 。 我建議對跨源資源共享進行一些閱讀以獲取更多詳細信息。

至於同一域上的資源，無論如何你都要將它們存儲在你的服務器上 - 事實上，你必須這樣做，因為它本質上就是你網站的一部分。 如果您描述了您正在嘗試專門實現的內容（也許可以使用您的代碼發布jsfiddle ），我們可以找到針對您的特定用例的解決方案。 希望這可以幫助。

Answer 2

[...]圖像，pdf或html頁面[...]

這些請求的類型非常不同。 你對'下載'的意思是有點曖昧。 如果您通過AJAX請求文件，則會將值加載到變量中。 它不會將文件保存到您的計算機。

[...]我什么都沒得到：“”這是正常的嗎？ [...]

是的，如果遠程服務器與您當前所在的（也是相同的端口）不同，並且也不支持CORS（跨域請求），則結果將為空。

如果無法更改遠程服務器的跨域策略[並且您有權使用其服務]，則可以在服務器上編寫充當代理的PHP腳本。 但是不要忘記保護它以防止誤用。 另外請記住，這樣的腳本可以顯着提高您的流量，因此這應該只是“B計划”。

Answer 3

您當然可以使用AJAX獲取圖像和html頁面並將其顯示在您的網頁上。

您使用xmlHttpRequest.GetAllResponseHeaders時遇到的問題很可能是由相同的原始策略引起的。 瀏覽器禁止您與來自其他域的加載數據進行交互。

您從中獲取數據的服務器必須明確指出它允許您的域通過將Access-Control-Allow-Origin響應頭設置為域的響應來獲取和顯示其資源。

一種方法是使用代理並自己設置標題。

Answer 4

以下樣板代碼（基本上來自jquery api頁面）將您的gravatar圖像（以png格式傳遞）從stackoverflow網站加載到回調參數中。 正如其他人所指出的那樣，相同的源策略適用於ajax請求（因此示例代碼只能從stackoverflow站點上下文成功運行，例如通過在此頁面上打開js控制台）。

$.ajax({
  method: "GET"
  , url: "https://www.gravatar.com/avatar/d85e0ad5243245aabe2d34a3c9a296a9?s=32&d=identicon&r=PG&f=1"
  , cache: false
  , beforeSend: function( xhr ) {
    xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
  }
})
  .done(function( data ) {
    if ( console && console.log ) {
      console.log( "Length of data:", data.length );
      console.log( "Sample of data:", data.slice( 0, 100 ) );
    }
  });