Detailed examples of ajax usage in js and jQuery

Native JS

How to send a get request

• Create an ajax object
  • var xhr = new XMLHttpRequest()
• Set the request method and request address [, whether asynchronous]
  • xhr.open('get', '/ajax'[, true or false])
• Prepare to receive request body
  • xhr.onload = function () { console.log(xhr.responseText) }
  • xhr.onreadystatechange = function () { if (xhr.readyState === 4) { console.log( xhr.responseText ) } }
• Send Request
  • xhr.send(null)
    

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

How to send a post request

• Create an ajax object
  • var xhr = new XMLHttpRequest()
• Set the request method and request address [, whether asynchronous]
  • xhr.open('post', '/ajax'[, true or false])
• Prepare to receive request body
  • xhr.onload = function () { console.log(xhr.responseText) }
  • xhr.onreadystatechange = function () { if (xhr.readyState === 4) { console.log( xhr.responseText ) } }
• Send Request
  • xhr.send(null)

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

Send a get request with parameters

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

Send a post request with parameters

var xhr = new XMLHttpRequest

No need to add anything after the request address

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

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

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

• Collect data key=value by yourself
  • Set the request header yourself
  • xhr.setRequestHeadr('content-type', 'application/x-www-form-urlencoded')
• FormData collects data
  • Nothing is needed, just use FormData to collect data
  • var fd = new FormData(DOM)
  • When sending a request, just bring fd over.

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

How to use several parameters of $.get

address

• Parameter key=value or { name: 'Jack' }
• Success callback function
• The expected data type returned by the backend
  • text ： Do nothing and give you the result directly
  • json: will definitely execute a JSON.parse() step

$.post several parameters, how to use them

• address
• Parameter key=value or { name: 'Jack' }, FormData cannot be sent
• Success callback function
• The expected data type returned by the backend

$.ajax several parameters, how to use

• It is the configuration item options
  • url: request address
  • method/type: request method
  • data: carries parameters
  • dataType: The data type returned by the backend
  • success: successful callback
  • error: Failed callback
  • contentType: used when sending FormData
  • processData: used when sending FormData

JSONP

How to send jaonp request using $.ajax

• dataType must be jsonp
• The method must be get
• jsonp: Determined by the background
  

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

Summarize

This is the end of this article about the usage of ajax in js and jQuery. For more information about the usage of ajax in js and jQuery, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!