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


Posted in Javascript onJanuary 06, 2017

前言

最近因为工作需要,需要把爱词霸的每日一句引入到页面上,爱词霸向外开放了 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('Access-Control-Allow-Origin', '*');
 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 + '<br>');
 document.write(note);
 }

 httpGetAsync("http://open.iciba.com/dsapi/", showIcibaDS);
</script>

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

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

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

同域是指:

  1. 同协议:如都是 http 或者 https
  2. 同域名:如都是 http://konghy.cn/a 或 http://konghy.cn/b
  3. 同端口:如都是 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('span');
 var note_span = document.createElement('span');
 var br = document.createElement('br')
 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||'callback'
 setting.callback = setting.callback||function(){}
 setting.data[setting.key] = '__onGetData__'

 window.__onGetData__ = function(data) {
 setting.callback (data);
 }
 var script = document.createElement('script')
 var query = []
 for(var key in setting.data)
 {
 query.push(key + '=' + encodeURIComponent(setting.data[key])) 
 }
 script.src = setting.url + '?' + query.join('&')
 document.head.appendChild(script)
 document.head.removeChild(script)
}

jsonp({
 url: 'http://photo.sina.cn/aj/index',
 key: 'jsoncallback',
 data: { page: 1, cate: 'recommend' },
 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: 'jsonp',
 jsonp: 'callback',
 jsonpCallback: 'callbackfunction',
 url: "http://open.iciba.com/dsapi/",
 data: "",
 timeout: 3000,
 contentType: "application/json;utf-8",
 success: function(data) {
 console.log(data);
 }
 });
})
</script>

总结

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

参考资料

https://3water.com/article/75669.htm

https://zhuanlan.zhihu.com/p/22600501

Javascript 相关文章推荐
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
javascript对JSON数据排序的3个例子
Apr 12 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
AngularJS报错$apply already in progress的解决方法分析
Jan 30 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
Aug 24 Javascript
webpack常用配置总览(小结)
Nov 18 Javascript
JavaScript简单编程实例学习
Feb 14 Javascript
原生js实现日历效果
Mar 02 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
vue配置多代理服务接口地址操作
Sep 08 Javascript
js实现前端分页页码管理
Jan 06 #Javascript
纯js实现倒计时功能
Jan 06 #Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 #Javascript
微信小程序开发教程-手势解锁实例
Jan 06 #Javascript
jQuery ajax的功能实现方法详解
Jan 06 #Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
Jan 06 #Javascript
Jqprint实现页面打印
Jan 06 #Javascript
You might like
php is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
Laravel jwt 多表(多用户端)验证隔离的实现
2019/12/18 PHP
Javascript的getYear、getFullYear、getUTCFullYear异同分享
2011/11/30 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
JavaScript File API文件上传预览
2016/02/02 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
原生Javascript插件开发实践
2017/01/09 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
微信小程序使用wxParse解析html的方法教程
2018/07/06 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
2019/04/23 Javascript
详解JWT token心得与使用实例
2019/08/02 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
python unittest实现api自动化测试
2018/04/04 Python
Python简单基础小程序的实例代码
2019/04/28 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
家得宝加拿大家装网上商店:The Home Depot加拿大
2016/08/27 全球购物
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
大学军训感言1500字
2014/03/09 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
工作鉴定评语
2014/05/04 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
python基于tkinter制作下班倒计时工具
2021/04/28 Python
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
python区块链实现简版工作量证明
2022/05/25 Python
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js