打算寫個(gè)ajax系列的博文，主要是寫給自己看，學(xué)習(xí)下ajax的相關(guān)知識(shí)和用法，以更好的在工作中使用ajax。

假設(shè)有個(gè)網(wǎng)站A，它有一個(gè)簡(jiǎn)單的輸入用戶名的頁(yè)面，界面上有兩個(gè)輸入框，第一個(gè)輸入框包含在一個(gè)form表單里用來(lái)實(shí)現(xiàn)form提交，第二個(gè)輸入框是單獨(dú)的、沒有包含在form里，下面就用這兩個(gè)輸入框來(lái)學(xué)習(xí)下jQuery的ajax。

1，前端的html和javascript代碼

頁(yè)面html

<main style="text-align: center; margin: 200px auto;">
   <h2>輸入用戶名</h2>
   <form class="" action="demo01.php" method="post" style="margin-bottom: 20px;">
   <input id="user-name" type="text" name="username" placeholder="請(qǐng)?zhí)顚懩挠脩裘?>
    <input type="submit" name="submit1" value="form提交1" class="input">
   </form>
   <input id="user-name2" type="text" name="username2" placeholder="請(qǐng)?zhí)顚懩挠脩裘?>
   <input type="button" name="submit2" value="ajax提交2">
   <div class="box">
   </div>
  </main>
  <script src="../../js/jquery-3.1.0.min.js"></script>
  <script src="demo.js"></script>

頁(yè)面中引入的demo01.js代碼，注意此處實(shí)現(xiàn)的是一個(gè)簡(jiǎn)單的GET請(qǐng)求。

 $(function($) {
  $('input[name=submit2]').on('click', function(e) {
   let username = '';
   if ('' !== (username = $('#user-name2').val())) {
    $.ajax({
     url: `demo.php?name=${username}`,
     dataType: 'json',
     method: 'GET',
     success: function(data) {
      if (data.result == 1) {
       $('.box').html(`<div>你的姓名${username}已成功保存。</div>`);
      }
     },
     error: function(xhr) {
      // 導(dǎo)致出錯(cuò)的原因較多，以后再研究
      alert('error:' + JSON.stringify(xhr));
     }
    })
    .done(function(data) {
     // 請(qǐng)求成功后要做的工作
     console.log('success');
    })
    .fail(function() {
     // 請(qǐng)求失敗后要做的工作
     console.log('error');
    })
    .always(function() {
     // 不管成功或失敗都要做的工作
     console.log('complete');
    });
   }
  });
 });

jQuery的ajax()方法有兩種寫法，分別是： $.ajax(url [, settings]); 和 $.ajax([settings]); 兩種寫法都可以，感覺第一種方法適合用于參數(shù)較少的情況，比如，如果只是對(duì)一個(gè)url做一個(gè)簡(jiǎn)單的請(qǐng)求，不對(duì)返回的數(shù)據(jù)、格式和錯(cuò)誤有要求，只需要傳遞一個(gè)url參數(shù)就可以，那就可以用第一種寫法。上面的demo01.js中采用的是第二種寫法，下面解釋下參數(shù)和相關(guān)的函數(shù)。

（1）上面代碼中ajax()的參數(shù)

可以看到這里的參數(shù)類型都是javascript對(duì)象，即都是 o = {key: value}; 這種類型的數(shù)據(jù)。jQuery的文檔中規(guī)定了，這里的參數(shù)只能是PlainObject（對(duì)象類型的對(duì)象），不能是null、自定義的數(shù)組、或者像docement這種歸屬于某種執(zhí)行環(huán)境(比如瀏覽器)屬于某種類型的對(duì)象。這里不太好說(shuō)清楚，可以做個(gè)小試驗(yàn)。在命令行里打開node repl，進(jìn)行下測(cè)試：

> node
 > typeof(null);
 'object'
 > typeof([]);
 'object'
 > typeof(document);
 'undefined'
 > typeof({});
 'object'

可以看到null、[](數(shù)組類型)、{}(對(duì)象類型)都是對(duì)象。因?yàn)樵趈s中一切皆對(duì)象。而在交互式環(huán)境中，document則是未定義的一個(gè)變量，所以它的類型是undefined。如果在瀏覽器環(huán)境下測(cè)試下typeof(document)，那么它的類型也是object。下面逐個(gè)解釋下代碼用到的參數(shù)：

url，要請(qǐng)求的url地址，它的值應(yīng)該是包含url的字符串。

dataType，字符串。發(fā)出請(qǐng)求后，期望從服務(wù)器返回的數(shù)據(jù)類型?？梢灾付ǖ念愋陀衳ml、html、script、json、jsonp、text。如果不指定，jquery會(huì)基于MIME做判斷，并會(huì)返回一個(gè)下面xml、json、script、html當(dāng)中的一種類型。

method，字符串。HTTP請(qǐng)求方法，默認(rèn)為GET，上面代碼中指定為POST。

success， Type: Function( Anything data, String textStatus, jqXHR jqXHR ) ，匿名函數(shù)。HTTP請(qǐng)求成功后要調(diào)用的函數(shù)，可以傳遞三個(gè)參數(shù)給它：從服務(wù)器返回的數(shù)據(jù)（如果上面指定了dataType，則服務(wù)器返回的數(shù)據(jù)類型需要與上面dataType指定的類型一致）、一個(gè)可以描述狀態(tài)的字符串textStatus、還有一個(gè)jqXHR對(duì)象?？梢钥吹缴厦嬷粋鬟f了從服務(wù)器返回的數(shù)據(jù)data。

error， Type: Function( jqXHR jqXHR, String textStatus, String errorThrown ) ，匿名函數(shù)。HTTP請(qǐng)求失敗后要調(diào)用的函數(shù)，同樣也可以傳遞三個(gè)參數(shù)。

除了用到的這些參數(shù)，還有許多其他的如：async、dataFilter、mimeType等其他參數(shù)，不過(guò)現(xiàn)在的這個(gè)簡(jiǎn)單的腳本還用不到那么多參數(shù)。

（2）“延遲加載函數(shù)”

上面代碼中 $.ajax().done().fail().always() jqXHR.done()、jqXHR.fail()、jqXHR.always()中分別可以添加deferred對(duì)象被解析、被拒絕、被解析或被拒絕這三種情況下的要處理的工作，比如添加個(gè)函數(shù)什么的。為什么能夠這么做呢，這要看$.ajax()返回了什么，它返回的是jqXHR對(duì)象(jquery版本大于1.5時(shí))。這個(gè)對(duì)象實(shí)現(xiàn)了Promise interface（Promise機(jī)制，用來(lái)傳遞異步操作消息，代表了某個(gè)未來(lái)才會(huì)知道結(jié)果的事件）。這就允許在一次請(qǐng)求中添加多個(gè)回調(diào)函數(shù)，甚至可以在請(qǐng)求完成后添加回調(diào)函數(shù)。

標(biāo)題“延遲加載”描述的不夠準(zhǔn)確，但從效果上看是有延遲加載的效果。關(guān)于這個(gè)問(wèn)題更詳細(xì)的解釋可以參考jQuery文檔中對(duì)jqXHR的解釋  或一位前端前輩的解釋jQuery的deferred對(duì)象詳解 。

 2，后端運(yùn)行在nginx服務(wù)器上的php代碼

后端的邏輯很簡(jiǎn)單：我們把前端獲取的數(shù)據(jù)保存到名為data-demo01的文件中，保存成功則向前端返回一個(gè)1作為標(biāo)志。

（1）前端ajax發(fā)起GET請(qǐng)求

如果前端的ajax發(fā)起的是一個(gè)GET請(qǐng)求，那么后端也比較好處理：

  if (isset($_GET['name']) && !empty($_GET['name'])) {
   $username = trim($_GET['name']);
   if (file_put_contents('data-demo01', $username)) {
    echo '{"result": 1}';
   } 
}

（2）前端ajax發(fā)起POST請(qǐng)求

js代碼中需要修改下ajax()的url、method參數(shù)，并增加一個(gè)data參數(shù)，修改后如下：

 // 相同的代碼省略
 $.ajax({
  url: `demo01.php`,
  dataType: 'json',
  method: 'POST',
  data: {"username": username},
 // 相同的代碼省略

因?yàn)橛肞OST傳遞數(shù)據(jù)，所以去掉url中用來(lái)傳遞數(shù)據(jù)的參數(shù)，下面的data類型要與dataType一致，為json格式，然后將username作為值傳遞。

那么后端的代碼也就可以確定了：

 if (isset($_POST['username']) && !empty($_POST['username'])) {
   $username = trim($_POST['username']);
   if (file_put_contents('data-demo01', $username)) {
    echo '{"result": 1}';
   }
  }

如果不出錯(cuò)的話，效果應(yīng)該是下面這樣然后查看下data-demo01，名字果然被保存了。

那么問(wèn)題來(lái)了，如果出錯(cuò)了呢？比如data-demo01文件不可寫，或者后臺(tái)服務(wù)器返回的數(shù)據(jù)格式有錯(cuò)誤，或者網(wǎng)絡(luò)出錯(cuò)。那又該怎么處理呢？我現(xiàn)在也不太清楚，后續(xù)再研究吧。

以上所述是小編給大家介紹的使用jQuery的ajax方法向服務(wù)器發(fā)出get和post請(qǐng)求的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論