JSONP(JSON with Padding)是一种用于在客户端跨域请求数据的技术。它通过动态创建script标签并将其插入到HTML文档中来实现这一目的。该标签的src属性指向一个包含JSON数据的远程URL,并且该URL的响应被包装在一个函数调用中。
由于JavaScript在浏览器中运行,因此它受到同源策略的限制,即只能从与当前页面具有相同协议、主机和端口号的地址加载资源。但是,由于
JSONP的基本原理是:当客户端发起一个跨域请求时,服务器返回的不再是一个单独的JSON数据,而是一个JSON数据加上一个函数调用,例如:
callback({"name": "John", "age": 30})
其中,callback是客户端定义的一个函数名,服务器会把它作为参数传递进去。在客户端,我们需要定义一个与服务器返回的函数名相同的全局函数,以便正确解析响应数据。例如:
function callback(data) {
console.log(data.name);
}
在发起跨域请求时,我们需要将callback函数名作为一个参数传递给服务器,例如:
<script src="http://example.com/api?callback=callback"></script>
在这个例子中,我们将回调函数的名称指定为“callback”,然后在服务器响应中使用相同的名称包装JSON数据。当浏览器加载该脚本时,它会立即执行全局函数,并将服务器返回的JSON数据作为参数传递给它。
总之,JSONP是一种利用script标签来跨域请求数据的技术,它通过在服务器端返回一个包装在函数调用中的JSON数据来实现此目的。客户端定义一个与返回的函数名相同的全局函数,以便正确解析响应数据。
后台返回什么?
后台会返回一个字符串,这个字符串其实是一个函数,函数名由请求方给出,后台将请求的执行结果拼接好作为参数包裹在函数名里返回,相当于返回一个函数调用。
跨域是什么?
首先基于安全的原因,浏览器会受到同源策略的限制。跨域就是域名,协议,端口有一个不同,就会阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。