# 如何获取数据地址
-
后端。后端会给一个详细的接口文档地址给前端。
-
第三方的地址。因为浏览器的同源策略，在 A 站点中去拿 B 站点的数据会产生一个跨域问题。
# 如何解决跨域问题
-
让后端开放数据访问权限（除非是自己公司的网站，否则成功概率几乎为零）
-
使用 JSONP（json with padding）光明正大的拿（用来解决跨域问题的最有效的方式）
将 json 数据填充到函数参数中以达到传递的目的。JSONP 与 JSON 地址的唯一区别是前者用函数调用包裹者的。如果是 jsonp 就用 jsonp 来解决，否则用常规的 ajax 来解决。
# 如何知道数据地址
只有知道数据地址才能使用 jsonp 来解决。jsonp 也是用来获取数据的一种方式。
-
向后端要
-
通过网络面板自己去找数据
如何获取的步骤
a、打开浏览器的开发者工具
b、清空网络面板
c、发送一个请求，比如输入内容，看看网络面板的请求状态，找下有没有 xhr 等
d、点击打开该网络地址，看看是不是数据源
- 通过公开的渠道或别人告诉你的地址来获取
1、3 是拿来主义。2 才是技巧
# 使用 JS 的方式来解决跨域问题
实现原理：
1. 使用 script 标签引入数据（将 json 数据放入函数调用的参数中）
2. 定义函数，函数即为上面的函数
3. 在定义的函数内使用传过来的数据
4. 优化：将 script 带来的数据作为动态加载，只有需要的时候才请求，这样就做到了类似于 ajax 的效果
# 使用 JQ 的方式来解决跨域问题
ajax 和 jsonp 合二为一了。使用 JQ 来获取 jsonp 易如反掌，仅需要在昨天的 ajax 模板中添加两个配置项即可搞定。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| $.ajax({
type:"get|post",
url:"数据地址",
dataType:"jsonp",
jsonp:"回调函数的属性名，一般填cb,默认是callback",
success:function(res){
console.log(res);
},
error:function(err){
}
});
|
# 解决跨域问题实例
# 原生的 js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
原生可以跨域的标签有：
link:
a
video
audio
img
script 它被选中了用来解决跨域问题
-->
<input type="text" id="ipt" value="">
<button id="btn">搜索建议</button>
<ul id="list">
<!-- <li>jut</li> -->
</ul>
<script>
//为了让它看起来更加像ajax，我们可以将调用的代码改为动态生成
var btn=document.getElementById("btn");
var ipt=document.getElementById("ipt");
// 点击了按钮后再调用函数体的代码
// 按需加载
btn.onclick=function(){
// 动态生成一个script标签，该标签中的src地址就是jsonp地址，其实本质上就是在调用一个函数，并且返回了该数据
var os=document.createElement("script");
// os.src="jsonp/baidu1.js";
os.src="https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=32617,1445,32723,32231,7517,32117,31709,32761,26350&wd="+ipt.value+"&req=2&csor=1&cb=jQuery1102032309254967909795_1602724322024&_=1602724322031";
document.body.appendChild(os);
}
//写函数体，fun
function jQuery1102032309254967909795_1602724322024(data){
console.log(data);//拿到了外部JS的数据
//数组就数据，拿到后就可以开始干活了
//跟之前解析数据一样的做法了
//
var json=data.g;
console.log(json);
var html="";
for(var i=0;i<json.length;i++){
html+=`<li>${json[i].q}</li>`;
}
document.getElementById("list").innerHTML=html;
}
</script>
</head>
<body>
</body>
</html>
|
# 改回调函数名
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
原生可以跨域的标签有：
link:
a
video
audio
img
script 它被选中了用来解决跨域问题
-->
<input type="text" id="ipt" value="">
<button id="btn">搜索建议</button>
<ul id="list">
<!-- <li>jut</li> -->
</ul>
<script>
//为了让它看起来更加像ajax，我们可以将调用的代码改为动态生成
var btn=document.getElementById("btn");
var ipt=document.getElementById("ipt");
// 点击了按钮后再调用函数体的代码
// 按需加载
btn.onclick=function(){
// 动态生成一个script标签，该标签中的src地址就是jsonp地址，其实本质上就是在调用一个函数，并且返回了该数据
var os=document.createElement("script");
// os.src="jsonp/baidu1.js";
os.src="https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=32617,1445,32723,32231,7517,32117,31709,32761,26350&wd="+ipt.value+"&req=2&csor=1&cb=fun&_=1602724322031";
document.body.appendChild(os);
// cb === callback 回调
// callback
// 改调用的函数名的
};
//写函数体，fun
function fun(data){
console.log(data);//拿到了外部JS的数据
//数组就数据，拿到后就可以开始干活了
//跟之前解析数据一样的做法了
//
var json=data.g;
console.log(json);
var html="";
for(var i=0;i<json.length;i++){
html+=`<li>${json[i].q}</li>`;
}
document.getElementById("list").innerHTML=html;
}
</script>
</head>
<body>
</body>
</html>
|
# 用 jq 的方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery-3.5.1.min.js"></script>
</head>
<body>
<input type="text" id="ipt" value="">
<ul id="list">
<!-- <li>jut</li> -->
</ul>
<script>
$("#ipt").blur(function(){
$.ajax({
//默认是get，所以可以省略，等价于open()
type:"get",
//等价于open()
url:"https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=32617,1445,32723,32231,7517,32117,31709,32761,26350&wd="+$("#ipt").val()+"&req=2&csor=1&cb=fun&_=1602724322031",
// 如果是JSONP地址，则添加dataType属性
dataType:"jsonp",
// jsonp属性指的是url数据地址的用来填写回调函数的那个属性名
// 一般写cb,callback等，默认是callback
jsonp:"cb",
//该方法只会在数据获取成功后才会执行，
//等价于onreadystatechange,if(xhr.readyState==4&&xhr.status==200)
success:function(res){
//写如何解析json的代码
console.log(res);//res就是真对象，甚至可以不需要使用JSON.parse()
var json=res.g;
console.log(json);
var html="";
for(var i=0;i<json.length;i++){
html+=`<li>${json[i].q}</li>`;
}
document.getElementById("list").innerHTML=html;
},
//原来的JS是没有的，除非写else语句，可选
error:function(err){
}
});
});
</script>
</body>
</html>
|
