ajax的jsonp实现跨域
- 原由
由于ajax的是通过XMLHttpRequest对象请求数据的,在同源的条件(协议,域名,端口号都相同)下,这没什么问题,但在不同源的情况下,浏览器是不允许XMLHttpRequest对象跨域请求的,所以便提出很多实现跨域的方案,如iframe,jsonp等方法,但jsonp最常用,其实jquery的$.ajax跨域请求就是通过jsonp实现的
- json详解
1.前端代码
<script>
function jsonp(url, arg, fn) {
//1.动态创建script标签,设置src属性
//1.1 地址请求格式: url?page=1&count=10&callback=fn
var srpt = document.createElement('script');
var queryString = '';
for (var key in arg) {
queryString += key + '=' + arg[key] + '&';
}
var funName = 'fun_' + Math.random().toString().substr(3);
window[funName] = fn;
url += '?' + queryString;
url += 'callback=' + funName;
srpt.src = url;
//2.将创建好的script标签添加到页面上
document.body.appendChild(srpt);
}
//url:"",arg:{},callback
jsonp('http://127.0.0.1:3000/home.js', {page: 1, count: 10},
function (data) {
console.log(data.age,1);
}
);
//jsonp调用,请求http://127.0.0.1:3000/home.js?age=1&count=10&callback=fun_562156256(函数名是随机生成的,相应回来后,通过该回调函数处理取回的数据)
jsonp('http://127.0.0.1:3000/home.js', {page: 1, count: 10},
function (data) {
console.log(data.age,2);
}
);
</script>
后端服务器代码
const express = require('express');
const app = express();
app.get('/home.js',(req,res)=>{
var funName = req.query.callback;
res.send(funName+"({name:'jack',age:21,sex:'男'})");
});
app.listen(3000);