史上最暴力的 jsonp
2018-01-09 本文已影响0人
_月光临海
看了无数的 jsonp 原理，但始终不明白怎么用，今天终于弄明白了，写个笔记记录一下
这里有个更清晰的解释 jsonp的原理与实现
准备工作
- 这是一个豆瓣的接口：https://api.douban.com/v2/book/search?q=javascript&count=1
-
接口内容如下图
豆瓣接口
jQuery 的代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$.ajax({
url: "https://api.douban.com/v2/book/search",
type: "GET",
data: {
q: "javascript",
count: 1
},
dataType: "jsonp", // 使用 [JSONP](http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/ "http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/") 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
jsonp: "callback", // 一般默认就是 "callback"，试着改了个别的就不好使了（这行可不写）
jsonpCallback: "abc", // 自己定义的一个回调函数名（这行可不写）
success: function(data) {
console.log(data)
},
error: function() {
console.log("error")
}
})
</script>
</body>
</html>
参数说明
-
$.ajax 中的各个参数对应实际到底是什么东西：
对应每个参数是什么
用原生的再搞一遍
- 这里还有个接口
https://suggest.taobao.com/sug?code=utf-8&q=卫衣
是这个东东
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
button{
font-size: 50px;
}
</style>
</head>
<body>
<button>点我！</button>
<hr />
<p>这里一会会被替换为 response</p>
<script type="text/javascript">
let btn = document.getElementsByTagName('button')[0];
btn.onclick = function() {
let script = document.createElement('script');
script.src = 'https://suggest.taobao.com/sug?code=utf-8&q=卫衣&callback=cheers';
document.body.insertBefore(script, document.body.firstChild);
}
function cheers(res) {
res = JSON.stringify(res)
document.getElementsByTagName('p')[0].innerHTML = res;
}
</script>
</body>
</html>
简单说明一下
