跨域？跨域实现淘宝提示词功能

最新推荐文章于 2025-01-20 21:04:49 发布

太想进步了

最新推荐文章于 2025-01-20 21:04:49 发布

阅读量1.8k

点赞数 7

文章标签： ajax js 前端 bootstrap

本文链接：https://blog.youkuaiyun.com/qq_44755188/article/details/106180162

版权

引言：

我们在使用淘宝，百度，等很多浏览器时候，他们都会贴心的提示与输入相关的内容，用户查找起来就非常的舒服，那我们就可以使用跨域知识来实现该功能

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."('查不到')";
}
?>

我们要知道的是：用跨域来获取别人服务器的数据，并渲染到我们自己的页面上就行，至于数据是怎么查询的，这不是前端的活

这里还有用jQuery封装的函数，来更加便捷的跨域获取数据传送门：一杯咖啡时间弄懂jQuery使用ajax，跨域获取数据