jQuery 的 $.ajax() 筆記

tags: `JavaScript`, `Ajax`

XMLHttpRequest — JavaScript 發送 HTTP 請求 (I)
jQuery Ajax — JavaScript 發送 HTTP 請求 (II)

筆記

jQuery實作ajax的方法

低階用法(Low-Level Interface)： jQuery.ajax()

簡短用法(Shorthand Methods)：

方法	說明
jQuery.get()	實作HTTP GET請求
jQuery.post()	實作HTTP POST請求
jQuery.getJSON()	實作HTTP GET請求，載入JSON資料
jQuery.getScript()	實作HTTP GET請求，載入JavaScript檔案並執行

方式一：$.ajax()

$.ajax({
  url: 'api/imgData.json',
  dataType: 'json'
})
.always(function(obj) {
  console.log(obj);
});

方式二：jQuery.getJSON()

$.getJSON('api/imgData.json', {}, function(json, textStatus) {
    console.log(json);
});

多個ajax的處理方式

不管執行順序，多個ajax執行完後給一個結果：jQuery.when()

// 三個ajax操作都結束以後，才執行then方法指定的 doneCallbacks 函式

var ajax1 = $.get("main/func1/");
var ajax2 = $.post("main/func2/","condition");
var ajax3 = $.get("main/func3/");

var doneCallbacks = function(res1,res2,res3){
    console.log('ajax1:',res1)
    console.log('ajax2:',res2)
    console.log('ajax3:',res3)
    $('body').append('<p>三個ajax都執行完了！</p>')
}
var failCallbacks = function() {
    console.log("ajax執行有問題！");
}

$.when(ajax1,ajax2,ajax3)
 .then(doneCallbacks, failCallbacks);

執行的順序很重要，要一步接著一步走：jQuery.deferred(); / promise(); (jQuery 1.5 以上才支援)

function ajax1(){
    var def = $.Deferred()
    $.ajax({
      url: 'http://www.yacoding.com/jquery.php?ran='+Math.random(),
      dataType: 'json'
    }).then(function(){
      $('body').append('<p>ajax1 success</p>')
      def.resolve()
    },function(){
      $('body').append('<p>ajax1 fail</p>')
      def.reject()
    })
    return def.promise()
}

function ajax2(){
    var def = $.Deferred()
    $.ajax({
      url: './api/test1.json?ran='+Math.random(),
      dataType: 'json'
    }).then(function(){
      $('body').append('<p>ajax2 success</p>')
      def.resolve()
    },function(){
      $('body').append('<p>ajax2 fail</p>')
      def.reject()
    })
    return def.promise()
}

function ajax3(){
    var def = $.Deferred()
    $.ajax({
      url: './api/test2.json?ran='+Math.random(),
      dataType: 'json'
    }).then(function(){
      $('body').append('<p>ajax3 success</p>')
      def.resolve()
    },function(){
      $('body').append('<p>ajax3 fail</p>')
      def.reject()
    })
    return def.promise()
}

ajax1().then(ajax2).then(ajax3).then(function(){
    $('body').append('<p>三個ajax都執行完了！</p>')
  },function(){
    $('body').append('<p>ajax執行有問題！</p>')
  })

建議讓ajax結構單純化，將大量處理畫面的邏輯用函式獨立出來。

$.ajax({
    url: './api/imgData.json',
    dataType: 'json'
  })
  .done(function(res) {
    init(res.list);
  })

function init(list){
  $.each(list, function(index, value) {
    $("<li></li>").append($("<img>")
      .attr('src',value.src)).appendTo($('.imgList'))
  });
}

延伸閱讀

jQuery 的 $.ajax() 筆記

tags: JavaScript, Ajax

Read more

Laraval學習地圖

系統及網站滲透測試

SSDLC筆記

Linux外掛NFS磁區

tags: `JavaScript`, `Ajax`