利用Jsonp做网络搜索框

解决浏览器跨域问题的几种方法

  1. flash
  2. 服务器代理中转
  3. Jsonp
  4. document.domain(针对基础域名相同的情况)

这篇博客主要介绍Jsonp

Josnp

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的< script > 元素是一个例外。利用 < script > 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。

Jsonp原理

  1. Web页面上用< script > 引入 js文件时则不受是否跨域的影响
    (不仅如此,我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力,比如< script >、< img >、< iframe >)

  2. 于是我们把数据放到服务器上,并且数据为json形式(因为js可以轻松处理json数据)

  3. 因为我们无法监控通过< script >的src属性是否把数据获取完成,所以我们需要做一个处理。

  4. 实现定义好处理跨域获取数据的函数,如 function doJSON(data){ }。

  5. 用src获取数据的时候添加一个参数cb=‘doJSON’ (服务端会根据参数cb的值返回 对应的内容) 此内容为以cb对应的值doJSON为函数真实要传递的数据为函数的参数的一串字符 如 doJSON(’数据’)

百度搜索框

使用Jsonp做一个百度搜索框
完成效果:
这里写图片描述

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
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度搜索框</title>
<style>
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
#box{
width: 400px;
margin: 50px auto;
}
#inp {
width: 400px;
height: 20px;
line-height: 20px;
}
ul{
display: none;
}
a{
color: red;
}
</style>
</head>
<body>
<div id="box">
<input type="text" id="inp">
<ul id="uu"></ul>
</div>
<script>
function xx (data) {
console.log(data);//看看传回来的数据形式
ul.innerHTML='';
var arr = data.s;//发现s属性是传回来的数据
var df = document.createDocumentFragment();//创建文档碎片
if(!data || !arr) {
ul.style.display = 'none';
}else {
ul.style.display = 'block';
arr.forEach(function (keyCode){//遍历元素, 及插入节点
var oLi = document.createElement('li');
var oA = document.createElement('a');
oA.setAttribute('href', 'https://www.baidu.com/s?wd=' + keyCode);
oA.innerText = keyCode;
oLi.appendChild(oA);
df.appendChild(oLi);
})
ul.appendChild(df);
}
}
var ul = document.getElementById('uu');
var input = document.getElementById('inp');
input.onkeyup = function (){
if(input.value == '') {
ul.style.display = 'none';
}else{
var oScript = document.createElement('script');//通过script标签获取数据
oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + input.value + '&cb=xx';
document.body.appendChild(oScript);
oScript.remove();//获取完数据将标签删除
}
}
</script>
<!-- <script src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=beio&cb=xx'></script> -->
</body>
</html>
越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!