全面解析Ajax和jsonp使用總結

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

一、ajax

•定義：一種發(fā)送http請求與后臺進行異步通訊的技術。

•原理：實例化xmlhttp對象，使用此對象與后臺通信。

ajax的同源策略：

•ajax請求的頁面或資源只能是同一個域下面的資源，不能是其他域的資源，這是在設計ajax時基于安全考慮。

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

ajax的方法：

1. $.ajax({}):

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

•代碼運用：

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

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

2. $.get():

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

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

//參考代碼：
$(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ù)，其他三個可選。
•data為返回的數(shù)據(jù)，status表示請求的狀態(tài)，一般有""success","error","timeout"等幾種。
•如果datatype類型為jsonp，也可以跨域請求數(shù)據(jù)。
•無請求失敗的回調函數(shù)。

3. $.post()

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

4. $.load():

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

•URL:地址；
•data:請求的參數(shù)，可選；
•function(response,status,xhr)：請求成功的回調函數(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ù)會放置在div中；
•不能跨域訪問數(shù)據(jù)；
•response為返回的數(shù)據(jù)，status為請求的狀態(tài)；
•無請求失敗的回調函數(shù)。

4. getJSON()

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

•無返回失敗的回調函數(shù)；

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

5. getScript()

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

•參數(shù)：

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

•function(data,status):請求成功的回調函數(shù)

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

•返回結data是js代碼；

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

二、jsonp

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

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

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

說明：在外部定義一個data.js文件，這個文件的路徑可以與當前頁面不在同一個域下面。

data.js的內容：

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

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

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

用法二：利用ajax

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

•data.js的內容和上面一樣。

•使用ajax的方法本質上也是script標簽可以跨域鏈接資源，不過jquery為其封裝了相同的方法，看起來一樣。

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

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

用法三

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

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

總結

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