ajax在js中和jQuery中的用法實例詳解

Posted on by

原生 JS

怎麼發送一個 get 請求

  • 創建一個 ajax 對象
    • var xhr = new XMLHttpRequest()
  • 設置請求方式和請求地址[，是否異步]
    • xhr.open(‘get’, ‘/ajax'[, true or fasle])
  • 準備接受請求體
    • xhr.onload = function () { console.log(xhr.responseText) }
    • xhr.onreadystatechange = function () { if (xhr.readyState === 4) { console.log( xhr.responseText ) } }
  • 發送請求
    • xhr.send(null) 
var xhr = new XMLHttpRequest()
xhr.open('get', '/ajax')
xhr.onload = function () {
  console.log(xhr.responseText)
}
xhr.send(null)

怎麼發送一個 post 請求

  • 創建一個 ajax 對象
    • var xhr = new XMLHttpRequest()
  • 設置請求方式和請求地址[，是否異步]
    • xhr.open(‘post’, ‘/ajax'[, true or fasle])
  • 準備接受請求體
    • xhr.onload = function () { console.log(xhr.responseText) }
    • xhr.onreadystatechange = function () { if (xhr.readyState === 4) { console.log( xhr.responseText ) } }
  • 發送請求
    • xhr.send(null)
var xhr = new XMLHttpRequest()
xhr.open('post', '/ajax')
xhr.onload = function () {
  console.log(xhr.responseText)
}
xhr.send(null)

發送一個帶有參數的 get 請求

  • var xhr = new XMLHttpRequest
  • 直接在請求地址後面拼接參數，? 開始，key=value 的形式，多個參數之間以 &  分割
    • xhr.open(‘get’, ‘/ajax?name=Jack&age=18’)
  • xhr.onload = function () { console.log( xhr.responseText ) }
  • xhr.send()

發送一個帶有參數的 post 請求

var xhr = new XMLHttpRequest

不需要在請求地址後面拼接任何內容

  • xhr.open(‘post’, ‘/ajax’)

xhr.onload = function () { console.log( xhr.responseText ) }

post 方式攜帶參數是直接寫在 xhr.send() 後面的 () 裡面

  • 自己收集數據 key=value
    • 自己設置請求頭
    • xhr.setRequestHeadr(‘content-type’, ‘application/x-www-form-urlencoded’)
  • FormData 收集數據
    • 什麼都不需要，隻要使用 FormData 收集數據就可以瞭
    • var fd = new FormData(DOM)
    • 在發送請求的時候隻要把 fd 帶過去就行瞭
var xhr = new XMLHttpRequest()
xhr.open('post', '/ajax')
xhr.onload = function () {
  console.log(xhr.responseText)
}
xhr.setRequestHeadr('content-type', 'application/x-www-form-urlencoded')
xhr.send('key=value&key=value')

var fd = new FormData(document.querySelector('form'))
var xhr = new XMLHttpRequest()
xhr.open('post', '/ajax')
xhr.onload = function () {
  console.log(xhr.responseText)
}
xhr.send(fd)

jQuery

$.get 幾個參數，怎麼使用

地址

  • 參數 key=value 或者 { name: ‘Jack’ }
  • 成功的回調函數
  • 預期後臺返回的數據類型
    • text ： 什麼都不做，直接給你結果
    • json ： 必定會執行一步 JSON.parse()

$.post 幾個參數，怎麼使用

  • 地址
  • 參數 key=value 或者 { name: ‘Jack’ }， 不能發送 FormData
  • 成功的回調函數
  • 預期後臺返回的數據類型

$.ajax 幾個參數，怎麼使用

  • 就是配置項 options
    • url： 請求地址
    • method/type:  請求方式
    • data： 攜帶參數
    • dataType： 後臺返回的數據類型天
    • success： 成功的回掉
    • error： 失敗的回調
    • contentType:  發送 FormData 的時候使用的
    • processData： 發送 FormData 的時候使用的

JSONP

$.ajax 怎麼發送 jaonp 請求

  • dataType 必須是 jsonp
  • 方式必須是 get
  • jsonp： 根據後臺來決定 
$.ajax({
  url: '/jsonp',
  data: {},
  dataType: 'jsonp',
  jsonp: 'callback',
  success (res) {
    console.log(res)
  }
})

總結

到此這篇關於ajax在js中和jQuery中的用法的文章就介紹到這瞭,更多相關ajax在js中和jQuery的用法內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：