ajax原生的js讲解和jquery讲解

原生 JS

怎么发送一个 get 请求

1. 创建一个 ajax 对象

   • var xhr = new XMLHttpRequest()

2. 设置请求方式和请求地址[，是否异步]

   • xhr.open('get', '/ajax'[, true or fasle])

3. 准备接受请求体

   • xhr.onload = function () { console.log(xhr.responseText) }
   • xhr.onreadystatechange = function () { if (xhr.readyState === 4) { console.log( xhr.responseText ) } }

4. 发送请求

   • xhr.send(null)

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

     ​

怎么发送一个 post 请求

1. 创建一个 ajax 对象

   • var xhr = new XMLHttpRequest()

2. 设置请求方式和请求地址[，是否异步]

   • xhr.open('post', '/ajax'[, true or fasle])

3. 准备接受请求体

   • xhr.onload = function () { console.log(xhr.responseText) }
   • xhr.onreadystatechange = function () { if (xhr.readyState === 4) { console.log( xhr.responseText ) } }

4. 发送请求

   • xhr.send(null)

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

   ​

发送一个带有参数的 get 请求

1. var xhr = new XMLHttpRequest
2. 直接在请求地址后面拼接参数，? 开始，key=value 的形式，多个参数之间以 & 分割
   • xhr.open('get', '/ajax?name=Jack&age=18')
3. xhr.onload = function () { console.log( xhr.responseText ) }
4. xhr.send()

发送一个带有参数的 post 请求

1. var xhr = new XMLHttpRequest

2. 不需要在请求地址后面拼接任何内容

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

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

4. post 方式携带参数是直接写在 xhr.send() 后面的 () 里面

   1. 自己收集数据 key=value
      • 自己设置请求头
      • xhr.setRequestHeadr('content-type', 'application/x-www-form-urlencoded')
   2. 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 几个参数，怎么使用

1. 地址
2. 参数 key=value 或者 { name: 'Jack' }
3. 成功的回调函数
4. 预期后台返回的数据类型
   1. text ： 什么都不做，直接给你结果
   2. json ： 必定会执行一步 JSON.parse()

$.post 几个参数，怎么使用

1. 地址
2. 参数 key=value 或者 { name: 'Jack' }， 不能发送 FormData
3. 成功的回调函数
4. 预期后台返回的数据类型

$.ajax 几个参数，怎么使用

1. 就是配置项 options
   1. url： 请求地址
   2. method/type: 请求方式
   3. data： 携带参数
   4. dataType： 后台返回的数据类型天
   5. success： 成功的回掉
   6. error： 失败的回调
   7. contentType: 发送 FormData 的时候使用的
   8. processData： 发送 FormData 的时候使用的

JSONP

$.ajax 怎么发送 jaonp 请求

1. dataType 必须是 jsonp

2. 方式必须是 get

3. jsonp： 根据后台来决定

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

   ​