由于同源策略的限制，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}
根据筛选条件返回的数据
网友评论