Jsonp跨域请求
一、同源策略要理解跨域,先要了解一下“同源策略”。所谓同源是指,域名,协议,端口相同。所谓“同源策略“,简单的说就是基于安全考虑,当前域不能访问其他域的东西。 在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的。例如我们在自己的网站通过ajax去获取豆瓣上https://developers.douban.com...提供的接口数据。这里我们以搜索图书为例,参数链接为:https://api.douban.com/v2/boo...,该链接中数据为JSON格式,如下: 我通过如下代码去访问该数据: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax</title> </head> <body> <div id="mydiv"> <button id="btn">点击</button> </div> </body> <script type="text/javascript"> window.onload = function() { var oBtn = document.getElementById('btn'); oBtn.onclick = function() { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { alert( xhr.responseText ); } }; xhr.open('get','https://api.douban.com/v2/book/search?q=javascript&count=1',true); xhr.send(); }; }; </script> </html> 上述程序运行时会报错:
但<img>的src(获取图片),<link>的href(获取css),<script>的src(获取javascript)这三个都不符合同源策略,它们可以跨域获取数据。这里要介绍的JSONP就是利用<script>的src来实现跨域获取数据的。 二、JSONPJSONP 是 JSON with padding(填充式 JSON 或参数式 JSON)的简写。 JSONP实现跨域请求的原理简单的说, JSONP 由两部分组成: 动态创建<script>标签,设置其src,回调函数在src中设置: var script = document.createElement("script"); script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse"; document.body.insertBefore(script,document.body.firstChild); 在页面中,返回的JSON作为参数传入回调函数中,我们通过回调函数来来操作数据。 function handleResponse(response){ // 对response数据进行操作代码 } 了解了JSONP的基本使用方法,我们在实现上面通过ajax调用豆瓣接口的需求,实现代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JSONP实现跨域2</title> </head> <body> <div id="mydiv"> <button id="btn">点击</button> </div> </body> <script type="text/javascript"> function handleResponse(response){ console.log(response); } </script> <script type="text/javascript"> window.onload = function() { var oBtn = document.getElementById('btn'); oBtn.onclick = function() { var script = document.createElement("script"); script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse"; document.body.insertBefore(script,document.body.firstChild); }; }; </script> </html> 三、jQuery封装JSONP对于经常用jQuery的开发者来说,能注意到jQuery封装的$.ajax中有一个dataType属性,如果将该属性设置成dataType:"jsonp",就能实现JSONP跨域了。需要了解的一点是,虽然jQuery将JSONP封装在$.ajax中,但是其本质与$.ajax不一样。 通过jQuery的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery实现JSONP</title> </head> <body> <div id="mydiv"> <button id="btn">点击</button> </div> </body> <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script type="text/javascript"> $(function(){ $("#btn").click(function(){ $.ajax({ async : true,url : "https://api.douban.com/v2/book/search",type : "GET",dataType : "jsonp",// 返回的数据类型,设置为JSONP方式 jsonp : 'callback',//指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback jsonpCallback: 'handleResponse',//设置回调函数名 data : { q : "javascript",count : 1 },success: function(response,status,xhr){ console.log('状态为:' + status + ',状态是:' + xhr.statusText); console.log(response); } }); }); }); </script> </html> 注:本文为转载 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |