目錄
1.課程目標及知識要點
## 課堂目標
- 掌握jsonp的原理
- 會搭建node服務器創建jsonp接口
- 學會封裝jsonp
- 學會jsonp的實際運用
## 知識要點
- 跨域解決
- jsonp原理及封裝
- jsonp服務器搭建
- jsonp實際運用
2.ajax問題
2.1問題重現
在非同源下，請求不到接口
示例：在非同源情況下，如使用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.2瀏覽器同源策略
- 同源策略是瀏覽器的一個安全功能，不同源的客戶端腳本在沒有明確授權的情況下，不能讀寫對方資源
- 源 ：協議、域名和端口號
2.3跨域
跨域即非同源，非跨域即同源
區分：協議，域名，端口，都相同就是同源，其中有一個不同就是非同源。
2.4不受同源策略影響的資源的引入
以下資源引入不收同源策略影響：
<script src="..."></script>，<img>，<link>，<iframe>
3.jsonp
JSONP*(JSON with Padding)解決跨域問題；可以讓網頁從別的域名（網站）那獲取資料，即跨域讀取數據。
3.1jsonp原理
3.2通過script來實現跨域；
3.3服務端實現
3.4請求百度接口
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=hello&cb=succFn
4.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=food
5.2實現滾動底部數據的重新獲取及更新
6.jsonp問題
- 只能是get請求
- 安全性問題
7.總結
- - jsonp原理
- - jsonp封裝
- - 會搭建node服務器創建jsonp接口
- - jsonp實際運用