JSONP - 跨域AJAX

時間 2019-11-10

標籤 jsonp ajax 欄目 JSON 简体版

原文原文鏈接

基礎概念

在進入本文正題以前，咱們須要先了解一些基礎概念（若是你已經對這些基礎有所瞭解，可跳過此段落）。javascript

同源策略和跨域概念

同源策略（Same-orgin policy）限制了一個源（orgin）中加載腳本或腳本與來自其餘源（orgin）中資源的交互方式。
若是兩個頁面擁有相同的協議（protocol），端口（port）和主機（host），那麼這兩個頁面就屬於同一個源（orgin）。php

同源以外的請求均可以稱之爲跨域請求。
下表給出了相對http://store.company.com/dir/page.html同源檢測的示例：html

URL	結果	緣由
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	失敗	主機名不一樣

咱們能夠簡單粗暴地理解爲同一站點下的資源相互訪問都是同源的，跨站點的資源訪問都是跨域的。java

跨域資源共享

跨域資源共享（CORS）是一份瀏覽器技術的規範，提供了Web服務器從不一樣網域傳來沙盒腳本的方法，以避開瀏覽器的同源策略，是JSONP模式的現代版。與JSONP不一樣，CORS除了支持GET方法之外，還支持其餘HTTP方法。用CORS可讓網頁設計師用通常的XMLHTTPRequest，這種方式的錯誤處理比JSONP要來的好。另外一方面，JSONP能夠在不支持CORS的老舊瀏覽器上運做，現代的瀏覽器都支持CORS。jquery

在網頁http://caniuse.com/#feat=cors上列出了主流瀏覽器對CORS的支持狀況，包含PC端和移動端的瀏覽器。ajax

JSONP概念

因爲同源策略，通常來講不容許JavaScript跨域訪問其餘服務器的頁面對象，可是HTML的<script>元素是一個例外。利用 <script> 元素的這個開放策略，網頁能夠獲得從其餘來源動態產生的 JSON資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料並非 JSON，而是任意的JavaScript，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。json

REST Web Services簡介

HTTP協議是Web的標準之一，HTTP協議包含一些標準的操做方法，例如：GET, POST, PUT, Delete等，用這些方法可以實現對Web資源的CURD操做，下表列出了這些方法的操做定義。後端

HTTP方法	資源處理	說明
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屬性方法來調用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。