JSONP跨域获取百度联想词的方法分析
一、JSONP原理
1、定义：JSONP（JSON with Padding）是一种利用<script>标签的src属性来绕过同源策略，从而在不同源之间传递数据的技术，它通过在请求参数中指定回调函数名，服务器接收到请求后会动态创建一个以该回调函数命名的函数，并调用它来传递数据。
2、工作原理：当用户输入内容后，会向百度发送请求，请求中包含用于处理返回数据的函数名doJson。oScript.src='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/suwd='+value+'cb=doJosn';这段代码表示当用户输入内容后，会向百度发送请求，请求中包含用于处理返回数据的函数名doJson。
二、百度联想词的实现
1、获取用户输入值：开发者首先获取用户的输入值。
2、创建新的<script>元素：然后创建一个新的<script>元素，并设置其src属性指向百度的API接口，同时附带自定义的回调函数名。oScript.src = 'http://suggestion.baidu.com/su?wd=' + value + '&cb=doJosn';。
3、触发事件监听器：当用户输入发生变化时，触发事件监听器，调用doJson函数处理服务器返回的数据。doJson函数在这里起到的作用是接收和解析服务器返回的联想词数据。function doJosn(data) { var s = data.s; var str = ''; if (s.length > 0) { s.forEach(function (item, index) { str += '<li><a href =http://suggestion.baidu.com/su?wd=' + item + '>' + item + '</a></li>'; }) oUl.innerHTML = str; oUl.style.display = 'block'; } else { oUl.style.display = 'none'; } }。
三、回调函数的作用
1、预定义函数：回调函数doJson实际上是一个预定义好的函数，其作用是接收来自服务器的JSON数据，并对其进行解析和处理，在这个例子中，它会检查数据的s属性（假设为联想词列表），然后构建HTML列表项插入到页面上。
四、安全性与局限性
1、安全性问题：JSONP虽然能解决跨域问题，但它是基于全局作用域的，因此只能处理GET请求，并且存在安全风险，因为服务器可以直接执行客户端的回调函数，对于更复杂的数据交互或POST请求，可能需要其他方法，如CORS或代理服务器。
2、局限性：JSONP只能用于GET请求，不能用于POST请求，由于JSONP依赖于回调函数，在处理复杂的请求时，可能会导致代码难以维护和调试。
五、实例代码
以下是一个简单的示例代码，演示了如何使用JSONP技术在Web应用中实现跨域获取百度联想词：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<meta httpequiv="XUACompatible" content="ie=edge">
<style>
.wra {
margin: 50px 0 0 100px;
}
input {
width: 440px;
height: 30px;
}
ul {
display: none;
width: 440px;
border: 1px solid #ccc;
}
ul li {
width: 522px;
color: #000;
font: 14px arial;
lineheight: 22px;
padding: 0 8px;
position: relative;
cursor: default;
}
</style>
</head>
<body>
<div class="wra">
<input type="text" id="searchInput" placeholder="请输入关键词...">
<ul id="suggestions"></ul>
</div>
<script>
var oInput = document.getElementById('searchInput');
var oUl = document.getElementById('suggestions');
oInput.oninput = function () { //监听 input 事件，每次触发，我们就发利用 script标签的 src 发送请求
var oScript = document.createElement('script');
oScript.src = 'https://www.baidu.com/sugrec?&prod=pc&wd=' + this.value + '&cb=Exhibition'; //拿到百度接口链接，删除对我们无用的参数。
document.body.appendChild(oScript);
oScript.remove(); // 每次发送完数据后，把 script标签给删除，不然每发送一次，就创建一个标签，等下页面会有很多 script标签
};
window.Exhibition = function (data) {
var g = data.g;
var str = '';
if (g) {
oUl.style.display = 'block';
g.forEach(function (ele, index) {
str += '<li>' + ele.q + '</li>'; //拿到数据 遍历它，然后添加到 li标签
});
oUl.innerHTML = str;
} else {
oUl.style.display = 'none';
}
};
</script>
</body>
</html>
六、相关问题与解答
问题1：JSONP为什么能够实现跨域请求？
答：JSONP能够实现跨域请求是因为浏览器允许<script>标签从不同的域名加载脚本，通过在URL中指定回调函数名，服务器返回的数据会被封装在一个JavaScript函数中，这个函数名就是URL中的回调函数名，当浏览器加载并执行这个脚本时，就会调用这个函数，从而将数据传递给前端，由于这个过程没有违反同源策略（因为浏览器认为这只是加载了一个外部脚本），所以可以实现跨域请求。
问题2：使用JSONP有哪些安全隐患？如何避免这些隐患？
答：JSONP的主要安全隐患在于它允许外部网站执行任意的JavaScript代码，如果攻击者控制了响应的内容，他们可以注入恶意代码到你的网页中，为了避免这种风险，应该只从可信的来源加载JSONP数据，还可以通过以下方式减少风险：
使用随机生成的回调函数名，并在请求完成后立即删除该函数。
限制JSONP的使用场景，只在确实需要跨域请求且无法使用其他更安全的方法（如CORS）时才使用。
对从外部来源加载的所有数据进行严格的验证和消毒，以防止XSS攻击。
各位小伙伴们，我刚刚为大家分享了有关“jsonp跨域获取百度联想词的方法分析”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！
