原生JS与jQuery实现Ajax请求的方法详解

原生 JavaScript

如何发送 GET 请求

实例化 XMLHttpRequest 对象
- 首先实例化 XMLHttpRequest 对象。
指定 HTTP 方法、URL 及异步标志
- 调用 open 方法，指定请求方法为 'get'，目标地址为 '/ajax'，第三个参数可选，用于设置是否异步（true 或 false）。
注册 load 事件以处理响应
- 监听 onload 事件，当请求完成时，通过 xhr.responseText 获取响应内容并打印到控制台。
- 或者监听 onreadystatechange 事件，当 xhr.readyState 等于 4（即请求完成）时，获取 xhr.responseText 并输出。
执行 send 方法发起请求
- 最后调用 send 方法，传入 null 以发送请求。


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

如何发送 POST 请求

实例化 XMLHttpRequest 对象
- 同样需要实例化 XMLHttpRequest 对象。
指定 HTTP 方法、URL 及异步标志
- 调用 open 方法，指定请求方法为 'post'，目标地址为 '/ajax'，第三个参数可选，用于设置是否异步（true 或 false）。
注册 load 事件以处理响应
- 监听 onload 事件，当请求完成时，通过 xhr.responseText 获取响应内容并打印到控制台。
- 或者监听 onreadystatechange 事件，当 xhr.readyState 等于 4（即请求完成）时，获取 xhr.responseText 并输出。
执行 send 方法发起请求
- 最后调用 send 方法，传入 null 以发送请求。


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

发送带有参数的 GET 请求

实例化 XMLHttpRequest 对象。
URL 后追加 ?key=value 参数，用 & 分隔
- 在 open 方法的第二个参数中直接拼接查询字符串，例如 '/ajax?name=Jack&age=18'，以问号开始，键值对形式，多个参数用 & 分隔。
监听 onload 事件，当请求完成时，通过 xhr.responseText 获取响应内容并打印到控制台。
调用 send 方法，无需传入参数，直接发送请求。

发送带有参数的 POST 请求

实例化 XMLHttpRequest 对象。

此时无需在请求地址后拼接任何内容。

调用 open 方法，指定请求方法为 'post'，目标地址为 '/ajax'。

监听 onload 事件，当请求完成时，通过 xhr.responseText 获取响应内容并打印到控制台。

POST 请求携带参数时，需将数据直接写在 send 方法的括号内。

手动构建 key=value 字符串数据
- 如需手动设置请求头，
- 可调用 xhr.setRequestHeader 方法，将 'content-type' 设置为 'application/x-www-form-urlencoded'。
使用 FormData 对象封装表单数据
- 若使用 FormData 对象收集数据，则无需手动设置请求头。
- 通过 new FormData(DOM元素) 创建 FormData 对象。
- 在发送请求时，将该 FormData 对象作为参数传入 send 方法即可。


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 中的 Ajax 用法

$.get 方法的参数及使用方式

第一个参数为请求地址。

第二个参数为数据，可以是 'key=value' 字符串形式，也可以是 { name: 'Jack' } 对象形式。
第三个参数为成功回调函数。
定义期望的响应数据类型
- 第四个参数为预期返回的数据类型，若指定为 'text'，则直接返回结果，不进行处理。
- 若指定为 'json'，jQuery 会自动执行 JSON.parse() 进行解析。

$.post 方法的参数及使用方式

第一个参数为请求地址。
第二个参数为数据，可以是 'key=value' 字符串形式，也可以是 { name: 'Jack' } 对象形式，但注意 jQuery 的 $.post 默认不支持直接发送 FormData 对象（需特殊配置）。
第三个参数为成功回调函数。
第四个参数为预期后台返回的数据类型。

$.ajax 方法的参数及使用方式

传递包含各项配置的 options 对象
- url：指定请求地址。
- method 或 type：指定请求方式（如 'GET' 或 'POST'）。
- data：携带的请求参数。
- dataType：指定后台返回的数据类型。
- success：请求成功时的回调函数。
- error：请求失败时的回调函数。
- contentType：发送 FormData 时需设置为 'multipart/form-data' 或保持默认由浏览器自动设置。
- processData：发送 FormData 时需设置为 false，防止 jQuery 自动序列化数据。

JSONP 跨域请求

如何使用 $.ajax 发送 JSONP 请求

必须将 dataType 设置为 'jsonp'。
请求方式必须为 'get'。
jsonp 参数用于指定后端回调函数的名称，具体值需根据后端接口定义来确定。


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

总结

本文介绍了 Ajax 在原生 JavaScript 和 jQuery 中的基本用法。如需了解更多相关内容，请查阅本站其他文章或继续浏览后续内容，感谢支持！

Ajax在原生JavaScript与jQuery中的完整用法指南