1、搭建nodejs服务器,端口号为8888
2、在服务器中拦截index
//拦截index
router.get("/index",function(req,resp){
let data=JSON.stringify({
status_code:200,//状态码
result:{//返回的数据
name:"张丹",
age:11
}
})
//发送数据
resp.send(`${req.query.callback}(${data})`)
})
3、新建一个html文件,代码如下:
<script>
function getData(data){
//得到另一个服务器的数据
console.log(data)
}
</script>
<script src="http://localhost:8888/index?callback=getData"></script>
通过script标签src属性进行跨域访问http://localhost:8888/index
原生JavaScript封装jsonp
<script>
jsonp({
url:'http://localhost:8888/index',
data:'',
success:(data)=>{
console.log(data)
}
})
function jsonp(options) {
// 1.产生一个不重复函数名
let callbackName='itlike_'+Math.random().toString().substr(2)
//运行函数
window[callbackName]=function(data){
options.success(data)
document.body.removeChild(script)
}
// 2.处理url的拼接
options.url=options.url+'?callback='+callbackName;
// 3.创建script标签
let script=document.createElement('script')
script.src=options.url;
document.body.appendChild(script)
}
</script>
jQuery中的jsonp的使用
<script src="day03/jquery-1.11.3.js"></script>
<script>
$.ajax({
url: "http://localhost:8888/index",
type: "get",
dataType:"jsonp",
jsonpCallback:"callback",
data: {},
success: function (data) {
console.log(data);
}
})
</script>