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
日期比較特殊？？？？？？
1 var person = { //一個人的描述 2 "name":"Bob", 3 "Age":32, 4 "Company":"IBM", 5 "Engineer":true 6 } 7 var personAge = person.Age; 8 var conference = { //描述一次會議 9 "Conference": "Future Marketing", 10 "Date": "2012-6-1", 11 "Address": "Beijing", 12 "Members": 13 [ 14 { 15 "Name": "Bob", 16 "Age": 32, 17 "Company": "IBM", 18 "Engineer": true 19 }, 20 { 21 "Name": "John", 22 "Age": 20, 23 "Company": "Oracle", 24 "Engineer": false 25 }, 26 { 27 "Name": "Henry", 28 "Age": 45, 29 "Company": "Microsoft", 30 "Engineer": false 31 } 32 ] 33 } 34 var henryIsAnEngineer = conference.Members[2].Engineer;// 讀取參會者Henry是否工程師
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數據 這樣客戶端就可以隨意定制自己的函數來自動處理返回數據
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <script> 8 var flightHandler = function (data) { 9 alert('您查到的信息：票價' + data.price + '元，余票' + data.tickets + '張。'); 10 }; 11 var url = "https://www.baidu.com/jsonp/flightResult.aspx?code=1991&callback=flightHandler"; 12 var script = document.createElement('script'); 13 script.setAttribute('scr',url); 14 document.getElementsByTagName('head')[0].appendChild(script); 15 16 </script> 17 </body> 18 </html>
jsonp.html
1 flightHandler({ 2 "code":"1991", 3 "price":1991, 4 "tickets":5 5 });
jQuery如何實現jsonp調用
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>123</title> 5 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 6 <script> 7 $(document).ready(function () { 8 $.ajax({ 9 type: "get", 10 async: false, 11 url: "https://www.baidu.com/jsonp/flightResult.aspx?code=1991&callback=flightHandler", 12 dataType: "jsonp", 13 jsonp: "callback",//傳遞給請求處理程序或頁面的，用以獲得jsonp回調函數名的參數名(一般默認為:callback) 14 jsonpCallback: "flightHandler",//自定義的jsonp回調函數名稱，默認為jQuery自動生成的隨機函數名，也可以寫"?"，jQuery會自動為你處理數據 15 success: function(json) { 16 alert('您查詢到航班信息：票價： ' + json.price + ' 元，余票： ' + json.tickets + ' 張。'); 17 }, 18 error: function() { 19 alert("123456"); 20 } 21 22 }); 23 }); 24 </script> 25 </head> 26 <body> 27 </body> 28 </html>
ajax和jsonp的實質核心、區別聯系
1.ajax和jsonp的調用方式很像，目的一樣，都是請求url，然后把服務器返回的數據進行處理，因此jquery和ext等框架都把jsonp作為ajax的一種形式進行了封裝；
2.實質不同
ajax的核心是通過xmlHttpRequest獲取非本頁內容
jsonp的核心是動態添加script標簽調用服務器提供的js腳本
3.區別聯系
不在於是否跨域
ajax通過服務端代理一樣跨域
jsonp也不並不排斥同域的數據的獲取
4.jsonp是一種方式或者說非強制性的協議
ajax也不一定非要用json格式來傳遞數據