Jsonp原理：?
首先在客戶端注冊一個callback, 然后把callback的名字傳給服務(wù)器。
此時，服務(wù)器先生成 json 數(shù)據(jù)。
然后以 javascript 語法的方式，生成一個function , function 名字就是傳遞上來的參數(shù) jsonp.
最后將 json 數(shù)據(jù)直接以入?yún)⒌姆绞?，放置?function 中，這樣就生成了一段 js 語法的文檔，返回給客戶端。
客戶端瀏覽器，解析script標(biāo)簽，并執(zhí)行返回的 javascript 文檔，此時數(shù)據(jù)作為參數(shù)，傳入到了客戶端預(yù)先定義好的 callback 函數(shù)里.（動態(tài)執(zhí)行回調(diào)函數(shù)）
而目前實現(xiàn)jsonp跨域方法最簡便是使用jq封裝的.
一句話：主要是利用了script標(biāo)簽可以跨域鏈接資源的特性，缺點是：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.#/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.#/suggest?encodein=utf-8&encodeout=utf-8&format=json&fields=word',//請求360搜索的公開接口
type: 'get',
dataType: 'jsonp',//跨域請求
data: {word: val},//攜帶參數(shù)
jsonpCallback:'suggest_so'//指定360提供的jsonp的回調(diào)函數(shù)
})
.done(function(data) {
console.log(data);
// alert(data.result.length);//10條數(shù)據(jù)
$('.list').empty();//先清空列表
//模擬搜索聯(lián)想，循環(huán)插入新列表
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");
// 狀態(tài)碼
? ? ? ? ? ? console.log(XMLHttpRequest.status);
? ? ? ? ? ? // 狀態(tài)
? ? ? ? ? ? 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);
? ? ? ? ? ? /*彈出其他兩個參數(shù)的信息*/
? ? ? ? ? ? console.log(textStatus);
? ? ? ? ? ? console.log(errorThrown);
});
});
})
</script>
</head>
<body>
<input type="text" id="txt01">
<ul class="list"></ul>
</body>
</html>
