首頁 > web前端 > js教程 > 主體

Ajax實作跨域存取三種方法總結

php中世界最好的语言
發布: 2018-04-24 16:51:42
原創
2074 人瀏覽過

這次為大家帶來Ajax實現跨域訪問三種方法總結,Ajax實現跨域訪問的注意事項有哪些,下面就是實戰案例,一起來看一下。

一、什麼是跨域

##我們先回顧一下網域位址的組成:

http:// www . google : 8080 / script /

jquery.js

      http://(協定編號)

              ##               8080(連接埠號)

script/jquery.js (請求的位址)

* 當協定、子網域、主網域名稱、連接埠號碼中任意一各時,都算不同的「域」。

* 不同的域之間互相請求資源,就叫「跨域」。

例如:http://www.abc.com/index.html 請求http://www.def.com/sever.php

二、處理跨域的方法1 -- 代理

(這個方法比較「笨」 故不做詳細介紹)

例如在北京(www.beijing.com/sever.php)和上海(www.shanghai.com/ sever.php)各有一個伺服器,北京的後端(www.beijing.com/sever.php)直接存取上海的服務,然後把取得的回應值回傳給前端。也就是北京的服務在後台做了一個代理,前端只需要訪問北京的伺服器也就相當與訪問了上海的伺服器。這種代理屬於後台的技術,所以不展開敘述。

三、處理跨域的方法2 -- JSONP

假設在http://www.aaa.com/index.php這個頁面中向http: //www.bbb.com/getinfo.php提交GET請求,那麼我們在www.aaa.com頁面中加入以下程式碼:

  var eleScript= document.createElement("script"); //创建一个script元素
  eleScript.type = "text/javascript"; //声明类型、
  eleScript.src = "http://www.bbb.com/getinfo.php"; //添加src属性 引入跨域访问的url
  document.getElementsByTagName("HEAD")[0].appendChild(eleScript); //在页面中添加新创建的script元素
登入後複製
當GET請求從http://www.bbb.com/ getinfo.php回傳時,可以傳回一段JavaScript程式碼,這段程式碼會自動執行,可以用來負責呼叫http://www.aaa.com/index.php頁面中的一個callback函數。看下面一個列子:在www.aaa.com頁面中:

<script>
  function jsonp( json ){
    document.write( json.name ); //输出周星驰
}
<script>
<script src="http://www.bbb.com/getinfo.php"></script>
登入後複製
在www.bbb.com頁面中:

  jsonp({ "name":"周星馳","age":45 });

也就是在www.aaa.com頁面中聲明,在www.bbb.com頁面中呼叫。但是JSONP只支援 “GET” 請求,但不支援 “POST” 請求。

三、處理跨域的方法2 -- XHR2(推薦方法)

「XHR2」 全域「XMLHttpRequest Level2」 是HTML5提供的方法,對跨域訪問提供了很好的支持,並且還有一些新的功能。

* IE10一下的版本都不支援

* 只需要在伺服器端頭部加上下面兩句程式碼:

  header( "Access-Control-Allow- Origin:*" );

  header( "Access-Control-Allow-Methods:POST,GET" );

關於「XHR2」 的更多資訊大家可以查看官方文檔,在這裡就不詳細敘述了,總之這是這個很好用的方法。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

#

以上是Ajax實作跨域存取三種方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!