我们在使用淘宝，百度，等很多浏览器时候，他们都会贴心的提示与输入相关的内容，用户查找起来就非常的舒服，那我们就可以使用跨域知识来实现该功能 可能看完最大的疑惑就是为什么这条语句这样写就能拿到数据？ 这里相当于在模拟地址栏操作，而q是接口文件规定死的，我们不能该，后端的代码通过p来识别获取用户输入的内容，来访问数据库，并以函数调用的方式来返回查询的数据，这个我们写一个超级简单的php来方便我们的学习理解这句代码 我们要知道的是：用跨域来获取别人服务器的数据，并渲染到我们自己的页面上就行，至于数据是怎么查询的，这不是前端的活
引言：
1，跨域基本知识点
发出请求页面的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，为什么要跨域，常见案列有哪些？
3，跨域小案例：淘宝提示词
<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>
<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>
<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';
<?php $fun=$_GET['callback']; $content=$_GET['p']; if($content=="apple"){ echo $fun."('apple旗舰店')"; }else{ echo $fun."('查不到')"; } ?>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
