阅读 412

ajax 在 js 中和 jQuery 中的用法

这是我参与8月更文挑战的第16天,活动详情查看:8月更文挑战

原生 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)
      }
    })
    复制代码

往期精彩推荐

前端性能优化实战

聊聊让人头疼的正则表达式

获取文件blob流地址实现下载功能

Git 相关推荐

通俗易懂的 Git 入门

git 实现自动推送

我在工作中是如何使用 git 的

面试相关推荐

前端万字面经——基础篇

前端万字面积——进阶篇

更多精彩详见:个人主页

文章分类
前端
文章标签