您的位置：首页 > Web前端 > JavaScript

关于jsonp跨域

2016-12-28 22:10 363 查看

一.来源：因为Ajax直接请求普通文件存在跨域无权限访问的问题，

二.jsonp定义:JSONP（JSON with Padding）是数据格式JSON的一种“使用模式”，可以让网页从别的网域要数据。另一个解决这个问题的新方法是跨来源资源共享

三.同源策略：它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来百度和谷歌的页面当一个百度浏览器执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。

四.jsonp原理：

用我自己理解的就是：

1.script标签可以引入其他网站的文件

2.文件的后缀对计算机是没有意义的，只是给人们识别功能用的

jsonP本身就是一个get请求，而script节点本身也是一个get请求

https://www.zhihu.com/question/19966531 - - -来自知乎对jsonp原理的回答

五.写法实现思路：

1.动态创建script标签，写入src属性

2.定义一个全局的回调函数(callback)

注意：面对非标准格式的跨域数据，需要自己重新写jsonp

六.下面Demo实现从百度或者360搜索跨域拿数据

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<script src="jsonp.js"></script>
<script>
window.onload = function(){
var oText = document.getElementById("txt1");
//百度
var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";
//360，需要时去掉注释
//var url = "https://sug.so.360.cn/suggest";

oText.onkeyup = function(){
jsonp({
url:url,
data:{
wd:this.value,
word:this.value,
},
//callback--->360
//cb--->百度
//cbName:"callback",
cbName:"cb",
success:function (json){
var oUl = document.getElementById("ul1");
oUl.innerHTML = "";
for(var i = 0; i < json.s.length; i++){
var oLi = document.createElement("li");
oLi.innerHTML = json.s[i];
oUl.appendChild(oLi);
}
},
error:function (){
alert("超时");
},
timeout:1000
});
};
};
</script>
</head>
<body>
<input id="txt1" type="text" value=""/>
<ul id="ul1"></ul>
</body>
</html>

/**
* Created by chaney on 2016/12/28.
*/
function jsonp(options) {
options = options || {};
if (!options.url) return;
options.data = options.data || {};
options.cbName = options.cbName || "cb";
options.timeout = options.timeout || 0;

var fnName = ("jsonp_" + Math.random()).replace(".", "");

var arr = [];
options.data[options.cbName] = fnName;
for (var name in options.data) {
arr.push(name + "=" + encodeURIComponent(options.data[name]));
}
var str = arr.join("&");

//2 全局函数
window[fnName] = function (json) {

options.success && options.success(json);
window[fnName] = null;
oHead.removeChild(oS);
clearTimeout(timer);
};

//1 创建script
var oS = document.createElement("script");
oS.src = options.url + "?" + str;
var oHead = document.getElementsByTagName("head")[0];
oHead.appendChild(oS);

if (options.timeout) {
var timer = setTimeout(function () {
options.error && options.error();
window[fnName] = function () { };
oHead.removeChild(oS);
}, options.timeout);
}

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript jsonp跨域 json ajax 前端开发

相关文章推荐

新的分享

章节导航