1.课程目标及知识要点
## 课堂目标
- - 掌握jsonp的原理
- - 会搭建node服务器创建jsonp接口
- - 学会封装jsonp
- - 学会jsonp的实际运用
## 知识要点
- - 跨域解决
- - jsonp原理及封装
- - jsonp服务器搭建
- - jsonp实际运用
2.ajax问题
示例：
在非同源情况下，如使用ajax，在3000端口上，请求4000端口上服务器接口，就会请求不到。
html:
<body>
<button>发送请求</button>
<script>
document.querySelector("button").onclick = function(){
let xhr = new XMLHttpRequest();
xhr.open("get","http://localhost:4000/getInfo",true);
xhr.onload = function(){
console.log(xhr.responseText);
};
xhr.send();
};
</script>
</body>jsonp3000.js
const Koa = require("koa");
const Router = require("koa-router");
const static = require("koa-static");
const koaBody = require("koa-body");
let app = new Koa();
let router = new Router();
app.use(koaBody());
app.use(static("static"));
router.get("/",(ctx,next)=>{
ctx.body = "请求成功";
});
router.get("/getInfo",(ctx,next)=>{
ctx.body = "getInfo请求成功";
});
app.use(router.routes());
app.listen("3000");
jsonp4000.js
const Koa = require("koa");
const Router = require("koa-router");
const static = require("koa-static");
const koaBody = require("koa-body");
let app = new Koa();
let router = new Router();
app.use(koaBody());
app.use(static("static"));
router.get("/",(ctx,next)=>{
ctx.body = "请求成功";
});
router.get("/getInfo",(ctx,next)=>{
ctx.body = "getInfo请求成功";
});
app.use(router.routes());
app.listen("4000");
在3000端口下访问http://localhost:3000/jsonp.html进行请求：报以下错误
2.1- 浏览器同源策略
- 同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源
- 源 ：协议、域名和端口号
2.2- 跨域
2.3- 不受同源策略影响的资源的引入
- <script src="..."></script>，<img>，<link>，<iframe>
3.jsonp
JSONP*(JSON with Padding)解决跨域问题；可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
3.1- jsonp原理
3.2- 通过script来实现跨域；
3.3- 服务端实现
3.4- 请求百度接口
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=hello&cb=succFn4.jsonp封装
5.蘑菇街案例实现
5.1- 实现动态数据的获取及渲染
https://list.mogu.com/search?callback=jQuery2110599693622515429_1558943916971&_version=8193&ratio=3%3A4&cKey=15&page=1&sort=pop&ad=0&fcid=52014&action=food5.2- 实现滚动底部数据的重新获取及更新
6.jsonp问题
- 只能是get请求
- 安全性问题
7.总结
- - jsonp原理
- - jsonp封装
- - 会搭建node服务器创建jsonp接口
- - jsonp实际运用
