1. Objetivos del plan de estudios de conocimientos y puntos
## Objetivos de la lección
- - captar el principio jsonp
- - va a construir una interfaz de servidor de nodo para crear jsonp
- - Instituto de Embalaje jsonp
- - aplicación práctica de jsonp aprendido
## puntos de conocimiento
- - resolver varios dominios
- - jsonp el principio y el embalaje
- - jsonp servidor configurado
- - jsonp aplicación práctica
problema 2.ajax
Ejemplo:
En el caso de no homólogos, tales como el uso de Ajax, el puerto 3000, solicitando la interfaz de servidor de 4000, la solicitud no lo hará.
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");
En 3000 la visita del puerto http: // localhost: 3000 / jsonp.html solicitud: aparece el error siguiente
2.1 navegador política del mismo origen
- política de origen es una característica de secuencia de comandos cliente de navegador de seguridad diferentes fuentes sin la autorización expresa de los otros recursos no pueden leer y escribir
- Fuente: Protocolo, nombre de dominio y número de puerto
2.2 Cross-Domain
La introducción de la política de 2.3 origen no se ve afectada por los recursos
- <script src = "..."> </ script>, <img>, <link>, <iframe>
3.jsonp
JSONP * (JSON con relleno) para resolver problemas entre dominios, se puede hacer que las páginas Web que obtienen información de otro dominio (sitio web), que los datos de dominios cruzados se lee.
3.1- principio jsonp
3,2 se consigue mediante la escritura de dominios cruzados;
3.3 servidor para lograr
3.4 Solicitud de Baidu interfaz
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=hello&cb=succFn
paquete 4.jsonp
5. Caso aplicar la calle de setas
adquisición de datos y la representación dinámica 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 implementar una readquisición de datos de desplazamiento y actualización
problema 6.jsonp
- Sólo recibe la solicitud
- Problemas de seguridad
7. Resumen
- - Principio de jsonp
- - Paquete jsonp
- - va a construir una interfaz de servidor de nodo para crear jsonp
- - jsonp aplicación práctica
