跨境电商那个网站做饰品比较好/怎么成为百度推广代理商

跨域解决方案之JSONP

同源策略

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

同源策略，它是由Netscape提出的一个著名的安全策略。

现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。

例如：

http://www.baidu.com 和 http://www.baidu.com:8080 二者是不同源的。
http://www.baidu.com和https://www.baidu.com 同样是不同源的。

当请求不同源的数据的时候，浏览器就会在控制台报出一个异常，并且提示拒绝访问。同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。

JSONP介绍

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

JSONP之百度小案例

主要借助百度搜索的API，调用时会存在跨域问题，需要通过JSONP来解决这个问题:

http://suggestion.baidu.com/su

想要使用这个接口需要设置两个参数：

wd  要搜索的内容
cb  回调函数

• 我们首先在页面当中实现一个输入框：

 <input type="search" name='p' id="p" placeholder="请输入搜索内容"><button id="btn">点击搜索</button><ul id="list"><!-- <li></li><li></li><li></li><li></li><li></li><li></li> --></ul>

• 下面是js代码:

let lis = document.getElementById('list');let p = document.getElementById('p');//callback回调函数 为了直观的把后台数据显示到网页中function fn(data) {let html = '';for (let i = 0; i < data.s.length; i++) {html += `<li><a href="http://www.baidu.com/s?wd=${data.s[i]}">${data.s[i]}</a></li>`;// html += `<li><a href="http://www.baidu.com/s?wd=${data.s[i]}">${data.s[i]}</a></li>`;}lis.innerHTML = html;}//获取按钮let btn = document.getElementById('btn');btn.onclick = function() {let info = p.value;// console.log(info);let url = "http://www.baidu.com/s?wd=" + info;window.location.assign(url);}//获取搜索框p.onkeyup = function() {lis.style.display = 'block';if (this.value !== "") {let script = document.createElement('script');script.src = "http://suggestion.baidu.com/su?wd=" + this.value + "&cb=fn";document.body.appendChild(script);} else {lis.style.display = 'none';}}

如果有想学习web前端的程序员，加VX：TZ07900, 免费送web前端视频教程噢