jquery下的ajax和jsonp實現與區別
json和jsonp和ajax的實質和區別
ajax的兩個問題
1.ajax以何種格式來交換數據
2.跨域的需求如何解決
數據跨域用自定義字符串或者用XML來描述
跨域可以用服務器代理來解決
jsonp來跨域
json是一種數據交換格式 “暗號” 描述信息格式
jsonp是非官方跨域數據交互協議 “接頭方式” 信息傳遞雙方約定的方法
json是基於文本的數據交換方式或者數據描述格式
json的優點
1.基於純文本，跨平臺傳遞極其簡單；
2.javascript原生支持，後臺語言幾乎全部支持
3.輕量級數據格式，占用字符數量極小，特別適合互聯網傳遞
4.可讀性比較強，不必xml那麽一目了然但在合理的依次縮進之後還是很容易識別的
5.容易編寫和解析，當然前提是知道數據結構
json的格式或者規則
json以非常簡單的方式來描述數據結構 xml能做的它都能做
1.json的數據兩種數據類型 大括號{}和方括號[] 其余英文冒號,是分隔符 冒號:是映射符 英文雙引號""是定義符
2.{}是描述一組 不同類型的無序鍵值對集合 每個鍵值對理解為OOP的屬性描述
[]是描述一組 相同類型的有序數據的集合 對應OPP的數組
3.{}不同類型無序鍵值對和[]相同類型有序集合中有有多個子項，通過英文逗號分隔
4.鍵值對以英文冒號:分隔並且建議鍵名都加英文雙引號""，以便不同語言的解析
5.json內部常用數據類型是字符串(必須用雙引號引起來其他不用) 數字 布爾 日期 null
日期比較特殊？？？？？？
jsonp的產生原因
1.Ajax直接請求普通文件存在跨域無權限訪問的問題（靜態頁、動態頁、web服務、wcf只要是跨域請求一律不準）
2.web的頁面上調用js文件是不受跨域的影響（凡擁有src屬性的標簽都擁有跨域能力script img iframe）
3.可以判斷 現在想通過純web端(ActiveX控件、服務端代理、H5之Websocket等方式不算)跨域訪問數據就只有一種可能，就是在遠程服務器上設法把數據裝進js格式的文件裏，供客戶度調用和進一步處理；
4.json的純字符數格式可以簡潔的描述復雜數據還被js原生支持
5.web客戶端通過與調用腳本一樣的方式來調用跨域服務器上動態生成的js格式文件(後綴.json)，服務器之所以要動態生成json文件目的把客戶端需要的數據裝入進去
6.客戶端在對json文件調用成功後獲得自己所需的數據剩下的就按照自己需求進行處理和展現，這種獲取遠程數據的方式非常像ajax其實並一樣
7.為了方便客戶端使用數據逐漸形成非正式傳輸協議jsonp
該協議的一個要點就是允許用戶傳遞一個callback參數給服務端，然後服務端返回數據時會將這個callback參數作為函數名來包裹住json數據 這樣客戶端就可以隨意定制自己的函數來自動處理返回數據
jquery下的ajax實現
$.ajax({
url:‘/comm/test1.php‘,
type:‘POST‘, //GET
async:true, //或false,是否異步
data:{name:‘yang‘,age:25},
timeout:5000, //超時時間
dataType:‘json‘, //返回的數據格式：json/xml/html/script/jsonp/text
success:function(data,textStatus,jqXHR){
console.log(data)
console.log(textStatus)
console.log(jqXHR)
},
error:function(xhr,textStatus){
console.log(‘錯誤‘)
console.log(xhr)
console.log(textStatus)
},
complete:function(){
console.log(‘結束‘)
}
})
jquery下的jsonp實現
$.ajax({
type: "get",
async: false,
url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
dataType: "jsonp",
jsonp: "callback",//傳遞給請求處理程序或頁面的，用以獲得jsonp回調函數名的參數名(一般默認為:callback)
jsonpCallback:"flightHandler",//自定義的jsonp回調函數名稱，默認為jQuery自動生成的隨機函數名，也可以寫"?"，jQuery會自動為你處理數據
success: function(json){
alert(‘您查詢到航班信息：票價： ‘ + json.price + ‘ 元，余票： ‘ + json.tickets + ‘ 張。‘);
},
error: function(){
alert(‘fail‘);
}
});
案例
百度自動提示：
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=ja返回數據為
window.baidu.sug({q:"j",p:false,s:["京東","京東商城","極限挑戰","軍師聯盟","jd","json","js","極限挑戰第三季","絕地求生大逃殺"]});
所以js中必須有window.baidu.sug的方法
html代碼：
<div class="div1"><input class="inp" type="text"><button>shous</button> <ul class="ul1"></ul> </div>
css代碼：
<style>
*{
margin: 0; padding: 0;
}
.div1 input{
width: 240px;
}
.div1 button{
width: 48px;
}
li{list-style: none; background: #999; margin: 2px;}
.div1{
width:300px;
margin: 50px auto;
}
</style>
效果圖如下：
需要實現效果，在輸入框輸入時根據百度自動提示
js代碼，註意
window.baidu={};
window.baidu.sug=function(data)
和
jsonp:"cd",
jsonpCallback:"window.baidu.sug"
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
//事件
$(".inp").keyup(function() {
var val=$(this).val();
var url="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+val;
searchUrl(url);
});
})
//處理數據函數，根據返回的函數名命名。
window.baidu={};
window.baidu.sug=function(data){
console.log(data.s);
$(".ul1").html("");
var data1=data.s;
for(var i=0;i<data1.length;i++){
var li=$("<li></li>").append(data1[i]);
$(".ul1").append(li);
}
}
//jsonp獲取數據
function searchUrl(url){
console.log(url);
$.ajax({
url:url,
type:"get",
dataType:"jsonp",
jsonp:"cd",
jsonpCallback:"window.baidu.sug"
})
}
</script>
效果：
jquery下的ajax和jsonp實現與區別