jsonp跨域获取百度联想词的方法分析

这里是“jsonp跨域获取百度联想词的方法分析”的完整攻略。

这里是“jsonp跨域获取百度联想词的方法分析”的完整攻略。

什么是jsonp跨域？

因为同源策略的限制，浏览器不能直接访问非同源的资源。但是某些情况下我们需要跨域请求数据。jsonp跨域是一种能够解决这个问题的方法。

jsonp跨域的原理是利用script标签不受同源策略的限制的特性，以动态创建script标签来访问非同源数据。网站请求一个跨域的JS或JSONP资源，将要请求的回调函数名字写到url的查询字符串中，非同源的服务器返回一个JavaScript脚本或JSONP，并且在响应头中设置回调函数名为预期的函数名称。然后浏览器会把这个脚本或JSONP载入到DOM中，此时执行载入的脚本会直接调用请求url中指定的回调函数，然后将服务器返回的数据作为参数传递给回调函数。

JSONP基于script标签，因此必须是get请求。

如何使用JSONP获取百度联想词？

以获取百度搜索联想词为例：

var input = document.getElementById("input");
input.addEventListener("input", function() {
    var value = input.value.trim();
    if (value === "") {
        return;
    }
    var script = document.createElement("script");
    script.src = "https://www.baidu.com/su?wd=" + encodeURIComponent(value) + "&cb=callback";
    document.head.appendChild(script);
});
function callback(response) {
    console.log(response.s);
}

上述代码中，我们首先获取输入框中的文本，然后根据这个文本创建一个script标签，添加到页面head里。我们把想要查询的值作为url的查询字符串传递给远程服务器，并在url中指定回调函数的名字为“callback”。服务器返回JSONP，其中包含了“callback(response)”这个回调函数，浏览器把这个函数载入到DOM中并执行。这样就可以通过回调函数获取到联想词了。

接下来我们再看一个例子。

比如这里有一个不支持CORS的Api地址：https://api.apiopen.top/getJoke?page=1&count=2&type=video。

我们可以通过JSONP获取到这个Api的数据：

function getJoke(response) {
    console.log(response.result);
}
var script = document.createElement("script");
script.src = "https://api.apiopen.top/getJoke?page=1&count=2&type=video&callback=getJoke";
document.head.appendChild(script);

这段代码中，我们同样动态创建script标签，并指定url包含了想要获取的Api地址和回调函数名称。注意：这里的回调函数名称必须和前端定义的函数名称一致。需要注意的是，当访问的Api返回的不是JSONP格式的数据时，依然会遵循同源策略，jsonp无法有效获取需要的数据。

以上是JSONP跨域获取百度联想词的方法分析，希望能对你有所帮助。