后端服务器的准备
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({
multipart : true
}));
app.use(static(__dirname+"/static"));
router.get("/",async ctx =>{
// 测试数据,查看路由是否加载成功
ctx.body = {
name:"Mr_Qin",
age:"24"
};
// ctx.render()
});
router.get("/getAjax",async ctx =>{
console.log("来自 4000 的数据");
// 服务端没有返回任何东西的话 也会报错
ctx.body = " var a = 24 ";
})
app.use(router.routes());
app.listen(4000);
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({
multipart : true
}));
app.use(static(__dirname+"/static"));
router.get("/",async ctx =>{
ctx.body = {
name:"Mr_Qin",
age:"24"
};
// ctx.render()
});
app.use(router.routes());
app.listen(3000);
前端页面的准备
<button>获取ajax</button>
<script>
// ajax 不能实现跨域 自身无法做到
document.querySelector("button").onclick = function(){
let xhr = new XMLHttpRequest();
// 尝试 ajax 直接跨域
xhr.open("get","http://localhost:4000/getAjax",true);
xhr.onload = function(){
console.log(xhr.responseText)
}
xhr.send()
}
</script>
可以跨域的标签(测试)
<!-- 引入网络链接 script 跨域访问可实现 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入网络链接 img 跨域访问可实现 -->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586328014788&di=def29a76ad69feeba01313fe559644d0&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190121%2Fc884227770e64b67b024d48a8b51daca.jpeg" alt="" >
<!-- 注意参数的写法 字符串需要加符号 数字不需要 -->
<script src="http://localhost:4000/getAjax"></script>
<!-- jsonp 雏形 -->
<script>
// 输出引入的 vue
console.log(Vue);
console.log(a);
</script>
router.get("/getAjax",async ctx =>{
console.log("来自 4000 的数据");
// 服务端没有返回任何东西的话 也会报错
ctx.body = " var a = 24 ";
})
(直接返回JS代码)存在小问题
前端页面处理
document.querySelector("button").onclick = function(){
let port = 4000; // 这里需要 前、后端 协调处理
let o = document.createElement("script");
o.src = `http://localhost:${port}/getAjax`;
document.querySelector("head").appendChild(o);
// console.log(a) // 报错不会发现,原因:同步的问题直接加载过了
// 不会很推荐 解决方式存在一些问题 小功能可以使用
o.onload = function(){
console.log(a);
}
}
优化处理
处理方式,前端写函数传递到后端,再由后端将函数携带参数后返回
<button>点击获取跨域资源</button>
<script>
function cbfn(res){
// 后端返回的数据在这里
console.log(res);
}
document.querySelector("button").onclick = function(){
let port = 4000; // 这里需要 前、后端 协调处理
let o = document.createElement("script");
// 属性名 叫 cb 还是 callback 需要和后端 沟通过好 双方一致
o.src = `http://localhost:${port}/getAjax?cb=cbfn`;
// cb 传递的是一个函数体 给后端
document.querySelector("head").appendChild(o);
}
</script>
router.get("/getAjax",async ctx =>{
let obj = {
aname:"卡特琳娜",
sex:"女"
}
// 这里的 cb 是和后端人员共同拟定的名字
let cb = ctx.query.cb; // 来自前端的 ?cb=cbfn
// 封装的方法时 传入的参数为同样为 cb
console.log(cb);
// 将参数传递回前端
ctx.body = `${cb}(${JSON.stringify(obj)})`;
})
ajax 实现 jsonp
后端数据准备的服务器不需要变
前端需要引入封装好的 jsonp.js 文件(这里省略了)
<button>请求jsonp</button>
<!-- 引入封装的方法 -->
<script src="jsonp.js"></script>
<script>
// 回调函数 负责 去后端接收数据 并返回
function cbFn(res){
console.log(res)
}
// 封装的功能中 存在 ajax
document.querySelector("button").onclick = function(){
// 和 jQuery 很像
ajax({
url:"http://localhost:4000/getAjax",
data:{
name:"Mr_Qin",
age:"25"
},
dataType:"jsonp",
jsonp:"cbFn",// 回调函数 => 后端修改为 ctx.query.cbFn
success:function(res){ // 成功后返回的数据
console.log(res);
}
})
}
</script>