JSONP（JSON with Padding）是一种跨域数据交互协议，它利用了`<script>`标签不受同源策略限制的特性来实现跨域数据访问。在Web开发中，由于浏览器的安全策略，通常JavaScript只能访问同源（协议、域名、端口相同）的资源，但JSONP提供了一种绕过这一限制的方法，尤其适用于向其他域名的服务请求数据，如在本例中获取百度的搜索联想词。
我们理解JSONP的基本原理：
1. **动态创建`<script>`标签**：JavaScript可以通过创建一个新的`<script>`元素并设置其`src`属性来加载外部脚本，这个过程不会受到同源策略的限制，即使脚本源与当前页面不在同一域名下。
2. **指定回调函数**：在请求的URL中，我们通常会包含一个名为`callback`的参数，其值是我们预先定义好的回调函数名。例如，在本例中，我们使用`cb=doJson`。
3. **服务器端响应**：服务器接收到请求后，会将返回的数据包裹在指定的回调函数中，形成一个合法的JavaScript语句，如`doJson({"s": ["联想词1", "联想词2"]})`。这样，当浏览器执行这个`<script>`标签加载的脚本时，实际上就是在执行我们定义的回调函数，从而处理返回的数据。
接下来，我们将详细探讨如何利用JSONP获取百度的联想词：
```html
<input type="text" />
<ul id="search-results"></ul>
```
在HTML中，我们有一个输入框和一个用于显示搜索结果的`<ul>`列表。当用户在输入框中输入文字时，我们需要获取百度的联想词并展示在列表中。
```javascript
var oInp = document.getElementsByTagName('input')[0];
var oUl = document.getElementById('search-results');
// 监听输入框的oninput事件
oInp.oninput = function() {
var value = this.value;
// 创建新的<script>标签
var oScript = document.createElement('script');
// 设置src属性，包含输入值和回调函数名
oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + value + '&cb=doJosn';
// 将<script>标签添加到文档中
document.body.appendChild(oScript);
};
// 定义回调函数doJosn
function doJosn(data) {
var s = data.s;
var str = '';
if (s.length > 0) {
s.forEach(function(ele, index) {
str += '<li><a href="https://sp0.baidu.com/s?wd=' + ele + '">' + ele + '</a></li>';
});
oUl.innerHTML = str;
oUl.style.display = 'block';
} else {
oUl.style.display = 'none';
}
}
```
在这个示例中，`oInp.oninput`监听输入框的输入事件。每当用户输入文字，都会创建一个新的`<script>`标签，其`src`指向百度提供的JSONP接口，同时带上输入值`wd`和回调函数名`cb`。浏览器加载这个脚本时，百度服务器会返回一个包裹在`doJosn`函数中的JSON对象，其中包含联想词列表。回调函数`doJosn`接收到数据后，解析并格式化结果，更新`<ul>`列表，展示搜索联想词。
需要注意的是，JSONP只适用于GET请求，因为它依赖于动态插入`<script>`标签。对于POST或其他HTTP方法，我们需要使用CORS（跨源资源共享）或者其他技术。此外，JSONP没有错误处理机制，如果服务器返回的数据格式不正确或服务器不存在，JavaScript代码可能会出现意外的错误，这是JSONP的一个局限性。
JSONP是Web开发中一种常见的跨域解决方案，它允许我们获取并处理不同源的数据，如在本例中获取百度的搜索联想词。虽然它有局限性，但在某些场景下，尤其是在处理简单的数据请求时，仍然是一个实用的选择。然而，随着CORS等更安全的跨域策略的普及，JSONP的使用逐渐减少，但它仍然在一些旧项目或对兼容性有要求的场景中发挥作用。
