zoukankan      html  css  js  c++  java
  • jsonp原理及同源策略

    【个人学习笔记,如有问题还请前辈纠正】

    jsonp 是用来跨域读取数据的,为什么从不同的域访问数据要用jsop呢?这源于一个著名的安全策略--同源策略,即:

      协议、端口号、域名相同

      举例说明:http://www.myweb.com:8080/demo/index.html [协议:http://  端口:8080  域名:www.myweb.com]

      http://www.myweb.com:8080/src/list.html  [同源]

      http://www.myweb.com/src/list.html  [不同源:端口不同]

      http://myweb.com:8080/src/list.html  [不同源:域名不同]

    同源策略会限制

      1.cookie、localStorage、indexDB无法读取,

      2.DOM无法获得,

      3.Ajax请求不能发送。

    这样做的好处在于保护了用户信息安全。为了既保护用户信息安全,又规避跨域(不同源则为跨域)限制,因此需要使用这种特殊的技术--jsonp.

    jsonp利用script标签具有跨域能力的特点,允许用户通过script的src属性向服务器发送请求,并传递一个函数名作为参数,服务端返回数据时会将这个callback函数作为函数名包裹住从服务端接收的json数据,客户端会按照定义好的方式处理数据。举例如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>JSONP 实例</title>
    </head>
    <body>
    <div id="list"></div>
    <script type="text/javascript">
    function callbackFunction(result, methodName) {
      var html = '<ul>';
      for(var i = 0; i < result.length; i++) {
        html += '<li>' + result[i] + '</li>';
      }
      html += '</ul>';
      document.getElementById('list').innerHTML = html;
    }
    </script>
    <script type="text/javascript" src="http://www.myweb.com/demo/jsonp.php?jsoncallback=</script>
    </body>
    </html>

    以上,callbackFunction函数名作为参数传递给服务器,服务器返回数据形式为:callbackFunction(["list1","list2"]),显示结果会按照 callbackFunction()函数来处理。

  • 相关阅读:
    0101
    正则表达式 re模块
    经典算法>>mor-c3 / 删除排序
    网络编程
    面向对象>>类(三大特性:继承多态封装)>>反射,内置函数/方法,
    经典算法>冒泡 和二分法
    Apollo 5.0 障碍物行为预测技术
    一种新颖鲁棒的自动驾驶车辆换道轨迹规划方法
    自动驾驶中轨迹规划的探索和挑战
    Lattice Planner规划算法
  • 原文地址:https://www.cnblogs.com/liangru/p/7741940.html
Copyright © 2011-2022 走看看