欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

跨域解决方案之JSONP,通过借助调用百度搜索的API了解跨域案例

程序员文章站 2022-07-05 10:43:54
跨域解决方案之JSONP 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。 同源策略,它是由Netscape提出 ......

跨域解决方案之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';
        }
    }