一.关于历史：
1.以前后端请求或发起数据时要用form表单发起请求<form method="post/get" target="/pay"></form>
2.接着会跳转到新的页面中 '/pay'，然后手动返回还要刷新（或者3秒后跳转之类的），这样的话用户体验差很不爽。
3.这时出现了一些有追求的Coder为了提高用户体验性开始用<img>等标签发起请求，但是有缺陷比如必须返回一张图片，这样白白浪费一张图片不利于网页优化。
4.于是发现类似的还有<script>标签用script标签发起请求，后端操作完数据以后直接返回成功或者失败的提示，最后别忘了remove标签，虽然移除了页面里看不见了，但是其实在内存里还在的。也就是他所造成的影响并没有消除。
总结：这个方案叫 "SRJ"(server rendered javascript) 即服务器返回的javascript 。这个就是在ajax之前一些牛逼的程序员想出的无刷新局部更新页面内容的方案。
二.注意：
知识点1.为什么这段代码会被当做js执行？
image.png
原因：
1.首先在setheader中有写application/javascript
2.在前端也确实用script标签创建通过src引入的，所以自然会被当做js执行啦
image.png
知识点2：script标签中的src属性是不受域名限制的。这很正常吧，比如说我在我html页面中引入百度的jquery.js。当然css 中的link、 <img>中的src 都是如此并没有域名限制。（除非防盗链之类的）
知识点3：一些打钱取钱一类的必须用post，get太容易伪造了，不安全。
注意几点：
1.约定callbackName必须为 callback
2.yyy是一个随机数
2.还不懂的话看这两张图
客户端代码
image.png
后端代码
image.png
3.总结：
请求方：frank.com 的前端程序员（浏览器）
响应方：jack.com 的后端程序员（服务器）
1.请求方创建 script，src 指向响应方，同时传一个查询参数 ?callback=yyy
2.响应方根据查询参数callback，构造形如
yyy.call(undefined, '你要的数据')```
yyy('你要的数据')
这样的响应
3.浏览器接收到响应，就会执行 yyy.call(undefined, '你要的数据')
那么请求方就知道了他要的数据
4.所以什么是JSONP？
可以这样说：
利用<script>标签的src属性的跨域请求，传递一个callback参数给跨域服务器，然后跨域服务端返回数据时会将这个callback参数作为函数名来包裹住json数据（或其他字符串），为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP。
5.jQuery用法
$.ajax({
url: "http://jack.com:8002/pay",
dataType: "jsonp",
success: function( response ) {
if(response === 'success'){
amount.innerText = amount.innerText - 1
}
}
})
网友评论