JavaScript用JSONP跨域请求数据实例详解-js教程-PHP中文网

JavaScript用JSONP跨域请求数据实例详解

高洛峰

发布： 2017-01-09 10:46:06

原创

1437 人浏览过

前言

最近因为工作需要，需要把爱词霸的每日一句引入到页面上，爱词霸向外开放了 API, 接口返回 json 数据，为了让页面更轻巧，我没有用 jQuery，而是直接纯 js 写了一段代码：

<script type="text/javascript">
 function httpGetAsync(theUrl, callback)
 {
 xmlHttp = null;
 if (window.XMLHttpRequest)
 {// code for IE7, Firefox, Opera, etc.
 xmlHttp = new XMLHttpRequest();
 }
 else if (window.ActiveXObject)
 {// code for IE6, IE5
 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
 if (xmlHttp != null)
 {
 xmlHttp.onreadystatechange = function() {
 if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
 {
  callback(xmlHttp.responseText);
 }
 else
 {
  console.error("Problem retrieving XML data");
 }
 }
 xmlHttp.open("GET", theUrl, true); // true for asynchronous
 xmlHttp.setRequestHeader(&#39;Access-Control-Allow-Origin&#39;, &#39;*&#39;);
 xmlHttp.send(null);
 }
 else
 {
 console.error("Your browser does not support XMLHTTP.");
 }
 }
 
 function showIcibaDS(ds_data)
 {
 // show daily sentence
 content = ds_data.content;
 note = ds_data.note;
 document.write(content + &#39;<br>&#39;);
 document.write(note);
 }
 
 httpGetAsync("http://open.iciba.com/dsapi/", showIcibaDS);
</script>

登录后复制

运行之后数据并没有获取到，而是出现了如下错误提示：

XMLHttpRequest cannot load http://open.iciba.com/dsapi/. Response to preflight request doesn&#39;t pass access control check: No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource. Origin &#39;null&#39; is therefore not allowed access. The response had HTTP status code 501.

登录后复制

这就是跨域请求的问题。那么什么是跨域请求呢？浏览器出于安全方面的考虑，采用同源策略(Same origin Policy)，即只允许与同域下的接口交互。

同域是指：

同协议：如都是 http 或者 https

同域名：如都是 http://konghy.cn/a 或 http://konghy.cn/b

同端口：如都是 80 端口

也就是说，用户打开了页面: http://blog.konghy.cn，当前页面下的 js 向 http://blog.konghy.cn/XXX 的接口发数据请求，浏览器是允许的。但假如向: http://open.iciba.com/xxx 发数据请求则会被浏览器阻止掉，因为存在跨域调用。

跨域请求的解决办法就是 JSONP（JSON with Padding） . HTML 中 script 标签可以加载其他域下的 js, JSONP 就是通过 script 标签加载数据的方式去获取数据当做 JS 代码来执行，然后再用一个回调函数抽取数据：

<script type="text/javascript">
 var cur_date = new Date();
 document.getElementById("cur_year").innerHTML = cur_date.getFullYear();
 
 function showIcibaDS(ds_data)
 {
 // show daily sentence
 content = ds_data.content;
 note = ds_data.note;
 ds_p = document.getElementById("iciba_ds")
 var content_span = document.createElement(&#39;span&#39;);
 var note_span = document.createElement(&#39;span&#39;);
 var br = document.createElement(&#39;br&#39;)
 content_span.innerHTML = content
 note_span.innerHTML = note
 ds_p.appendChild(content_span);
 ds_p.appendChild(br);
 ds_p.appendChild(note_span);
 }
</script>
<script type="text/javascript" src="http://open.iciba.com/dsapi/?callback=showIcibaDS"></script>

登录后复制

再查查资料，发现有人做了封装：

function jsonp(setting)
{
 setting.data = setting.data || {}
 setting.key = setting.key||&#39;callback&#39;
 setting.callback = setting.callback||function(){}
 setting.data[setting.key] = &#39;__onGetData__&#39;
 
 window.__onGetData__ = function(data) {
 setting.callback (data);
 }
 var script = document.createElement(&#39;script&#39;)
 var query = []
 for(var key in setting.data)
 {
 query.push(key + &#39;=&#39; + encodeURIComponent(setting.data[key]))
 }
 script.src = setting.url + &#39;?&#39; + query.join(&#39;&&#39;)
 document.head.appendChild(script)
 document.head.removeChild(script)
}
 
jsonp({
 url: &#39;http://photo.sina.cn/aj/index&#39;,
 key: &#39;jsoncallback&#39;,
 data: { page: 1, cate: &#39;recommend&#39; },
 callback: function(ret) {
 console.log(ret)
 }
})

登录后复制

如果你使用的是 jQuery，则可以直接用 ajax 请求数据：

<script src="js/jquery-1.11.3.js"></script>
<script>
$(function(){
 $.ajax({
 async: true,
 type: "GET",
 dataType: &#39;jsonp&#39;,
 jsonp: &#39;callback&#39;,
 jsonpCallback: &#39;callbackfunction&#39;,
 url: "http://open.iciba.com/dsapi/",
 data: "",
 timeout: 3000,
 contentType: "application/json;utf-8",
 success: function(data) {
 console.log(data);
 }
 });
})
</script>

登录后复制

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

更多JavaScript用JSONP跨域请求数据实例详解相关文章请关注PHP中文网！