由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。
实现跨域的几种常见形式:
1.通过iframe内联框架,引入需要跨域的地址。
2.动态创建script节点,添加节点至表头,创建信息显示回调函数,通过节点src属性传入地址并在尾部依附函数用 于传递服务端后执行。
function jsonpCallback(result) {
for(var i in result) {
alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
}
}
varJSONP=document.createElement("script");
JSONP.type="text/javascript";
JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";
document.getElementsByTagName("head")[0].appendChild(JSONP);
3.通过jquery封装好的$.ajax方法,需要注意的地方:
(1)dataType数据类型需要是jsonp格式
(2)需要指定一个查询参数名称来覆盖默认的jsonp回调参数名callback
(3)data对象用于编写查询接口需要的条件
搜索图书 https://api.douban.com//v2/book/search的接口部分分别可以传入q(用于模糊查询,返回符合条件数据),count(用于限定返回数据条数),那么可以在Jsonp的data参数进行条件编写,那么将返回符合具有‘我是谁‘的10条有效数据。
(4)通过success回调函数接取返回的数据,传入的参数代表数据、状态码及状态值。
$.ajax({
url:"https://api.douban.com/v2/book/search",
type:"GET",
dataType:"jsonp" ,//返回的数据类型,设置为JSONP方式
jsonp:'callback', //指定一个查询参数名称来覆盖默认的jsonp回调参数名callback
jsonpCallback:'handleResponse',//设置回调函数名
data: {
q:"我是谁",
count:10
},
success:function(response,status,xhr){
console.log('状态为:'+ status +',状态是:'+ xhr.statusText);
console.log(response);
}
})
然而,可能会有大量的属性内容我们在实际开发中并不需求,数据的冗杂对服务器端造成很大的负荷,那么我们可以通过fields 参数选择需要的指定字段 https://api.douban.com/v2/book/17604305?fields=id,title,url
在ajax中的属性配置仅需要在data中做出条件设置
url:"https://api.douban.com/v2/book/search" //不用改变
data : { fields:'id,title,url', q:'欢迎你', conut:10}