摘要：同时请求方在本地定义了这个调用函数。如下给调用函数创建一个随机的函数名为响应网站的域名，为响应网站的端口号定义函数执行结束删除标签执行结束删除函数执行结束删除标签执行结束删除函数响应方根据查询参数查找到函数名后，回调这个函数，做出响应。
介绍JSONP之前 ，我们先了解一下，页面数据交互的发展过程。来看下面一个例子。
付款是我们日常中常见的一种金钱交易，用户在页面中点击付款按钮，网页提交请求给服务器，服务器收到请求后在数据库对金额进行扣减，然后将消息返回给页面，告诉用户给付款成功。
在jsonp ajax的概念实现之前，以上付款的网页数据交互过程是怎么实现的呢？
大家都知道form表单有提交post请求功能，我们可以利用form表单，告诉服务器【请求扣款】
页面代码如下：用表单提交post请求，请求路径为/pay
Title
您的账户余额是&&&amount&&&
服务器代码：
当请求的路径为/pay时，数据库进行扣减金额一块钱，然后给页面返回success，否则告诉页面请求出错了。
else if(path === "/pay"){
var amount = fs.readFileSync("./db","utf8");
var newAmount = amount - 1;
fs.writeFileSync("./db",newAmount);
response.write("success");
response.end();
}
else{
response.statusCode = 404
response.setHeader("Content-Type", "text/html;charset=utf-8")
response.write("噢噢，好像出错了呢")
response.end()
}
效果如下：
这时候大家会发现一个问题，每次页面返回的success后都要再次刷新页面才能看到账户余额，这样的体验并不好，这时候神奇的前端程序员们又想到了一个办法SRJ方案 SRJ - Server Rendered JavaScript。
这时候就不得不佩服前辈们的‘脑洞’啦。程序员想到script标签也可以发送请求，因此可以通过动态的创建script标签来向服务器发送请求，服务器完成操作后，返回结果动态的修该页面的账户金额；同时本地页面监听script标签的onload,onerror事件，来删除动态创建的script标签，节省内存。
服务器代码实现如下：
else if(path === "/pay"){
var amount = fs.readFileSync("./db","utf8");
var newAmount = amount - 1;
fs.writeFileSync("./db",newAmount);
response.setHeader("Content-Type", "application/javascript")
response.statusCode = 200;
response.write(`amount.innerText = amount.innerText - 1`);
response.end();
}
else{
response.statusCode = 404
response.setHeader("Content-Type", "text/html;charset=utf-8")
response.write("噢噢，好像出错了呢")
response.end()
}
页面实现：
3.JSONP您的账户余额是&&&amount&&&
解决了同一网站的信息交互，那么不同的网站之间（不同的域名），数据要怎么进行交互呢？以上的SRJ也是可以行得通的，只要修改地址为对方网站地址即可。因为script标签的请求不受域名限制。但是我们发现，如果使用SRJ方案，双方网站的代码耦合度太高，为了代码的解耦，有人提出了JSONP方案：
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。
1.请求方通过动态创建的script标签的src路径指向响应方，并且在路径上添加一个查询参数(按照约定，参数名为callback)，该查询参数告知响应方应该调用的函数名。同时请求方在本地定义了这个调用函数。如下：
let functionName = "tina"+parseInt(Math.random()*100000,10);
//给调用函数创建一个随机的函数名
script.src = "http://u.com:8002/pay?callback=" + functionName;
//u.com为响应网站的域名，8002为响应网站的端口号
window[callback] = function(result){ //定义函数
if(result === "success"){
amount.innerText = amount.innerText - 1;
}
}
script.onload = function(e){
e.currentTarget.remove();//执行结束删除script标签
delete window[callback]; //执行结束删除函数
}
script.onerror = function (e) {
alert("fail");
e.currentTarget.remove();//执行结束删除script标签
delete window[callback];//执行结束删除函数
}
})
2.响应方根据查询参数查找到函数名后，回调这个函数，做出响应。当回调函数响应的数据（"success"P)是json格式时以下的代码就是JSONP。
response.write(`${query.callback}.call(undefinded,"success")`);
3.完成以上步骤后，请求方得到了响应的数据，就会返回到页面上。
以上代码是原生JS的实现，JQuery也封装了JSONP，代码如下
//u.com为响应网站的域名，8002为响应网站的端口号
$.ajax({
url: "http://u.com:8002/pay",
dataType: "jsonp",
success: function( response ) {
if(response === "success"){
amount.innerText = amount.innerText - 1
}
}
})
$.jsonp()
这里值得注意一下JQuery封装的JSONP虽然起了一个与ajax相近的名字，但是与ajax没有关系，因为ajax不支持跨域请求。
了解完以上对JSONP的解释，我们也能很容易明白JSONP为什么不支持POST请求，是因为JSONP是通过动态创建scipt实现的，并且script标签不支持POST请求。
以上是我个人对JSONP的理解，如有错误欢迎指出。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/92527.html
摘要：因为同源策略的限制，我们不能在与外部服务器进行通信的时候使用。这个是跨域服务器取数据的接口，参数为回调函数的名字，返回的格式为原理首先在客户端注册一个然后把的名字传给服务器。 一、同源策略 同源策略，它是由Netscape提出的一个著名的安全策略，现在所有的可支持javascript的浏览器都会使用这个策略。 为什么需要同源策略，这里举个例子： 假设现在没有同源策略，会发生什么事...
摘要：是一种协议，为了解决客户端请求服务器跨域的问题，但是并非是正式的传输协议。结果明明请求回来数据，结果还是报错。是一种使用数据的方式，返回的不是对象，是包含对象的脚本。 1、什么是JSONP 一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的 元素是一个例外。利用 元素的这个开放策略，网页可以得到...
摘要：因为有同源策略，而在实际开发中又常常会有跨域的需求，早期开发者为了解决跨域问题而搞出来这样一个颇为奇怪的东西。安全早期的浏览器处于安全层面的考量，制定同源策略，限制了一个源中加载文本或脚本与来自其它源中资源的交互方式。 AJAX、JSON、JSONP 在 WEB 开发中，经常见到诸如 AJAX、JSON、JSONP 这些名词。三者看起来很像，很多同学尤其是没有系统了解过前端技术体系的同...
