原生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联系在一起。
