1-1 使用load()方法異步請求數據

使用load()方法通過Ajax請求加載服務器中的數據，并把返回的數據放置到指定的元素中：

load(url, [data], [callback])
// url：加載服務器地址
// 可選項data：請求時發送的數據
// callback：數據請求成功后，執行的回調函數

示例

$(function() {
  $("#btnShow").bind("click", function(){
    var $this = $(this);
    $(".content")
    .html("![](Images/Loading.gif)")
    .load("http://www.imooc.com/data/fruit_part.html", function(){
      $this.attr("disabled", "true");
    });
  });
});

var $this = $(this)

1. this其實是一個HTML元素
2. $this 只是個變量名，加"$"是為了說明其是個jquery對象
3. 而$(this)是個轉換，將this表示的dom對象轉換為jquery對象，這樣就可以使用jquery提供的方法操作

1-2 使用getJSON()方法異步加載JSON格式數據

使用getJSON()可以通過Ajax異步請求的方式，獲取服務器中的數據，并對數據進行解析，顯示在頁面中：

jQuery.getJSON(url, [data], [callback])或$.getJSON(url, [data], [callback])
// url：json格式的文件的服務器地址
// data：請求時的數據
// callback：回調函數

示例

$(function(){
  $("#btnShow").bind("click", function(){
    var $this = $(this);
    $.getJSON("Data/sport.json", function(data){
      $this.attr("disabled", "true");
      $.each(data, function(){
        $("ul").append("<li>" + sport["name"] + "</li>");
      })
    });
  });
});

$.each(data, function(index, ele){})

1. data：要遍歷的集合
2. index：索引值
3. ele：集合中的子元素

1-3 使用getScript()方法異步加載并執行js文件

jQuery.getScript(url, [callback])或$.getScript(url, [callback])
// url：請求地址
// callback：回調函數

示例

$(function(){
  $("#btnShow").bind("click", function(){
    var $this = $(this);
    $.getScript("Data/sport.js", function(){
      $.this.attr("disabled", "true");
    });
  });
});

1-4 使用get()方法以GET方式從服務器獲取數據

$.get(url, [callback])

示例

$(function(){
  $("#btnShow").bind(
    var $this = $(this);
    $.get("Data/info.php", function(data){
      $this.attr("disabled", "true");
      $("ul").append("<li>my name:" + data.name + "</li>");
      $("ul").append("<li>my motto:" + data.motto + "</li>");
    }, "json");
  );
});

json：設置從服務器獲取數據的類型，所以得到的數據格式為json類型的
默認get從服務器獲取到的數據是字符串類型

1-5 使用post()方法以POST方式從服務器發送數據

$.post(url, [data], [callback])

示例

$(function(){
  $("#btnCheck").bind("click", function(){
    $.post("Data/check.php", {
      num: $("#txtNumber").val() 
    }, function(data){
      $("ul").append("<li>你輸入的<b>" + $("#txtNumber").val() + "</b>是<b>" + data + "</b></li>");
    });
  });
});

1-6 使用serialize()方法序列化表單元素值

使用serialize()方法可以將表單中有name屬性的元素值進行序列化，生成標準URL編碼文本字符串，直接可用于ajax請求：

$(selector).serialize();
// selector：一個或多個表單中的元素或表單元素本身

示例

<button id="btnAction">序列化</button>
<form>
  姓名：<input name="Text1" type="text" />
  性別：<select name="Select1"><option value="0">男</option><option value="1">女</option></select>
  <input name="Checkbox1" type="checkbox" />資料是否可見
</form>
$(function(){
  $("#btnAction").bind("click", function(){
    $("#litest").html($("form").serialize());
    // Text1=yizihan&Select1=0&Checkbox1=on
  });
});

1-7 使用ajax()方法加載服務器數據

使用ajax()方法是最底層、功能最強大的請求服務器數據的方法，它不僅可以獲取服務器返回的數據，還能向服務器發送請求并傳遞數值：

$.ajax([settings])
// settings為發送ajax請求時的配置對象
// 包含url（路徑）、data（請求時傳遞的數據）、dataType（服務器返回的數據類型）、success（請求成功后執行的回調函數）、type（發送數據請求的方式，默認為get）

示例

$(function(){
  $("#btnShow").bind("click", function(){
    var $this = $(this);
    $.ajax({
      url: "Data/article.txt",
      data: { num: $("#txtNumber").val() },
      type: "post",
      success: function(data){
        $this.attr("disabled", "true";
        $("ul").append(data);
      }
    });
  });
});

1-8 使用ajaxSetup()方法設置全局Ajax默認選項

使用ajaxSetup()方法可以設置Ajax請求的一些全局性選項值，設置完成后，后面的Ajax請求將不需要再添加這些選項值：

$.ajaxSetup([options])
// 

示例

$(function(){
  $.ajaxSetup({
    dataType: "text",
    success: function(){
      $("ul").empty().append(data);
    }
  });
  $("#btnShow_1").bind("click", function(){
    $.ajax({url: "Data/article_1.txt" });
  });
  $("#btnShow_2").bind("click", function(){
    $.ajax({url: "Data/article_2.txt" });
  });
});

1-9 使用ajaxStart()和ajaxStop()方法

ajaxStart()和ajaxStop()方法是綁定Ajax事件。ajaxStart()方法用于在Ajax請求發出前觸發函數，ajaxStop()方法用于在Ajax請求完成后觸發函數：

$(selector).ajaxStart(function())
$(selector).ajaxStop(function())

示例

$(function(){
  $("#divload").ajaxStart(function() { $(this).show(); });
  $("#divload").ajaxStop(function() { $(this).hide(); });
  $("#btnShow").bind("click", function(){
    var $this = $(this);
    $.ajax(
      url: "Data/info.php",
      dataType: "json",
      success: function(data) {
        $this.attr("disabled", "true");
        $("ul").append("<li>my name: " + my.name + "</li>");
      }
    );
  });
});