原生JS的面试题：jsonp的实现原理

今天药忘吃喽~ 2022-04-08 11:15 287阅读 0赞

一、**什么是跨域访问**

**跨域访问就是跨域名访问，即A网站的网页在代码上访问了B网站的页面**

**由于同源策略（浏览器的安全机制），所以，AJAX不能实现跨域访问**

**     同源策略：JavaScript或Cookie只能访问同域名下的内容**

**                   同样的协议，同样的地址，同样的端口。**

二、jsonp

JSONP（JSON with Padding）可用于解决主流浏览器的跨域数据访问的问题**）。**跟JSON没有关系。

JSONP是如何实现跨域访问的？**本质上是利用HTML元素的****src属性**都可以跨域的思路来解决的。

如：img，script，iframe等标记的src属性的值都可以赋成其它域名的合法地址。

三、jsonp的代码：

let scriptDom = document.createElement("script");  
scriptDom.src="请求地址?callback=函数名";  
document.body.appendChild(scriptDom);

四、获取淘宝的搜索关键字

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>百度跨域获取数据</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            ul {
                list-style: none;
            }
            #logo {
                margin: 30px auto;
                display: block;
                width:280px;
            }
            form[name="search-form"] {
                display: block;
                margin: 10px auto 0;
                width: 600px;
                font-size: 0;
            }
            input[name="search-content"] {
                width: 500px;
                height: 40px;
                padding: 0 10px;
                border: 1px solid #ccc;
                outline: none;
                box-sizing: border-box;
                vertical-align: bottom;
            }
            input[name="search-content"]:focus {
                border-color: #3385ff;
            }
             input[type="submit"] {
                width: 100px;
                height: 40px;
                border: none;
                outline: none;
                color: #fff;
                background: #3385ff;
            }
            #search-list {
                margin: 0 auto;
                width: 600px;
            }
            #search-list li {
                padding: 0 10px;
                line-height: 30px;
                background: #eee;
                border-bottom: 1px dashed #ccc;
            }
        </style>
    </head>
    <body>
        <img src="logo.png" id="logo">
        <form action="javascript:;" name="search-form">
            <input type="text" name="search-content">
            <input type="submit" value="百度一下">
        </form>
        <ul id="search-list">
    		
    	</ul>
        <script>
            var oSearchList = document.getElementById('search-list');
            var oSearchForm = document.forms['search-form'];
            var oSearchContent = oSearchForm.elements['search-content'];
    
            oSearchContent.oninput = function () {
                var sVal = this.value;
                oSearchList.innerHTML = '';
                if(sVal !== '') {
                    var oScript = document.createElement('script');
                    oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + sVal + '&json=1&p=3&sid=1438_24869_21080_18560_17001_25177_22160&req=2&bs=1%2B&pbs=1%2B&csor=2&pwd=1%3D&cb=callback&_=1511334117083';
                    document.body.appendChild(oScript);
                }
            };
    		
            // 声明回调函数
            function callback(data) {
    			console.log(data);
                data.s.forEach((v) => {
                    var oLi = document.createElement('li');
                    oLi.innerHTML = v;
                    oSearchList.appendChild(oLi);
                });
            }
        </script>
    </body>
    </html>

四、面试题：请问jsonp是不是ajax中实现跨域访问的技术

答：jsonp不是AJAX中实现跨域访问的技术

因为：

1、jsonp没有使用XMLHttpRequest对象。

2、jsonp只是在一种跨域的技巧。

3、jsonp只支持Get方式

五、面试题：jsonp和json的区别？

1、jsonp和json根本就没有关系

2、jsonp是跨域访问的技巧

3、json是描述数据的格式

由于按照jsonp的这种方式跨域访问时，好像可以利用javascript和服务器端交互，能达到AJAX中XMLHttpRequest对象同样的效果。所以，人们总是把

jsonp和AJAX联系在一起。