javascript
JSONP - 跨域AJAX
基礎概念
在進入本文正題之前，我們需要先了解一些基礎概念（如果你已經對這些基礎有所了解，可跳過此段落）。
同源策略和跨域概念
同源策略（Same-orgin policy）限制了一個源（orgin）中加載腳本或腳本與來自其他源（orgin）中資源的交互方式。
如果兩個頁面擁有相同的協議（protocol），端口（port）和主機（host），那么這兩個頁面就屬于同一個源（orgin）。
同源之外的請求都可以稱之為跨域請求。
下表給出了相對http://store.company.com/dir/page.html同源檢測的示例：
?
| http://store.company.com/dir2/other.html | 成功 | ? |
| http://store.company.com/dir/inner/another.html | 成功 | ? |
| https://store.company.com/secure.html | 失敗 | 協議不同 |
| http://store.company.com:81/dir/etc.html | 失敗 | 端口不同 |
| http://news.company.com/dir/other.html | 失敗 | 主機名不同 |
?
我們可以簡單粗暴地理解為同一站點下的資源相互訪問都是同源的，跨站點的資源訪問都是跨域的。
跨域資源共享
跨域資源共享（CORS）是一份瀏覽器技術的規范，提供了Web服務器從不同網域傳來沙盒腳本的方法，以避開瀏覽器的同源策略，是JSONP模式的現代版。與JSONP不同，CORS除了支持GET方法以外，還支持其他HTTP方法。用CORS可以讓網頁設計師用一般的XMLHTTPRequest，這種方式的錯誤處理比JSONP要來的好。另一方面，JSONP可以在不支持CORS的老舊瀏覽器上運作，現代的瀏覽器都支持CORS。
在網頁http://caniuse.com/#feat=cors上列出了主流瀏覽器對CORS的支持情況，包含PC端和移動端的瀏覽器。
JSONP概念
由于同源策略，一般來說不允許JavaScript跨域訪問其他服務器的頁面對象，但是HTML的<script>元素是一個例外。利用 <script> 元素的這個開放策略，網頁可以得到從其他來源動態產生的 JSON資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料并不是 JSON，而是任意的JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。
REST Web Services簡介
HTTP協議是Web的標準之一，HTTP協議包含一些標準的操作方法，例如：GET, POST, PUT, Delete等，用這些方法能夠實現對Web資源的CURD操作，下表列出了這些方法的操作定義。
| GET | 讀取資源（Read） | 獲取被請求URI（Request-URI）指定的信息（以實體的格式）。 |
| POST | 創建資源（Create） | 在服務器上創建一個新的資源，并返回新資源的URI。 |
| PUT | 更新資源（Update） | 指定URI資源存在則更新資源，指定URI資源不存在則創建一個新資源。 |
| DELETE | 刪除資源（Delete） | 刪除請求URI指定的資源。 |
在REST應用中，默認通過HTTP協議，并且使用GET、POST、PUT和DELETE方法對資源進行操作，這樣的設計風格和Web標準完全契合。
REST的最佳應用場景是公開服務，使用HTTP并遵循REST原則的Web服務，我們稱之為RESTful Web Service。RESTful Web Service從以下三個方面進行資源定義：
- 直觀簡短的資源地址：URI，比如：http://example.com/resources/
- 傳輸的資源：Web Service接受與返回的互聯網媒體類型，比如JSON，XML等
- 對資源的操作：Web Service在該資源上所支持的一系列請求方法（比如：GET，POST，PUT或Delete）
下圖展示了RESTful Web Service的執行流程
本文的服務端程序是基于ASP.NET Web API構建的。
在了解了這些基礎知識后，我們就分別來構建服務端程序和客戶端程序吧。
?
http://kb.cnblogs.com/page/139725/
方法一：在后端代碼的頭部加入這個代碼（php示例）
header("Access-Control-Allow-Origin:*");或者
header("Access-Control-Allow-Origin:url地址");
方式二：
Web頁面上調用js文件時則不受是否跨域的影響（不僅如此，我們還發現凡是擁有”src”這個屬性的標簽都擁有跨域的能力，比如<script>、<img>、<iframe>
ajax和jsonp其實本質上是不同的東西。ajax的核心是通過XmlHttpRequest獲取非本頁內容，而jsonp的核心原理則是動態添加<script>標簽來調用服務器提供的js腳本
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head><title>Untitled Page</title><script type="text/javascript" src=jquery.min.js"></script><script type="text/javascript">jQuery(document).ready(function(){$.ajax({type: "get",async: false,url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",dataType: "jsonp",jsonp: "callback",//傳遞給請求處理程序或頁面的，用以獲得jsonp回調函數名的參數名(一般默認為:callback) jsonpCallback:"flightHandler",//自定義的jsonp回調函數名稱，默認為jQuery自動生成的隨機函數名，也可以寫"?"，jQuery會自動為你處理數據 success: function(json){alert('您查詢到航班信息：票價： ' + json.price + ' 元，余票： ' + json.tickets + ' 張。');},error: function(){alert('fail');}});});var flightHandler = function(data){alert('你查詢的航班結果是：票價 ' + data.price + ' 元，' + '余票 ' + data.tickets + ' 張。'); </script> </head> <body> </body> </html>?
jquery在處理jsonp類型的ajax時，自動幫你生成回調函數并把數據取出來供success屬性方法來調用
轉載于:https://www.cnblogs.com/CyLee/p/5381578.html
總結
以上是生活随笔為你收集整理的JSONP - 跨域AJAX的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Azkaban的Web Server源码
- 下一篇： 一些常见的配置