JSONP是什么
|
介绍JSONP之前 ，我们先了解一下，页面数据交互的发展过程。来看下面一个例子。 付款是我们日常中常见的一种金钱交易，用户在页面中点击付款按钮，网页提交请求给服务器，服务器收到请求后在数据库对金额进行扣减，然后将消息返回给页面，告诉用户给付款成功。 1.用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>
服务器代码： 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()
}
效果如下： 2.SRJ方案这时候大家会发现一个问题，每次页面返回的success后都要再次刷新页面才能看到账户余额，这样的体验并不好，这时候神奇的前端程序员们又想到了一个办法SRJ方案 SRJ - Server Rendered JavaScript。 服务器代码实现如下： else if(path === '/pay'){
var amount = fs.readFileSync('./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>
3.JSONP解决了同一网站的信息交互，那么不同的网站之间（不同的域名），数据要怎么进行交互呢？以上的SRJ也是可以行得通的，只要修改地址为对方网站地址即可。因为script标签的请求不受域名限制。但是我们发现，如果使用SRJ方案，双方网站的代码耦合度太高，为了代码的解耦，有人提出了JSONP方案： 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的理解，如有错误欢迎指出。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |