Jsonp原理：
首先在客户端注册一个callback, 然后把callback的名字传给服务器。
此时，服务器先生成 json 数据。
然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.
最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。
客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）
而目前实现jsonp跨域方法最简便是使用jq封装的.
一句话：主要是利用了script标签可以跨域链接资源的特性，缺点是：jsonp只能解决get方式的跨域.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonp公开接口</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
//360搜索的公开接口
//https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&fields=word&word=s
$(function(){
$('#txt01').keyup(function() {
var val = $(this).val();
$.ajax({
url: 'https://sug.so.360.cn/suggest?encodein=utf-8&encodeout=utf-8&format=json&fields=word',//请求360搜索的公开接口
type: 'get',
dataType: 'jsonp',//跨域请求
data: {word: val},//携带参数
jsonpCallback:'suggest_so'//指定360提供的jsonp的回调函数
})
.done(function(data) {
console.log(data);
// alert(data.result.length);//10条数据
$('.list').empty();//先清空列表
//模拟搜索联想，循环插入新列表
for(var i=0; i<data.result.length; i++){
var $li = $('<li>'+data.result[i].word+'</li>');
$li.appendTo('.list');
}
})
/*.fail(function(XMLHttpRequest, textStatus, errorThrown) {//失败
console.log("error");
// 状态码
console.log(XMLHttpRequest.status);
// 状态
console.log(XMLHttpRequest.readyState);
// 错误信息
console.log(textStatus);
});*/
.fail(function(jqXHR, textStatus, errorThrown) {//失败
console.log("error");
/*弹出jqXHR对象的信息*/
console.log(jqXHR.responseText);
console.log(jqXHR.status);
console.log(jqXHR.readyState);
console.log(jqXHR.statusText);
/*弹出其他两个参数的信息*/
console.log(textStatus);
console.log(errorThrown);
});
});
})
</script>
</head>
<body>
<input type="text" id="txt01">
<ul class="list"></ul>
</body>
</html>
网友评论