前言
最近因为工作需要，需要把爱词霸的每日一句引入到页面上，爱词霸向外开放了 接口返回 json 数据，为了让页面更轻巧，我没有用 jQuery，而是直接纯 js 写了一段代码：
function showIcibaDS(ds_data)
{
// show daily sentence
content = ds_data.content;
note = ds_data.note;
document.write(content + '
');
document.write(note);
}
{
// show daily sentence
content = ds_data.content;
note = ds_data.note;
document.write(content + '
');
document.write(note);
}
httpGetAsync("http://open.iciba.com/dsapi/",showIcibaDS);
运行之后数据并没有获取到，而是出现了如下错误提示：
这就是跨域请求的问题。那么什么是跨域请求呢？浏览器出于安全方面的考虑，采用同源策略(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 发数据请求则会被浏览器阻止掉，因为存在跨域调用。
跨域请求的解决办法就是 . HTML 中 script 标签可以加载其他域下的 js,JSONP 就是通过 script 标签加载数据的方式去获取数据当做 JS 代码来执行，然后再用一个回调函数抽取数据：
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);
}
{
// 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);
}
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
参考资料
https://zhuanlan.zhihu.com/p/22600501
原文链接：https://www.f2er.com/js/42805.html