Jsonp --- 利用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做一个百度搜索框
完成效果:

这里写图片描述