首頁 >web前端 >js教程 >什麼是ajax跨域訪問

什麼是ajax跨域訪問

(*-*)浩
(*-*)浩原創
2019-05-22 19:21:046632瀏覽

AJAX跨網域存取是使用者造訪A網站時所產生的對B網站的跨網域存取請求均提交至A網站的指定頁面。即Ajax請求一個目標位址為非本域(協定、網域名稱、連接埠任一個不同)的web資源,並根據回應取得外部應用程式資料。

什麼是ajax跨域訪問

Ajax請求一個目標位址為非本域(協定、網域名稱、連接埠任一個不同)的web資源,並根據回應取得外部應用程式資料。例如我們用Ajax存取城市天氣預報、IP位址等公共服務介面時,就涉及跨域了。當我們要求一個外部服務時,瀏覽器會基於安全問題拒絕授權存取。

而script、script、iframe標籤的src屬性就不存在跨域的問題,所以Ajax跨域就是利用這一點以及js對JSON的支持,外部服務只要給Ajax的請求響應一段JS代碼或JSON數據,就能被Ajax取得到。

由於安全性方面的原因, 客戶端js使用xmlhttprequest只能用來向來源網站發送請求,例如在www.readlog.cn下去請求test.readlog.cn的數據,都是不行的。不過,解決方法倒是不少。這裡整理一下。

解決方式1 web代理的方式 (on Server A) 

由該頁面取代使用者頁面完成交互,從而傳回適當的結果。此方案可以解決現階段所能夠想到的多數跨域訪問問題,但要求A網站提供Web代理的支持,因此A網站與B網站之間必須是緊密協作的,且每次交互過程,A網站的伺服器負擔增加,且無法代用戶保存session狀態。

解決方法2. on-Demand方式(on Server A) 

#MYMSN的入口網站就用的這種方式,不過MYMSN中不涉及跨域存取問題。在頁面內動態生成新的

解決方式3. iframe方式(on Server A) 
查看過醒來在JavaEye上的一篇關於跨域訪問的帖子,他提到自己已經用iframe的方式解決了跨域存取問題。資料提交跟獲取,採用iframe這種方式的確可以了,但由於父窗口與子窗口之間不能交互(跨域訪問的情況下,這種交互被拒絕),因此無法完成對父窗口效果的影響。 
在頁面內嵌或動態產生指向別的網站的IFRAME,然後這2個網頁間可以透過改變對方的anchor hash fragment來傳送訊息。改變一個網頁的anchor hash fragment並不會使瀏覽器重新裝載網頁,所以一個網頁的狀態得以保持,而網頁本身則可以透過一個計時器(timer)來察覺自己anchor hash的變化,從而相應改變自己的狀態。

解決方式4. 使用者本地轉儲方式(local) 
#IE本身依附於windows平台的特性為我們提供了一種基於iframe,利用記憶體「繞行「的方案,也就是兩個window之間可以在客戶端透過windows剪貼簿的方式進行資料傳輸,只需要在接受資料的一方設定Interval進行輪詢,取得結果後清除Interval即可。 FF的平台獨立性決定了它不支援剪貼簿這種方式,而以往版本的FF中存在的插件漏洞又被fixed了,所以FF無法透過記憶體來完成暗渡陳倉。而由於檔案操作FF 也沒有提供支援(無法透過Cookie跨域完成資料傳遞),致使這種技巧性的方式只能在IE中使用。

解決方式5: (其實還是在服務端A用iframe解決了與伺服器B通訊的問題) 
要解決的問題:發生在使用者提交網頁URL (還包括Tag, Notes 等)給bookmark 伺服器時。 
關於 URL 的提交至少可以有三種方式: 
1. 登陸 Bookmark 伺服器的提交頁面,將要收藏的 URL 透過該頁面提交給伺服器。 
2. 安裝瀏覽器插件,透過插件將 URL 提交給伺服器。 
3. 從 Bookmark 伺服器動態載入 javascript 小工具到目前頁面,透過它來完成提交工作。

第一種方式開發起來最簡單,但對使用者來講比較麻煩,每次都需要先登陸Bookmark 伺服器才能完成提交;第二種方式我並不熟悉插件開發,而且使用者也不喜歡太多的插件堆滿自己的瀏覽器;第三種方式開發難度小,又避免了每次登陸伺服器的麻煩,所以最終採用它。第三種方式中動態載入的 javascript 小工具除了需要產生 UI 供使用者填寫資訊( URL , tag , notes 等),當使用者點擊提交的時候,還要完成與伺服器通訊的功能。 

以上是什麼是ajax跨域訪問的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn