JavaScript之Ajax-7 Ajax跨域請求(Ajax跨域概述、Ajax跨域實現)

1、Ajax跨域概述

同源策略

  - 同源策略(Same origin policy)是一種約定，它是瀏覽器的核心也最最基本的核心。若是少了同源策略，則瀏覽器的正常功能可能都會收到影響。能夠說Web是構建在同源策略基礎上的，瀏覽器只是針對同源策略的一種實現

      - 它是由 Netscape 提出的一個著名的安全策略

      - 如今全部支持 JavaScript 的瀏覽器都會使用這個策略

      - 所謂同源策略是指，域名、協議、端口相同

域名概述

  - 域名(Domain Name) 是由一串用點分隔的名字組成的Internet上某一臺計算機或計算機組的名字，用於在數據傳輸時標識計算機的電子方位

  - 域名的目的是便於記憶和溝通的一組服務器的地址

      - 頂級域名

      - 二級域名

      - 三級域名

不一樣的域

跨域概述

  - 簡單來講，出於安全方面的考慮，頁面中的JavaScript沒法訪問其餘服務器上的數據，即"同源策略"。而跨域就是經過某些手段來繞過同源策略限制。實現不一樣服務器之間的通訊的效果。

  - 只要協議、域名、端口有任何一個不一樣，都被看成是不一樣的域

2、Ajax跨域實現

JSONP概述

  - JSONP(JSON with Padding) 是JSON的一種使用模式，可用於解決主流瀏覽器的跨域數據訪問的問題

  - 因爲同源策略，通常來講位於 server1.example.com的網頁沒法與不是server1.example.com的服務器溝通，而 HTML 的<script>元素是一個例外。利用<script>元素的這個開放策略，網頁能夠獲得從其餘動態產生的JSON資料，而這種使用模式就是所謂的JSONP

$.getJSON()

  - $.getJSON()方法容許經過使用JSONP形式的回調函數來加載其餘網域的JSON數據

  - 使用 $.getJSON() 方法實現跨域請求，須要在請求路徑的URL後增長"callback=?",jQuery將自動替換"?"爲正確的函數名，以執行回調函數

$.ajax()

  - $.ajax() 方法一樣能夠利用JSONP實現跨域請求，只需將$.ajax()方法的選項"dataType"的值設置爲"jsonp"便可。

  - $.ajax() 的選項

      - dataType - 設置服務器端返回的數據類型，這裏須要設置爲"jsonp" 

      - jsonpCallback - 爲JSONP請求指定一個回調函數名，這個值將用於替代jQuery自動生成的隨機函數名

      - jsonp - 在一個JSONP請求中重寫回調函數的名字，這個值將用於替代"callback=?"

總結：本章內容主要介紹了 Ajax跨域請求(Ajax跨域概述、Ajax跨域實現)