跨域訪問之JSONP

跨域

在日常的工做中經常會遇到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如何解決跨域。