引言：
我们在使用淘宝，百度，等很多浏览器时候，他们都会贴心的提示与输入相关的内容，用户查找起来就非常的舒服，那我们就可以使用跨域知识来实现该功能
1，跨域基本知识点
- 概念：当一个请求服务器地址的协议、域名、端口三者之间任意一个与当前页面的url不同即为跨域
- 本质：在需要跨域的页面定义一个方法，服务器返回该方法的调用，而方法中的参数就是我们想要的数据
- 联系：当前页面的url的协议，域名，端口与要访问服务器的url相同叫同源
- 判别是否跨域的练习：
| 发出请求页面的URL | 被请求页面的URL | 结果 | 原因 |
| http://www.zhangsan.com/ | http://www.zhangsan.com/taobao.html | 同源 | 协议、域名、端口完全相同 |
| http://www.zhangsan.com/ | https://www.zhangsan.com/taobao.html | 跨域 | 协议不同 |
| http://www.zhangsan.com/ | http://www.lisi.com | 跨域 | 域名不同 |
| http://www.zhangsan.com:80/ | http://www.zhangsan.com:81/ | 跨域 | 端口不同 |
2，为什么要跨域，常见案列有哪些？
- ajax只能获取自己服务器的数据，跨域才能访问其他服务器数据
- 比如获取天气，中国天气网他那有服务器来存储实时数据，这不在我们的服务器上，我们也没法自己维护这么大的数据
- 又比如车票的查询，实时变动的庞大数据本地服务器是无法承载的，想要获取数据，这就要用到跨域
3，跨域小案例：淘宝提示词
- 首先我们来看看接口文档
- Js代码块
<script>
window.onload = function() {
var input = document.querySelector('#keyword');
var ul = document.querySelector('ul');
input.oninput = function() {
var keywordValue = input.value;
var script = document.createElement('script');
script.src = 'https://suggest.taobao.com/sug?q=' + keywordValue + '&callback=fn';//被请求页面的url，根据输入的不同动态生成script
var head = document.querySelector('head');
head.appendChild(script);
window['fn'] = function(data) {//被请求url以函数调用方式返回的数据
ul.innerHTML = '';//每次查询遍历数据前，清空原数据
data.result.length <= 10 ? data.result.length : 10;//保证最多只显示10条数据
for (var i = 0; i < data.result.length; i++) {
var item = data.result[i];
var itemText = item[0];
ul.insertAdjacentHTML('beforeend', '<li>' + itemText + '</li>')//新曾的插入方法，更方便
}
}
}
}
</script>- html代码块（用了一下bootstrap）==》bootstrap学习
<body>
<!-- 用bootstrap快速生成页面组件 -->
<div class="input-group col-md-6">
<input type="text" class="form-control" id="keyword" placeholder="Search">
<span class="input-group-btn">
<button type="button" class="btn btn-default">Go!</button>
</span>
</div>
<ul></ul>
</body>- 简单的css样式
<style>
* {
padding: 0;
margin: 0;
}
.input-group {
margin: 100px auto;
}
ul {
width: 709px;
margin-top: -100px;
position: relative;
left: 382px;
border: 1px solid #eeeeee;
box-sizing: border-box;
}
ul li {
list-style: none;
padding: 5px;
}
ul li:hover {
background-color: #eeeeee;
cursor: pointer;
}
</style>- 结果展示
4，关键知识点解惑
可能看完最大的疑惑就是为什么这条语句这样写就能拿到数据？
script.src = 'https://suggest.taobao.com/sug?q=' + keywordValue + '&callback=fn';这里相当于在模拟地址栏操作，而q是接口文件规定死的，我们不能该，后端的代码通过p来识别获取用户输入的内容，来访问数据库，并以函数调用的方式来返回查询的数据，这个我们写一个超级简单的php来方便我们的学习理解这句代码
<?php
$fun=$_GET['callback'];
$content=$_GET['p'];
if($content=="apple"){
echo $fun."('apple旗舰店')";
}else{
echo $fun."('查不到')";
}
?>
我们要知道的是：用跨域来获取别人服务器的数据，并渲染到我们自己的页面上就行，至于数据是怎么查询的，这不是前端的活
扫描二维码关注公众号，回复：
11214935 查看本文章
原创文章 24
获赞 16
访问量 2347