跨域访问之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如何解决跨域。