腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

全面解析Ajax和jsonp使用總結(jié)

更新時(shí)間：2017年10月15日 09:49:04 作者：天宇之游

這篇文章主要介紹了全面解析Ajax和jsonp使用總結(jié) 的相關(guān)資料,需要的朋友可以參考下

前言：ajax和jsonp可以與后臺(tái)通信，獲取數(shù)據(jù)和信息，但是又不用刷新整個(gè)頁(yè)面，實(shí)現(xiàn)頁(yè)面的局部刷新。

一、ajax

•定義：一種發(fā)送http請(qǐng)求與后臺(tái)進(jìn)行異步通訊的技術(shù)。

•原理：實(shí)例化xmlhttp對(duì)象，使用此對(duì)象與后臺(tái)通信。

ajax的同源策略：

•ajax請(qǐng)求的頁(yè)面或資源只能是同一個(gè)域下面的資源，不能是其他域的資源，這是在設(shè)計(jì)ajax時(shí)基于安全考慮。

--------------------------------------------------------------------------------

ajax的方法：

1. $.ajax({}):

•常用參數(shù)： •url：請(qǐng)求網(wǎng)絡(luò)地址
•type：請(qǐng)求方式，默認(rèn)是'GET'，常用'POST'
•dataType：設(shè)置返回的數(shù)據(jù)格式，一般使用json，也可以是html和jsonp；
•data：設(shè)置發(fā)送給服務(wù)器的數(shù)據(jù)
•.done():設(shè)置請(qǐng)求成功后的回調(diào)函數(shù)
•.fail():設(shè)置請(qǐng)求失敗后的回調(diào)函數(shù)
•async:設(shè)置是否異步，默認(rèn)值是'true'，表示異步

•代碼運(yùn)用：

$(function () {
  $("input").click(function () {
    $.ajax({
      url: "./data.json",
      type: "get",
      dataType: "json",
    });
    .done(function(data) {//請(qǐng)求成功的回調(diào)函數(shù)
      $("input").val(dat.name);
    })
    .fail(function() {
      alert('服務(wù)器超時(shí)，請(qǐng)重試！');
    });
  });
})
......
<body>
  <div>
    <input type="button" value="xinzhi">
  </div>
</body>

說(shuō)明：data表示后臺(tái)返回的數(shù)據(jù)；ajax使用需要依賴(lài)服務(wù)器環(huán)境。

2. $.get():

•$.get() 方法使用GET請(qǐng)求從服務(wù)器加載數(shù)據(jù);也是一種無(wú)刷新的請(qǐng)求數(shù)據(jù)的ajax方法。

•參數(shù)：
•url:訪問(wèn)的網(wǎng)址，需要遵循同源策略；
•data:發(fā)送到服務(wù)器的數(shù)據(jù)。
•function(data,status){}：請(qǐng)求成功運(yùn)行的函數(shù)
•dataType：請(qǐng)求響應(yīng)的數(shù)據(jù)類(lèi)型。

//參考代碼：
$(function () {
  $("input").click(function () {
    $.get(
      "./data.json",
      function (data,status) {
        console.log(data.name);
      },
      "json"
    );
  });
})
......
<body>
  <div>
    <input type="button" value="xinzhi">
  </div>
</body>

•$.get()方法的參數(shù)和$.ajax()不一樣，網(wǎng)址url為必須的參數(shù)，其他三個(gè)可選。
•data為返回的數(shù)據(jù)，status表示請(qǐng)求的狀態(tài)，一般有""success","error","timeout"等幾種。
•如果datatype類(lèi)型為jsonp，也可以跨域請(qǐng)求數(shù)據(jù)。
•無(wú)請(qǐng)求失敗的回調(diào)函數(shù)。

3. $.post()

•$.get() 方法使用POST請(qǐng)求從服務(wù)器加載數(shù)據(jù);
•其使用的方法和$.get()方法完全一樣。

4. $.load():

•從服務(wù)器加載數(shù)據(jù)，不需要指定datatype,返回的數(shù)據(jù)會(huì)自動(dòng)放置到元素中。
•參數(shù)：

•URL:地址；
•data:請(qǐng)求的參數(shù)，可選；
•function(response,status,xhr)：請(qǐng)求成功的回調(diào)函數(shù)。

$(function () {
  $("input").click(function () {
    $(".box").load(
      "./data.json",
      function (response,status) {
        console.log(data.name);
      }
    );
  });
})
......
<body>
  <div>
    <input type="button" value="xinzhi">
    <div class="box"></div>
  </div>
</body>

•返回的數(shù)據(jù)會(huì)放置在div中；
•不能跨域訪問(wèn)數(shù)據(jù)；
•response為返回的數(shù)據(jù)，status為請(qǐng)求的狀態(tài)；
•無(wú)請(qǐng)求失敗的回調(diào)函數(shù)。

4. getJSON()

•方法使用 AJAX 的 HTTP GET 請(qǐng)求獲取 JSON 數(shù)據(jù)。
•參數(shù)：
•url: 請(qǐng)求網(wǎng)址，必須的參數(shù)；
•data: 發(fā)送給服務(wù)器的數(shù)據(jù)；
•function(data,status,xhr):請(qǐng)求成功的回調(diào)函數(shù)

$(function () {
  $("input").click(function () {
    $.getJSON(
      "./data.json",
      function(data,status) {
        console.log(data.name);
      },
    );
  });
})
......
<body>
  <div>
    <input type="button" value="xinzhi">
  </div>
</body>

•方法直接獲取的是json數(shù)據(jù)；

•無(wú)返回失敗的回調(diào)函數(shù)；

•回調(diào)函數(shù)時(shí)命名函數(shù)，不是匿名函數(shù)；

5. getScript()

•方法使用 AJAX 的 HTTP GET 請(qǐng)求獲取并執(zhí)行js代碼。

•參數(shù)：

•url: 請(qǐng)求網(wǎng)址，必須的參數(shù)；

•function(data,status):請(qǐng)求成功的回調(diào)函數(shù)

$(function () {
  $("input").click(function () {
    $.getScript(
      "./data.js",
      function(data,status) {
        console.log(data);
      },
    );
  });
})
......
<body>
  <div>
    <input type="button" value="xinzhi">
  </div>
</body>

•返回結(jié)data是js代碼；

•該方法可以用來(lái)動(dòng)態(tài)加載js代碼。

二、jsonp

•定義：一種可以實(shí)現(xiàn)跨域發(fā)送http請(qǐng)求的數(shù)據(jù)通信格式，可以嵌在ajax中使用。
•原理：利用script標(biāo)簽可以跨域鏈接資源的特性。

用法一：函數(shù)傳參

<script type="text/javascript">
  function aa(data){
    console.log(data.name);
  }
</script>
<script type="text/javascript" src="....../data.js"></script>

說(shuō)明：在外部定義一個(gè)data.js文件，這個(gè)文件的路徑可以與當(dāng)前頁(yè)面不在同一個(gè)域下面。

data.js的內(nèi)容：

aa({
  
  "data":{
    "name":"xiaohong",
    "age":"18"
  }
})

•將數(shù)據(jù)以頁(yè)面定義的函數(shù)的參數(shù)的形式傳遞進(jìn)去，從而獲取數(shù)據(jù)。

•本質(zhì)上可以將數(shù)據(jù)拆分，使得數(shù)據(jù)不用強(qiáng)制保存在同一個(gè)域名下。

用法二：利用ajax

$.ajax({
  url:'...../data.js',//可以不是本地域名 
  type:'get',
  dataType:'jsonp', //jsonp格式訪問(wèn)
  jsonpCallback:'aa' //獲取數(shù)據(jù)的函數(shù)
})
.done(function(data){
  console.log(data.name);
})
.fail(function() {
  alert('服務(wù)器超時(shí)，請(qǐng)重試！');
});

•data.js的內(nèi)容和上面一樣。

•使用ajax的方法本質(zhì)上也是script標(biāo)簽可以跨域鏈接資源，不過(guò)jquery為其封裝了相同的方法，看起來(lái)一樣。

•以上代碼的執(zhí)行過(guò)程為：ajax通過(guò)jsonp技術(shù)跨域訪問(wèn)data.js文件，通過(guò)找到aa()方法將其參數(shù)傳遞給.done方法的data參數(shù)執(zhí)行.done方法。

•目前這種方式仍然有其局限性，就是必須知道data.js文件的名字和定義的方法aa，如果在僅僅知道域名的情況下，需要另外的方法.

用法三

var $input = $("input");
$input.keyup(function () {
  $.ajax({
    url:'https://sug.so.#/suggest?',//請(qǐng)求360搜索的聯(lián)想數(shù)據(jù)
    type:'get',
    dataType:'jsonp', //jsonp格式訪問(wèn)
    data: {word: $input.val()},
  })
  .done(function(data){
    console.log(data);
  })
  .fail(function() {
    alert('服務(wù)器超時(shí)，請(qǐng)重試！');
  });
})
....
<body>
  <input type="text">
</body>

•通過(guò)瀏覽器查看每次輸入關(guān)鍵字服務(wù)器發(fā)送回的數(shù)據(jù)包，找到j(luò)s文件中header的地址以及相關(guān)的提交數(shù)據(jù)，發(fā)現(xiàn)key為word關(guān)鍵字，因此可以向服務(wù)器發(fā)送data數(shù)據(jù)。
•服務(wù)器返回的數(shù)據(jù)會(huì)自動(dòng)傳給回調(diào)的匿名函數(shù)的參數(shù)data.

總結(jié)

以上所述是小編給大家介紹的Ajax和jsonp使用總結(jié)，需要的朋友參考下

您可能感興趣的文章: