JSONP
起始JSONP并不是通过AJAX实现,而是通过script标签的加入。我们知道通常在标签中src指向地址时,是可以直接通过的,而不需要考虑跨域
1、jsonp是通过创建script标签并且放在页面中,然后给通信地址就可以完成通信
var script=document.createElement("script");
script.src="地址";
document.body.appendChild(script);
2、jsonp通过地址传参方式将数据发送给服务端
3、jsonp在地址最后描述一个参数的值是一个函数名,通过执行该函数完成服务端到前端
跨域 当前后端ip或者端口不同时,就叫做跨域
解决跨域问题
orss方法 在服务器设置响应头Access-Control-Allow-Origin是指定的地址或者*
jsonp方法
服务代理方式 客服端请求服务端时如果出现端口和ip不同就算跨域。
但是服务端请求服务端就不算跨域 可以在客户端的相同ip和端口的服务中创建一个服务器
前端访问本地的服务器,然后由本地的服务器做中介与远程服务通信,然后回传
// jsonp方法
// jsonp 和 json没有关系
// jsonp和ajax也没关系
function jsonp(data){
var str="?";
for(var prop in data){
str+=prop+"="+data[prop]+"&";
}
str=str.slice(0,-1);
var script=document.createElement("script");
script.src="http://localhost:8000"+str+"&callback=fn1";
console.log(script.src);
document.body.appendChild(script);
}
jsonp({a:10,b:20});
百度搜索提示
function callback(data){
console.log(data);
}
var script=document.createElement("script");
script.src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=王羲之&json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback";
document.body.appendChild(script);
jQuery使用jsonp
var baidu={
sug:function(data){
console.log(data);
}
}
$.ajax({
url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
data:"wd=剑与远&json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0",
dataType:"jsonp",
jsonp:"callback",
})