课堂笔记
-
<form>表单一旦提交一定会刷新当前页面，只能用iframe来避免页面刷新，不好用 - 除了
<form>还有什么发起请求
<link><script><img>都可以发起请求
- 动态创建一个可以发起请求的标签
- 该标签的路径指向请求方
- 浏览器向该路径发起请求，以达到想要的目的
- 缺点：不能用POST方法，只能GET
- 通过创建
<img>来发起请求：
let img = document.createElement('image')
img.src = '/pay'
img.onload = ()=>{amount.innerText = amount.innerText-1 ; alert('扣款成功')}
img.onerror = ()=>{alert('扣款失败')}//onload和onerror可以监听服务器返回的状态码来确定请求成功与否
- 通过
<script>发请求只能通过放入页面中实现
let script = document.createElement('script')
script.src = '/pay'
document.body.appendChild(script)
script.onload = ()=>{amount.innerText = amount.innerText-1 ;alert('扣款成功')}
script.onerror = ()=>{alert('扣款失败')}
在<body>里添加的<script>是会不断执行并存在的。所以要改进：
该方案被称为SRJ方案:server randered Javascript
let script = document.createElement('script')
script.src = '/pay'
document.body.appendChlid(script)
script.onload = (x)=>{x.currentTarget.remove()}
script.onerror = (x)=>{x.currentTarget.remove()}
同时，只要在后端把服务器响应的第四部分写好，就可以让后端帮我们执行amount.innerText = amount.innerText-1 ;alert('扣款成功')，但这必须要求后端对前端页面细节有了解，说明前后端耦合，不是一件好事。
这时需要解耦。我在前端把接口写好，后端只需要在响应的第四部分调用相应的接口即可。并且我在发<script>请求时将回调函数写入查询中，方便后端获取该函数
let xxx = (result)=>{alert(`打款结果是${result}`)}
button.onclick = ()=>{
let script = document.createElement('script')
script.src = '/pay?callback=xxx'
document.body.appendChlid(script)
script.onload = (x)=>{x.currentTarget.remove()}
script.onerror = (x)=>{x.currentTarget.remove()}
}
到这一步的方案就是JSONP，利用<script>可以向不同域名发起请求（其他标签也可以）完成跨域请求。
JSONP可以浅显理解为JSON+padding
后端程序员在进行回调函数调用时，把数据以JSON语言（或其他语言形式）的形式当成参数。
-
最终代码
-
什么是JSONP
并且约定<script>路径中的查询参数为callback=函数名的形式，其中为防止函数名污染全局变量，函数名应为随机数，函数调用完后即删除 -
JSONP为什么不支持POST方法？
因为JSONP是通过动态创建<script>实现的，而<script>标签只支持GET方法
网友评论