介绍JSONP之前 ，我们先了解一下，页面数据交互的发展过程。来看下面一个例子。
付款是我们日常中常见的一种金钱交易，用户在页面中点击付款按钮，网页提交请求给服务器，服务器收到请求后在数据库对金额进行扣减，然后将消息返回给页面，告诉用户给付款成功。
在jsonp ajax的概念实现之前，以上付款的网页数据交互过程是怎么实现的呢？
大家都知道form表单有提交post请求功能，我们可以利用form表单，告诉服务器【请求扣款】
页面代码如下：用表单提交post请求，请求路径为/pay
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h5>您的账户余额是<span id="amount">&&&amount&&&</span></h5>
<form action="/pay" method="post">//用表单提交post请求，请求路径为/pay
<input type="submit" value="付款">
</form>
</body>
</html>
服务器代码：
当请求的路径为/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()
}
效果如下：
image.png
image.png
这时候大家会发现一个问题，每次页面返回的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()
}
页面实现：
<h5>您的账户余额是<span id="amount">&&&amount&&&</span></h5>
<button id="button">打钱</button>
<script>
button.addEventListener('click',function(e){
let script = document.createElement('script');
script.src = '/pay';
document.body.appendChild(script);
script.onload = function(e){
e.currentTarget.remove();
}
script.onerror = function (e) {
alert('fail');
e.currentTarget.remove();
}
})
</script>
解决了同一网站的信息交互，那么不同的网站之间（不同的域名），数据要怎么进行交互呢？以上的SRJ也是可以行得通的，只要修改地址为对方网站地址即可。因为script标签的请求不受域名限制。但是我们发现，如果使用SRJ方案，双方网站的代码耦合度太高，为了代码的解耦，有人提出了JSONP方案：
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。
JSONP的主要思路是：
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的理解，如果错误欢迎指出。
网友评论