jsonp原理及同源策略

时间 2019-11-20

标签 jsonp 原理同源策略栏目 JSON 繁體版

原文原文链接

【我的学习笔记，若有问题还请前辈纠正】javascript

jsonp 是用来跨域读取数据的，为何从不一样的域访问数据要用jsop呢？这源于一个著名的安全策略--同源策略，即：php

　　协议、端口号、域名相同html

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

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

　　http://www.myweb.com/src/list.html [不一样源：端口不一样]json

　　http://myweb.com:8080/src/list.html [不一样源：域名不一样]跨域

同源策略会限制安全

　　1.cookie、localStorage、indexDB没法读取，服务器

　　2.DOM没法得到，cookie

　　3.Ajax请求不能发送。

这样作的好处在于保护了用户信息安全。为了既保护用户信息安全，又规避跨域（不一样源则为跨域）限制，所以须要使用这种特殊的技术--jsonp.

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

<!DOCTYPE html>

<html>

<head>

<title>JSONP 实例</title>

</head>

<body>

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>

</body>

</html>

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