Detailed Explanation of Usage Examples of ajax in js and jQuery

Directory Native JS
How to send an get request How to send an post request Send an get request with parameters Send an post request with parameters jQuery
How to use the parameters of $. get, how to use the parameters of $. post, how to use the parameters of $. ajax, how to use the parameters of JSONP
$. ajax How to Send jaonp Request Summary

Native JS

How do I send an get request

Create 1 ajax object var xhr = new XMLHttpRequest() Set request mode and request address [, asynchronous] xhr.open('get', '/ajax'[, true or fasle]) Prepare to accept the request body xhr.onload = function () { console.log(xhr.responseText) } xhr.onreadystatechange = function () { if (xhr.readyState === 4) { console.log( xhr.responseText ) } } Send a request xhr.send(null)

var xhr = new XMLHttpRequest()
xhr.open('get', '/ajax')
xhr.onload = function () {
  console.log(xhr.responseText)
}
xhr.send(null)

How do I send an post request

Create 1 ajax object var xhr = new XMLHttpRequest() Set request mode and request address [, asynchronous] xhr.open('post', '/ajax'[, true or fasle]) Prepare to accept the request body xhr.onload = function () { console.log(xhr.responseText) } xhr.onreadystatechange = function () { if (xhr.readyState === 4) { console.log( xhr.responseText ) } } Send a request xhr.send(null)

var xhr = new XMLHttpRequest()
xhr.open('post', '/ajax')
xhr.onload = function () {
  console.log(xhr.responseText)
}
xhr.send(null)

Send 1 get request with parameters

var xhr = new XMLHttpRequest Splice parameters directly after the request address. Beginning, key=value, between multiple parameters in the form of key=value & Segmentation xhr.open('get', '/ajax?name=Jack & age=18') xhr.onload = function () { console.log( xhr.responseText ) } xhr.send()

Send 1 post request with parameters

var xhr = new XMLHttpRequest

There is no need to splice anything after the request address

xhr.open('post', '/ajax')

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

The parameters carried by post are written directly in () after xhr. send ()

Collect your own data key=value Set your own request header xhr.setRequestHeadr('content-type', 'application/x-www-form-urlencoded') FormData Data Collection You don't need anything, just use FormData to collect data var fd = new FormData(DOM) Just take fd with you when you send the request

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 several parameters, how to use

Address

Parameter key=value or {name: 'Jack'} Successful callback function Expected data type returned by the background text: Do nothing and give you the result directly json: Step 1 JSON. parse () must be performed

$. post several parameters, how to use

Address Parameter key=value or {name: 'Jack'}, cannot send FormData Successful callback function Expected data type returned by the background

$. ajax several parameters, how to use

Is the configuration item options url: Request address method/type: Request Mode data: Carrying parameters dataType: Data type returned in the background days success: Successful Fallback error: Failed callback contentType: Used when sending FormData processData: Used when sending FormData

JSONP

$. ajax How do I send an jaonp request

dataType must be jsonp Mode must be get jsonp: Depends on the background

$.ajax({
  url: '/jsonp',
  data: {},
  dataType: 'jsonp',
  jsonp: 'callback',
  success (res) {
    console.log(res)
  }
})

Summarize