jQuery中怎樣發(fā)起Ajax請(qǐng)求？

Ajax的全稱是 Asynchronous Javascript And XML(異步 JavaScript 和 XML)。在網(wǎng)頁(yè)中它可以幫我們輕松實(shí)現(xiàn)網(wǎng)頁(yè)與服務(wù)器之間的連接。利用 XMLHttpRequest 對(duì)象和服務(wù)器進(jìn)行數(shù)據(jù)交互。

瀏覽器中提供的 XMLHttpRequest 用法比較復(fù)雜，所以 jQuery 對(duì) XMLHttpRequest 進(jìn)行了封裝，提供了一系列 Ajax 相關(guān)的函數(shù)，極大地降低了 Ajax 的使用難度。jQuery 中發(fā)起 Ajax 請(qǐng)求最常用的三個(gè)方法如下：

　　?$.get()

　　?$.post()

　　?$.ajax()

1.$.ajax()函數(shù)的語(yǔ)法

jQuery 中 $.get() 函數(shù)的功能單一，專門用來(lái)發(fā)起 get 請(qǐng)求，從而將服務(wù)器上的資源請(qǐng)求到客戶端來(lái)進(jìn)行使用。$.get() 函數(shù)的語(yǔ)法如下：

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

其中，三個(gè)參數(shù)各自代表的含義如下表：

使用 $.get() 函數(shù)發(fā)起不帶參數(shù)的請(qǐng)求時(shí)，直接提供請(qǐng)求的 URL 地址和請(qǐng)求成功之后的回調(diào)函數(shù)即可，示例代碼如下：

$.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
    console.log(res) // 這里的 res 是服務(wù)器返回的數(shù)據(jù)
})

發(fā)起請(qǐng)求后，查看頁(yè)面的網(wǎng)頁(yè)源代碼，Network頁(yè)的顯示如下圖：

使用 $.get() 函數(shù)發(fā)起帶參數(shù)的請(qǐng)求時(shí)，示例代碼如下：

$.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function(res) {
    console.log(res)
})

發(fā)起請(qǐng)求后，查看頁(yè)面的網(wǎng)頁(yè)源代碼，Network頁(yè)的顯示如下：

2.$.post()

jQuery 中 $.post() 函數(shù)的功能單一，專門用來(lái)發(fā)起 post 請(qǐng)求，從而向服務(wù)器提交數(shù)據(jù)。$.post() 函數(shù)的語(yǔ)法如下：

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

其中，三個(gè)參數(shù)各自代表的含義如下：

使用 $post() 向服務(wù)器提交數(shù)據(jù)的示例代碼如下：

$.post(
   'http://www.liulongbin.top:3006/api/addbook', // 請(qǐng)求的URL地址
   { bookname: '水滸傳', author: '施耐庵', publisher: '上海圖書出版社' }, // 提交的數(shù)據(jù)
   function(res) { // 回調(diào)函數(shù)
      console.log(res)
   }
)

同樣可以看到，發(fā)起請(qǐng)求后網(wǎng)頁(yè)源代碼中，文件成功加載：

3.$.ajax()函數(shù)的語(yǔ)法

相比于 $.get() 和 $.post() 函數(shù)，jQuery 中提供的 $.ajax() 函數(shù)，是一個(gè)功能比較綜合的函數(shù)，它允許我們對(duì) Ajax 請(qǐng)求進(jìn)行更詳細(xì)的配置。$.ajax() 函數(shù)的基本語(yǔ)法如下：

$.ajax({
   type: '', // 請(qǐng)求的方式，例如 GET 或 POST
   url: '',  // 請(qǐng)求的 URL 地址
   data: { },// 這次請(qǐng)求要攜帶的數(shù)據(jù)
   success: function(res) { } // 請(qǐng)求成功之后的回調(diào)函數(shù)
})

使用 $.ajax() 發(fā)起 GET 請(qǐng)求時(shí)，只需要將 type 屬性的值設(shè)置為 'GET' 即可：

$.ajax({
   type: 'GET', // 請(qǐng)求的方式
   url: 'http://www.liulongbin.top:3006/api/getbooks',  // 請(qǐng)求的 URL 地址
   data: { id: 1 },// 這次請(qǐng)求要攜帶的數(shù)據(jù)
   success: function(res) { // 請(qǐng)求成功之后的回調(diào)函數(shù)
       console.log(res)
   }
})

使用 $.ajax() 發(fā)起 POST 請(qǐng)求時(shí)，只需要將 type 屬性的值設(shè)置為 'POST'。

$.ajax({
   type: 'POST', // 請(qǐng)求的方式
   url: 'http://www.liulongbin.top:3006/api/addbook',  // 請(qǐng)求的 URL 地址
   data: { // 要提交給服務(wù)器的數(shù)據(jù)
      bookname: '水滸傳',
      author: '施耐庵',
      publisher: '上海圖書出版社'
    },
   success: function(res) { // 請(qǐng)求成功之后的回調(diào)函數(shù)
       console.log(res)
   }
})