Ajax——XMLHttpRequest的基本使用

XMLHttpRequest对象方法描述

1.创建一个ajax对象

// IE9及以上
const xhr = new XMLHttpRequest()
// IE9以下
const xhr = new ActiveXObject('Mricosoft.XMLHTTP')

创建成功后即可用创建的xhr对象进行ajax请求

2.配置链接信息

XMLHttpRequest 对象属性描述(用于和服务器交换数据。)

const xhr = new XMLHttpRequest()
// xhr 对象中的 open ⽅法是来配置请求信息的
xhr.open('get', './data.php')
// 第⼀个参数是本次请求的请求⽅式 
// 第⼆个参数是本次请求的 url

3.发送请求

const xhr = new XMLHttpRequest() 
xhr.open('get', './data.php') 
// 使⽤ xhr 对象中的 send ⽅法来发送请求 
xhr.send()

4.监听事件

• 在 ajax 对象中有一个事件，叫做 readyStateChange 事件。
• 这个事件是专⻔用来监听 ajax 对象的 readyState 值改变的的行为。
• 也就是说只要 readyState 的值发生变化了，那么就会触发该事件。
• 所以我们就在这个事件中来监听 ajax 的 readyState 是不是到 4 了。

const xhr = new XMLHttpRequest() 
xhr.open('get', './data.php') 
xhr.send()
// 每次 readyState 改变的时候都会触发该事件
// 我们就在这里判断 readyState 的值是不是到 4了
// 并且 http 的状态码是不是 200 ~ 299
if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) {
// 这里表示验证通过
// 我们就可以获取服务端给我们响应的内容了 }
}

了解readyState属性

用来表示Ajax请求所处的状态

当一个 ajax 请求的全部过程中，只有当 readyState === 4 的时候，我们才可以正常使用服务端给我们的数据

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

• get 请求的参数就直接在 url 后面进行拼接就可以

const xhr = new XMLHttpRequest()
// 直接在地址后面加一个 ?，然后以 key=value 的形式传递
// 两个数据之间以 & 分割
xhr.open('get', './data.php?a=100&b=200')
xhr.send()
if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) {
console.log(xhr.responseText)
}

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

• post 请求的参数是携带在请求体中的，所以不需要再 url 后面拼接

const xhr = new XMLHttpRequest()
xhr.open('get', './data.php')
//post要设置Content-Type属性(固定写法)
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send(要发送的数据)
if (xhr.readyState === 4 && /^2\d{2|$/.test(xhr.status)) {
console.log(xhr.responseText)
}