jQuery中的ajax相關知識點

學習JavaScript的同學都知道, AJAX (async javascript and
xml)翻譯叫做異步的JavaScript和XML , 在原生js中使用發送網路請求也是一件麻煩事,每次都是那幾個步驟.

我們先來回顧一下在原生js中如何發送一個 ajax 網路請求

經典4步曲

1.原生js的ajax網路請求

    // IE9及以上
    // const xhr = new XMLHttpRequest()
    // IE9以下
    // const xhr = new ActiveXObject('Mricosoft.XMLHTTP')

    // 對于這個兼容寫法我們可以用一個函式來封裝
    function createXHR() {
      var req = null;
      if (window.XMLHttpRequest) {
        // 如果有這個XMLHttpRequest物件就直接使用
        req = new XMLHttpRequest();
      } else {
        // 否則就使用IE8一下的寫法
        req = new ActiveXObject("Microsoft.XMLHTTP");
      }
      return req;
    }
    // 第一步:創建ajax物件
    var xhr = createXHR(); //這樣就拿到了一個ajax物件
    // 第二步:配置網路請求資訊

    xhr.open('get', './demo.php', true)
    //  xhr.open('get/post','要發送網路請求去哪個地址',同步還是異步默認 true 表示異步，false 表示同步)
    //  如果是get請求有引數需要拼接在地址后面,例如'./demo.php?id=2&name=sanqi'
    // 如果是post請求,引數就要放在send()里面,例如:xhr.send('id=2&name=sanqi')
    // 第三步:發送網路請求
    xhr.send() //
    // 第四部:判斷回應狀態拿到資料
    xhr.onreadyStateChange = function () {
      // 每次 readyState 改變的時候都會觸發該事件
      // 我們就在這里判斷 readyState 的值是不是到 4
      // 并且 http 的狀態碼是不是 200 ~ 299
      if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) {
        // 這里表示驗證通過
        // 我們就可以獲取服務端給我們回應的內容了
        console.log(xhr.response);
      }
    }

這里補充一下readyState的5個狀態

• readyState --> 0： 表示未初始化完成，也就是 open 方法還沒有執行
• readyState --> 1： 表示配置資訊已經完成，也就是執行完 open 之后
• readyState --> 2： 表示 send 方法已經執行完成
• readyState --> 3： 表示正在決議回應內容
• readyState --> 4： 表示回應內容已經決議完畢，可以在客戶端使用了

上面就是原生的js發送一個ajax網路請求

2.關于使用jQuery的ajax網路請求

我們在學習jquery,就了解到,大家都在說,什么 jq 都給我們封裝好啦,這些網路請求都不用我們去寫啦,雖說如此,但是也還是不能盲目,還是 要具體了解之后才會使用.

(1).利用jquery發送get請求

下面統一后端代碼使用檔案名為: test.php 這個檔案

<?php
header('content-type:text/html;charset=utf-8;');
  $id = $_REQUEST['id'];
  $name = $_REQUEST['name'];
  $arr = [
    'id' => $id,
    'name' => $name
  ];
  echo json_encode($arr);
?>

使用jquery發送get請求

      $.get('./test.php','id=999&name=三七安',function (res) { 
      //第一個引數是請求的地址
      //第二個引數是要發送給服務器的資料
      //第三個引數是成功時的回呼函式,里面包含服務回傳給我們的資料
      //第四個引數是我們希望拿到的資料格式:有幾種選擇:json,text,html,xml,script
        console.log(res);
       },'json')

可以看到請求是發送成功了的

(2) 利用jquery發送post請求

	 $.post('./test.php',{id:123,name:'post請求'},function (res) { 
	 //這里其他引數和get請求一致的
	 //注意,這里的傳輸資料我用 物件的格式來寫,也能發送請求成功,也就是說
	 //無論是get請求還是post請求,想服務端傳資料,既可以使用字串格式也可以使用物件格式
        console.log(res);
       },'json')

這是請求成功的的頁面

(3)利用jquery發送綜合發送 ajax 請求

先來瀏覽一下語法

    // 使用 $.ajax 方法
    // 只接受一個引數，是一個物件，這個物件對當前的請求進行所有的配置
    $.ajax({
      url: './ajax', // 必填，請求的地址
      type: 'GET', // 選填，請求方式，默認是 GET（忽略大小寫）
      data: {}, // 選填，發送請求是攜帶的引數
      dataType: 'json', // 選填，期望回傳值的資料型別，默認是 string
      async: true, // 選填，是否異步，默認是 true
      success() {}, // 選填，成功的回呼函式
      error() {}, // 選填，失敗的回呼函式
      cache: true, // 選填，是否快取，默認是 true
      context: div, // 選填，回呼函式中的 this 指向，默認是 ajax 物件
      status: {}, // 選填，根據對應的狀態碼進行函式執行
      timeout: 1000, // 選填，超時事件
    })

好像每次都要填好多引數,但其實大部分引數都是選填的,我們只要看實際情況來填寫
在編譯器里面,直接輸入ajax也可以快捷生成部分代碼

發送ajax請求代碼

$.ajax({
       type: "get",
       url: "./test.php",
       data: {
         id:000,
         name:'發送$.ajax請求的演示'
       },
       dataType: "json",
       success: function (response) {
         console.log(response);
       }
     });

打開網頁就可以看到我們從后端拿回來的資料

下面補充幾個Ajax的全域函式,也叫鉤子函式,也就是在Ajax整個請求程序中的某一個階段執行的函式,而且是任意一個Ajax請求都會觸發.

1. ajaxStart, 任意一個請求開始的時候都會觸發這個函式

$(window).ajaxStart(function () {
    console.log('有一個請求開始了')
})

2. ajaxSend , 任意一個 請求準備send之前都會觸發這個請求.

$(window).ajaxSend(function () {
    console.log('有一個要發送出去了')
})

3.ajaxSuccess, 任意一個 請求成功的時候都會觸發這個函式.

$(window).ajaxSuccess(function () {
    console.log('有一個請求成功了')
})

4.ajaxError , 任意一個 請求失敗的時候就會觸發這個函式.

$(window).ajaxError(function () {
    console.log('有一個請求失敗了')
})

5.ajaxComplete , 任意一個 請求完成的時候就會觸發這個函式

$(window).ajaxComplete(function () {
    console.log('有一個請求完成了')
})

6.ajaxStop , 任意一個 請求結束的時候就會觸發這個函式

$(window).ajaxStop(function () {
    console.log('有一個請求結束了')
})

好了以上就是有關jQuery的ajax網路請求相關的知識.希望對大家有一點點進步.有些知識也是來自互聯網,如果有錯漏,請指出,小白一定及時更正,謝謝!!!

謙虛使人進步,驕傲使人落后.