1.json與jsonp的引入

在ajax中 JSON用來(lái)解決數(shù)據(jù)交換問(wèn)題,而JSONP來(lái)實(shí)現(xiàn)跨域。

備注：跨域也可以通過(guò)服務(wù)器端代理來(lái)解決;

理解：JSON是一種數(shù)據(jù)交換格式，而JSONP是一種依靠開(kāi)發(fā)人員的聰明才智創(chuàng)造出的一種非官方跨域數(shù)據(jù)交互協(xié)議。

2.JSON：是一種基于文本的數(shù)據(jù)交換方式，或者叫做數(shù)據(jù)描述格式，是否該選用它首先肯定要關(guān)注它所擁有的優(yōu)點(diǎn)。

JSON的優(yōu)點(diǎn)：

• 1) 基于純文本，跨平臺(tái)傳遞極其簡(jiǎn)單；
• 2) Javascript原生支持，后臺(tái)語(yǔ)言幾乎全部支持；
• 3) 輕量級(jí)數(shù)據(jù)格式，占用字符數(shù)量極少，特別適合互聯(lián)網(wǎng)傳遞；
• 4) 可讀性較強(qiáng)，雖然比不上XML那么一目了然，但在合理的依次縮進(jìn)之后還是很容易識(shí)別的；
• 5) 容易編寫(xiě)和解析，當(dāng)然前提是你要知道數(shù)據(jù)結(jié)構(gòu)；

JSON的格式或者叫規(guī)則：

JSON能夠以非常簡(jiǎn)單的方式來(lái)描述數(shù)據(jù)結(jié)構(gòu)，XML能做的它都能做，因此在跨平臺(tái)方面兩者完全不分伯仲。

• 1) JSON只有兩種數(shù)據(jù)類型描述符，大括號(hào){}和方括號(hào)[]，其余英文冒號(hào):是映射符，英文逗號(hào),是分隔符，英文雙引號(hào)""是定義符。
• 2) 大括號(hào){}用來(lái)描述一組“不同類型的無(wú)序鍵值對(duì)集合”（每個(gè)鍵值對(duì)可以理解為OOP的屬性描述），方括號(hào)[]用來(lái)描述一組“相同類型的有序數(shù)據(jù)集合”（可對(duì)應(yīng)OOP的數(shù)組）。
• 3) 上述兩種集合中若有多個(gè)子項(xiàng)，則通過(guò)英文逗號(hào),進(jìn)行分隔。
• 4) 鍵值對(duì)以英文冒號(hào):進(jìn)行分隔，并且建議鍵名都加上英文雙引號(hào)""，以便于不同語(yǔ)言的解析。
• 5) JSON內(nèi)部常用數(shù)據(jù)類型無(wú)非就是字符串、數(shù)字、布爾、日期、null 這么幾個(gè)，字符串必須用雙引號(hào)引起來(lái)，其余的都不用，日期類型比較特殊，這里就不展開(kāi)講述了，

只是建議如果客戶端沒(méi)有按日期排序功能需求的話，那么把日期時(shí)間直接作為字符串傳遞就好，可以省去很多麻煩。

示列1：{} 用來(lái)描述一組“不同類型的無(wú)序鍵值對(duì)集合”
    var person = {
      "Name": "Bob",
      "Age": 32,
      "Company": "IBM",
      "Engineer": true
    }
  示列2：[] 用來(lái)描述一組“相同類型的有序數(shù)據(jù)集合”
    var members = [
      {
        "Name": "Bob",
        "Age": 32,
        "Company": "IBM",
        "Engineer": true
      },
      {
        "Name": "John",
        "Age": 20,
        "Company": "Oracle",
        "Engineer": false
      },
      {
        "Name": "Henry",
        "Age": 45,
        "Company": "Microsoft",
        "Engineer": false
      }
    ]
    //讀取其中John的公司名稱
    var johnsCompany = members[1].Company;
  
  示列3：{}中包含的[]使用
    var conference = {
      "Conference": "Future Marketing",
      "Date": "2012-6-1",
      "Address": "Beijing",
      "Members":
      [
        {
          "Name": "Bob",
          "Age": 32,
          "Company": "IBM",
          "Engineer": true
        },
        {
          "Name": "John",
          "Age": 20,
          "Company": "Oracle",
          "Engineer": false
        },
        {
          "Name": "Henry",
          "Age": 45,
          "Company": "Microsoft",
          "Engineer": false
        }
      ]
    }
  
    // 讀取參會(huì)者Henry是否工程師
    var henryIsAnEngineer = conference.Members[2].Engineer;

3.什么是JSONP

JSONP(JSON with Padding)是資料格式 JSON 的一種“使用模式”，可以讓網(wǎng)頁(yè)從別的網(wǎng)域要資料。由于同源策略，一般來(lái)說(shuō)位于 server1.example.com 的網(wǎng)頁(yè)無(wú)法與不是 server1.example.com的服務(wù)器溝通，而 HTML 的 <script> 元素是一個(gè)例外。利用<script> 元素的這個(gè)開(kāi)放策略，網(wǎng)頁(yè)可以得到從其他來(lái)源動(dòng)態(tài)產(chǎn)生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料并不是 JSON，而是任意的 JavaScript，用 JavaScript 直譯器執(zhí)行而不是用 JSON 解析器解析。

3.1 JSOPN跨域的原理：script標(biāo)簽的src屬性，支持跨域；它的基本思想是，網(wǎng)頁(yè)通過(guò)添加一個(gè)<script>元素，向服務(wù)器請(qǐng)求JSON數(shù)據(jù)，這種做法不受同源政策限制；服務(wù)器收到請(qǐng)求后，將數(shù)據(jù)放在一個(gè)指定名字的回調(diào)函數(shù)里傳回來(lái)。

3.2 JSOP包含兩部分：回調(diào)函數(shù)和數(shù)據(jù)，回調(diào)函數(shù)是在響應(yīng)到來(lái)時(shí)應(yīng)該調(diào)用的函數(shù)，一般通過(guò)查詢字符串添加; 數(shù)據(jù)就是傳入回調(diào)函數(shù)中的JSON數(shù)據(jù)，確切的說(shuō)，是一個(gè)JSON對(duì)象，可以直接訪問(wèn)。

3.3 JSONP的缺點(diǎn):

1) 只能實(shí)現(xiàn)GET，沒(méi)有POST；

2) 從其他域中加載的代碼可能不安全；難以確定JSONP請(qǐng)求是否失?。╔HR有error事件），常見(jiàn)做法是使用定時(shí)器指定響應(yīng)的允許時(shí)間，超出時(shí)間認(rèn)為響應(yīng)失敗。

為了方便客戶端使用數(shù)據(jù)逐漸形成非正式傳輸協(xié)議jsonp該協(xié)議的一個(gè)要點(diǎn)就是允許用戶傳遞一個(gè)callback參數(shù)給服務(wù)端，然后服務(wù)端返回?cái)?shù)據(jù)時(shí)會(huì)將這個(gè)callback參數(shù)作為函數(shù)名來(lái)包裹住json數(shù)據(jù) 這樣客戶端就可以隨意定制自己的函數(shù)來(lái)自動(dòng)處理返回?cái)?shù)據(jù)

示列：

function ajaxFun(){
      var strUrl="http://www.b.com/demo/json.txt";
       $.ajax({
        type:"get",
        url:strUrl,
        dataType: 'jsonp',
        jsonp: "callback",//傳遞給請(qǐng)求處理程序或頁(yè)面的，用以獲得jsonp回調(diào)函數(shù)名的參數(shù)名(一般默認(rèn)為:callback)
        jsonpCallback: "flightHandler",//自定義的jsonp回調(diào)函數(shù)名稱，默認(rèn)為jQuery自動(dòng)生成的隨機(jī)函數(shù)名，也可以寫(xiě)"?"，jQuery會(huì)自動(dòng)為你處理數(shù)據(jù)
        success: function(data){
          alert('您查到的信息：票價(jià)' + data.price + '元，余-票' + data.tickets + '張。');
        },
        error: function(XMLHttpRequest,textStatus,errorThrown){
          alert("error");
          // 狀態(tài)碼
          console.log(XMLHttpRequest.status);
          // 狀態(tài)
          console.log(XMLHttpRequest.readyState);
          // 錯(cuò)誤信息  
          console.log(textStatus);
         }
      });
    }

備注：

其中 sucess中的代碼片段也可以不寫(xiě)，可以單獨(dú)建立一個(gè)回調(diào)函數(shù)來(lái)調(diào)用返回的數(shù)據(jù)。如下一樣可以獲得數(shù)據(jù)。

var flightHandler = function (data) {
alert('您查到的信息：票價(jià)' + data.price + '元，余票' + data.tickets + '張。');
};

需要注意的是，ajax跨域請(qǐng)求(jsonp)中,服務(wù)端返回?cái)?shù)據(jù)格式必須是:flightHandler({ "price":"120","tickets":"20"});如果直接這樣的json格式{ "price":"120","tickets":"20"}，將會(huì)報(bào)parser error的錯(cuò)誤.請(qǐng)注意這個(gè)函數(shù)最后的分號(hào)";",必須加上,否則,如果同一個(gè)頁(yè)面有多個(gè)ajax請(qǐng)求, 并且在數(shù)據(jù)沒(méi)有返回時(shí),再發(fā)出其它ajax請(qǐng)求時(shí),有可能出現(xiàn)parsererror出錯(cuò)提示.這種錯(cuò)誤很隱敝,在開(kāi)發(fā)時(shí),不容易發(fā)現(xiàn),在并發(fā)測(cè)試時(shí),就很容易暴露出.

服務(wù)端代碼示列：

public String jsonReturn(HttpServletResponse response, String callback, Map<String, Object> jsonMap) {
    if (org.apache.commons.lang.StringUtils.isEmpty(callback)) {
      return appAjaxJson(response, getJson(jsonMap));
    }
    return appAjaxJson(response, callback + "(" + getJson(jsonMap) + ")");
  }

  public String appAjaxJson(HttpServletResponse response, String jsonString) {
    return appAjax(response, jsonString, "text/html");
  }

  public String appAjax(HttpServletResponse response, String content, String type) {
    try {
      response.setContentType(type + ";charset=UTF-8");
      response.setHeader("Access-Control-Allow-Origin", "*");//表示支持跨域請(qǐng)求
      // 如果IE瀏覽器則設(shè)置頭信息如下
      if ("IE".equals(type)) {
        response.addHeader("XDomainRequestAllowed", "1");
      }
      response.setHeader("Pragma", "No-cache");
      response.setHeader("Cache-Control", "no-cache");
      response.setDateHeader("Expires", 0);
      response.getWriter().write(content);
      response.getWriter().flush();
    } catch (IOException e) {
      this.logException(e);
    }
    return null;
  }

4、JSON.stringify()、JSON.parse()、toString()

4.1 JSON.stringify()：將入?yún)?JavaScript值)轉(zhuǎn)換為 JSON 字符串;

示列1：
  let arr = [1,2,3];
  JSON.stringify(arr);//"[1,2,3]"
  typeof JSON.stringify(arr);//"string"

  示例2：
  //判斷數(shù)組是否包含某對(duì)象
  let data = [
    {name:'echo'},
    {name:'聽(tīng)風(fēng)是風(fēng)'},
    {name:'天子笑'},
    ],
    val = {name:'天子笑'};
  JSON.stringify(data).indexOf(JSON.stringify(val)) !== -1;//true

  //判斷兩數(shù)組/對(duì)象是否相等
  let a = [1,2,3],
    b = [1,2,3];
  JSON.stringify(a) === JSON.stringify(b);//true

4.2 JSON.parse()：將JSON字符串轉(zhuǎn)為一個(gè)對(duì)象;

示列：

let string = '[1,2,3]';
console.log(JSON.parse(string))//[1,2,3]
console.log(typeof JSON.parse(string))//object

4.3 JSON.stringify()與 toString()的區(qū)別

let arr = [1,2,3];
JSON.stringify(arr);//'[1,2,3]'
arr.toString();//1,2,3

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論