JSONP的介绍和封装

Mathea ·

更新时间:2024-09-21

· 668 次阅读

什么是 JSONP
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，是一种非常常用的跨域请求方式。主要原理是利用了script 标签可以跨域请求的特性，由其 src属性发送请求到服务器，服务器返回 JavaScript 代码，浏览器接受响应，然后就直接执行了，这和通过 script 标签引用外部文件的原理是一样的。

JSONP由两部分组成：回调函数和数据，回调函数是当响应到来时应该在页面中调用的函数，回调函数的名字一般在请求中指定。当服务器响应时，服务器端就会把该函数和数据拼成字符串返回。

同源策略：
是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。所谓同源是指，域名，协议，端口相同。

跨域数据访问：
跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。跨域的严格一点的定义是：只要协议，域名，端口有任何一个的不同，就被当作是跨域

由于同源策略，一般来讲，一个www.a.com的请求是访问不到www.b.com的页面的；但是js中的拥有src标签的属性是列外，比如script img iframe标签都有跨域能力，于是程序员为了解决这个问题，想了一个解决的办法，即jsonp！
简单的说就是把需要的数据通过js来调用，然后以json格式存取的方法

JSONP代码的封装

function jsonp(url,success,data){
    //处理要发送的数据，处理成这种格式："user=admin&pass=123"
    data = data || {};
    let str = "";
    //遍历data对象
    for(var key in data){
        str += `${key}=${data[key]}&`;
    }
    let t = new Date().getTime();
    str = str + "__qft="+t;
    // 创建一个script标签
    var script = document.createElement("script");
    // 设置要请求的资源地址，拼接要发送的数据
    script.src = url + "?" + str;
    // 将script标签插入页面
    document.body.appendChild(script);
    // 使用window，在局部声明全局函数，准备被后台返回的数据解析后，执行，当对象的属性是变量时，要使用[]语法包裹变量。
    window[data[data.fieldName]] = function(res){
        success(res);
    }
}

JSONP代码的使用


//封装后的调用形式，如：jsonp(url,success,data)
//url：为支持jsonp跨域的请求地址
//success：请求的表示成功之后，执行的回调函数
//data：要发送给后台的数据，对象形式
//其中fieldName属性保存的是后台接收的 要执行的函数名所在的字段名,根据后台接收的字段名，将随便写的函数名传给后台.
document.onclick = function(){
    //这里写入跨域请求的地址，目前以php文件为例子
	let url = "http://127.0.0.1/jsonp/data/jsonp4.php";
	jsonp(url,function(res){
	console.log(res);
	},{
	user:"name",
	pass:123,
// 根据后台规定的字段名，随便传个函数名过去，让后台返回值后，能被script解析
	cbn:"zxc",
// 为了实现前端的封装思想，为了适应后台不断变化的地址，将后台要接受的字段名，传给自己的函数
	fieldName:"cbn"
	});
}

跨域解决方案

1）通过 jsonp 跨域

2） document.domain + iframe 跨域

3） location.hash + iframe

4） window.name + iframe 跨域

5） postMessage 跨域

6）跨域资源共享（CORS）

7） nginx 代理跨域

8） nodejs 中间件代理跨域

9） WebSocket 协议跨域

JSONP 优缺点

JSONP 的优点是：它不像 XMLHttpRequest 对象实现的 Ajax 请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要 XMLHttpRequest 或 ActiveX 的支持；并且在请求完毕后可以通过调用 callback 的方式回传结果。