跨域訪問之JSONP

標籤：瀏覽器   ebs   資料   自動   https   format   height   res   bsp   

跨域

在平常的工作中常常會遇到A網站的需要訪問B網站的資源.

這時就產生了跨域訪問。

跨域是指從一個網域名稱的網頁去請求另一個網域名稱的資源。瀏覽器遵循同源策略，不允許A網站的Javascript 讀取B網站返回的資料。因為A網站的javascript 與B返回的資料不同源的。但是瀏覽器並不阻止A的Ajax請求訪問B，瀏覽器允許A取回B的資料，但是不允許A中的指令碼操作B的資料。如所示的③

 

 

 

 

 

同源策略：

資料與操作必須是同源的，否則不能操作。

什麼是同源：瀏覽器認為的同源是什嗎？

判斷是否同源，標準如下

主機名稱：IP或網域名稱

連接埠號碼：

協議：http,https

 

如何解決？

如果操作的指令碼與資料同源，那麼瀏覽器不會阻止這樣的操作。那麼如何做呢？

 

瀏覽器調用js檔案時則不受跨域的影響（不僅如此，我們還發現凡是擁有”src”這個屬性的標籤都擁有跨域的能力，比如<script>、<img>、<iframe>，如果能把操作與資料放在一起，那麼瀏覽器就會網開一面，對此操作允許存取。

 

 

 

 

 

 

這時JSONP 應運而生。

 

JSONP：Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網頁從別的網域名稱（網站）那擷取資料，即跨域讀取資料。

 

實戰

l  項目結構

 

 

 

hbb0b0.mvc.website 網站 hbb0b0/index頁面擷取 網站Hbb0b0.mvc.API 下StudentController/GetStudentList 的資料

 

l  hbb0b0.mvc.website  index頁面代碼如下：

<script type="text/javascript">        $(function () {            $.ajax({                type: "get",                async: false,                url: "http://localhost:51250/Student/GetStudentList",                dataType: "jsonp",                jsonp: "callback",//傳遞給請求處理常式或頁面的，用以獲得jsonp回呼函數名的參數名(一般預設為:callback)                jsonpCallback: "getStudentList",//自訂的jsonp回呼函數名稱，預設為jQuery自動產生的隨機函數名，也可以寫"?"，jQuery會自動為你處理資料                success: function (data) {                    //alert(data.name);                    console.log(data);                },                error: function () {                    alert(‘fail‘);                }            });         });         function getStudentList(list) {             alert();            console.debug("getStudentList", list);            $.each(list, function (index, student) {                 var html = "<ul>";                html += "<li> name:" + student.Name + "</li>"                html += "</ul>";                $("#divStudentList").append(html);            });        }    </script>

 

 

l  Hbb0b0.mvc.API StudentController/GetStudentList 代碼如下

 

public class StudentController : Controller    {        // GET: Student        public ActionResult Index()        {            return View();        }              public ContentResult GetStudentList(string callback)        {            const int MAX = 10;            List<Student> list = new List<Student>();            for (int i = 0; i < MAX; i++)            {                Student st = new Student(i);                list.Add(st);            }            string data=  new JavaScriptSerializer().Serialize(list);            return  Content(string.Format("{0}({1})", callback,data));        }    }     public class Student    {        public Student(int i)        {            this.ID = string.Format("ID:{0}",i.ToString());            this.Name = string.Format("Hbb0b0{0}", i.ToString());        }         public string ID        {            get;            set;        }         public string Name        {            get;            set;        }         public int Age        {            get;            set;        }  }

 

 

l  執行結果：

 

 

 

 

總結

JSONP 雖然能處理跨域問題，但是只能處理get的跨域請求，對於post請求就裡不存心了。跨域問題正統的做法是CORS，下篇就介紹下CORS如何解決跨域。

跨域訪問之JSONP