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

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

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

　　?$.get()

　　?$.post()

　　?$.ajax()

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

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

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

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

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

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

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

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

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

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

2.$.post()

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

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

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

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

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

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

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

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

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

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

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

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

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