zoukankan      html  css  js  c++  java
  • 跨域访问之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如何解决跨域。

  • 相关阅读:
    dagScheduler
    elasticsearch映射
    elasticsearch数据结构
    spring boot 整合 elasticsearch 5.x
    spark快速开发之scala基础之5高阶函数,偏函数,闭包
    Halcon学习笔记2
    HALCON算子1
    Halcon学习笔记1
    ML-学习提纲2
    ML-学习提纲1
  • 原文地址:https://www.cnblogs.com/hbb0b0/p/7082925.html
Copyright © 2011-2022 走看看