简单梳理前端请求的变迁史,着重对JSONP进行整理
请求演变
- 使用form表单提交请求,缺点是每次提交必定会刷新页面
- 在1基础之上使用iframe进行局部刷新,用户体验得到一定优化
- 动态创建图片提交请求
- 注意请求与返回内容类型须一致
- 每次必须返回图片较为不便
- 动态创建script提交请求(即JSONP)
- 注意script必须在插入页面后(可使用append方法)才会提交请求
- 为了不刷新页面可依据后端数据库变化情况同时对前端页面内容进行同步更新
- script载入完成后可将其移除
- 提交请求时可直接讲callback值传入
JSONP定义:
-
请求方创建 script,src 指向响应方,同时传一个查询参数 ?callback=xxx
-
响应方根据查询参数 callback,构造形如
xxx.call(undefined, '你要的数据')
xxx('你要的数据')
这样的响应
-
浏览器接收到响应,就会执行
xxx.call(undefined, '你要的数据')
-
那么请求方就知道了他要的数据