JSONP技术栈_jsonp的使用
前面学习了这么多，都是在和页面打交道，不管是html、css、JavaScript，dom，都没有跑出浏览器，那今天来学习下和后台交互。
简单的前后端交互
写一个简单的node.js脚本,让我们的页面能够正常运行
- 创建一个文件夹里面创建两个文件
- 新建一个脚本文件
- 新建一个index.html文件
- 打开服务器,就可以看到自己的页面了
脚本文件
var http = require('http')
var fs = require('fs')
var url = require('url')
var port = process.argv[2]
if(!port){
console.log('请指定端口号好不啦？\nnode server.js 8888 这样不会吗？')
process.exit(1)
}
var server = http.createServer(function(request, response){
var parsedUrl = url.parse(request.url, true)
var path = request.url
var query = ''
if(path.indexOf('?') >= 0){ query = path.substring(path.indexOf('?')) }
var pathNoQuery = parsedUrl.pathname
var queryObject = parsedUrl.query
var method = request.method
/******** 从这里开始看，上面不要看 ************/
if(path === '/'){
var string = fs.readFileSync('./index.html','utf8')
response.setHeader('Content-Type','text/html;charset=utf-8')
response.write(string)
response.end()
}else if(path === '/style.css'){
var string = fs.readFileSync('./style.css','utf8')
response.setHeader('Content-Type','text/css')
response.write(string)
response.end()
}else if(path === '/main.js'){
var string = fs.readFileSync('./main.js','utf8')
response.setHeader('Content-Type','text/javascript')
response.write(string)
response.end()
}else{
response.statusCode = 404
response.setHeader('Content-Type','text/html;charset=utf-8')
response.end('找不到对应的路径,你需要自行修改 index.js')
}
/******** 代码结束，下面不要看 ************/
})
server.listen(port)
console.log('监听 ' + port + ' 成功\n请用在空中转体720度然后用电饭煲打开 http://localhost:' + port)index.html文件
<!DOCTYPE html>
<html>
<head>
<title>首页</title>
</head>
<body>
<h5>你的余额是<span id="amount">100</span></h5>
<button id="button">付款</button>
<script>
button.addEventListener('click',function(e){
let n = amount.innerText; //类型是String
let number = +n;
let newNumber = number - 1;
amount.innerText = newNumber;
})
</script>
</body>
</html>当我们点付款的时候，100会往下减小，但是当我们刷新页面的时候，又变成了100，这里的问题是我们的数据没有长久的存储在数据库里面。
我们该怎么解决这个问题呢?
用占位符替换页面数据
我们在刚才的页面中新建一个文件，作为我们的数据库，现在我们把100元写在数据库里。
touch db
echo '100' > dbindex.html中的100用一个占位符替代，这样写了好处是可以在脚本中把这个数字替换称真实的数据。
<span id="amount">&&&amount&&&</span>在脚本中if(path === '/')里加一个替换占位符语句。
var amount = fs.readFileSync('./index','utf8') //文件中的数据类型是String
string = string.replace('&&&amount&&&',amount)重启服务器后，刷新页面还是问题还是没解决，怎么办呢?
form表单发请求
我点付款的时候告诉服务器，请把数据库里的100变成99，然后刷新页面；我不擅自改变了页面中的数据，那我点付款的时候，发起一个POST请求,应该怎么做呢?
<form action="pay" method="post">
<input type="submit" value="付款">
</form> 在服务器里面增加一个/pay请求路径。
if(path === '/pay' && method.toUpperCase() === 'POST'){
var amount = fs.readFileSync('./db','utf8')
var newAmount = amount - 1
fs.writeFileSync('./db',newAmount)
response.write('success') //成功后给用户返回
response.end()
}当你点付款的时候，是不是看到success写到了页面中，点击浏览器的返回上一页，刷新下当前页面，是不是发现变成99了，前端要写的就是form表单，后端如果发现是某个路径并且是POST请求，就去操作数据库。
这是旧时代的操作，在2005年之前，都是这样操作的，form表单一旦提交了都会刷新当前页面，可以用iframe解决页面刷新的问题。
iframe解决页面刷新问题
动态创建img标签
如果不用iframe发请求，还能用什么发请求呢？有很多标签可以创建请求，比如a标签、script标签、link标签、img标签等。
那我们先来动态的创建一张图片。
button.addEventListener('click',function(e){
let image = document.creatElevent('img')
image.src = '/pay'
image.onload = function(){}
image.onerror = function(){}
})onload和onerror是提示用户成功了还是失败，可以在成功的里面加上一个window.location.reload()成功后会自动刷新页面。
刷新页面会造成浏览器重新渲染
用这方法有两个的缺陷，那当付款成功后，页面自动减1，amount.innerText = amount.innerText - 1。
- 只能发起GET请求，不能发POST请求。
- 必须要返回真实的图片，只给一个状态码是不行的。
SRJ方案
动态创建script标签
下面再来动态创建script标签
button.addEventListener('click',function(){
var script = document.createEvent('script')
script.src = '/pay'
document.body.appendChild(script) //必须要将创建出来的Script放在页面中才可以
})
因为在页面中创建了script它是会执行的，所以这里就不需要用onload去监听了，把内容直接写在script上面，这里执行的先后顺序是先执行脚本里的script，执行完了之后才执行外面的script。
response.write(`alert("success")
amount.innerText = amount.innerText -1`) //ES6字符串方法用这种方法,每次都会创建一个script，显得页面很难看，还要用onload去监听。
script.onload = function(e){
e.currentTarget.remove()
}
script.onload = function(e){
e.currentTarget.remove()
}当用户点击付款时，生成一个script，script的src就是你要请求的路径，然后把script放到页面里，这样浏览器就能发起这个路径的GET请求，没办法发起POST 请求，如果这个请求成功了，它首先会执行服务器返回的JavaScript 响应，操作页面局部刷新，为什么这里会执行，是因为我们上面给它设置了HTTP 协议，执行之后，onload或onerror再把它删掉，虽然删掉了但它还是在内存中。
这就是SRJ方案，全称 Server rendered javascript，在ajax出来以前，程序员想出来的，无刷新局部更新页面内容的方案。
请求另一个网站的script
在页面中引入一个script时，一定要当前域名吗？当然不是的。
那这样的话，是不是操作别人网站的/pay，所以GET请求太不安全了，太容易伪造了，所以大部分的/pay都用POST请求去做。
PORT=8002 node index.js 可以开多个端口SRJ方案前后端耦合太紧密了，需要后端对页面了解太清楚。
其实前端提供一个xxx() api就可以了。
response.write(`
xxx.call(undefined,'success')
`)JSONP方案
前端提供 API 的方法，其实解耦还没有解的很干净，我们在设置script的src时直接给它传参，后端插入这个参数这就可以了，看下面：
script.src = 'http://baidu.com:8002/pay?callbackName=xxx'${query.callbackName}.call(undefined,'success')上面就是JSONP，JSONP解决了两个网站之间的交流。
${query.callbackName}.call(undefined,{
"success": true
"left": ${newAmount}
})上面call里面大括号中的内容符合 JSON 的语法，左边是left-padding，右边是right-padding，所以 JSON + padding = JSONP。
用文字叙述 JSONP
请求方:qq.com的前端程序员(浏览器)
响应方:baidu.com的后端程序员(服务器)
- 请求方创建script ,src 指向相应方同事传一个查询参数 ?callbackName = xxx
- 响应方根据查询参数callbackName,构造形如 xxx.call(undefined,'你要的数据')这样的响应
- 浏览器接收到响应,xxx.call(undefined,'你要的数据')
- 那么请求方就知道了它要的数据
这就是JSONP
约定:
- callbackName -> callback
- xxx -> 随机数
按照约定写一下
button.addEventListener('click',funcion(e){
let script = document.creatElevent('script')
let functionName = parseInt(Math.random()*1000000) //这个函数名是随机数
window[functionName] = function(result){ //result是服务器返回的结果
if(result === 'success'){
amount.innerText = amount.innerText - 1
}
}
script.src = 'http://baidu.com:8002?callback=' + functionName //写在参数里面
document.body.appendChild(script)
script.onload = function(e){
e.currentTarget.remove()
delete window[functionName] //如果成功了要干掉这个函数
}
script.onerror = function(e){
alert("false")
e.currentTarget.remove()
delete window[functionName] //如果失败了也要干掉这个函数
}
})jquery实现
用jQuery就能非常方便的使用
button.addEventListener('click',function(){
$.ajax({
url: "http://baidu.com:8002/pay"
dataType: "JSONP"
success:function(response){
console.log(response)
}
})
})JSONP为什么不支持POST请求
- 因为JSONP是通过动态创建Script实现的
- 动态创建Script只有GET请求没有POST请求
原文来源：https://segmentfault.com/a/1190000015050698?utm_source=channel-hottest
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
