1. Knowledge curriculum goals and points
## Lesson objectives
- - grasp the principle jsonp
- - will build a node server interface to create jsonp
- - Institute of Packaging jsonp
- - practical application of learned jsonp
## knowledge points
- - solve cross-domain
- - jsonp the principle and packaging
- - jsonp server set up
- - jsonp practical application
2.ajax problem
Example:
In the case of non-homologous, such as the use ajax, port 3000, requesting the server interface port 4000, the request will not.
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");
In 3000 the port visit http: // localhost: 3000 / jsonp.html request: reported the following error
2.1 browser same-origin policy
- origin policy is a security feature browser client script different sources without the express authorization of the other resources can not read and write
- Source: Protocol, domain name and port number
2.2 Cross-Domain
The introduction of 2.3-origin policy is not affected by resources
- <script src="..."></script>，<img>，<link>，<iframe>
3.jsonp
JSONP * (JSON with Padding) to solve cross-domain problems; you can make Web pages that obtain information from another domain (website), that cross-domain data is read.
3.1- jsonp principle
3.2 is achieved by cross-domain script;
3.3 server to achieve
3.4 Request Baidu Interface
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=hello&cb=succFn
4.jsonp package
5. Case implement mushroom Street
5.1 dynamic data acquisition and rendering
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 implement a scroll and update data reacquisition
6.jsonp problem
- Only get request
- Security Issues
7. Summary
- - jsonp principle
- - jsonp Package
- - will build a node server interface to create jsonp
- - jsonp practical application
