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

一、什么是跨域访问

跨域访问就是跨域名访问，即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联系在一起。

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

相关推荐