jsonp原理及同源策略

谁践踏了优雅 2021-09-15 11:12 319阅读 0赞

一.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=callbackFunction"></script>
    </body>
    </html>

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