手写原生Ajax请求

注意

实现一个原生的Ajax请求

一个完整的AJAX请求一般包括以下步骤：

创建XMLHttpRequest对象
open方法初始化一个请求
send发送数据
监听readyState属性变化

XMLHttpRequest.readyState (opens new window)

0: <code>UNSENT</code> 未调用open
1: <code>OPENED</code> open已经被调用
2: <code>HEADERS_RECEIVED</code> send已经被调用, and headers and status are available.
3: <code>LOADING</code> 下载中
4: <code>DONE</code>

答: Get请求：

var xhr = new XMLHttpRequest()
xhr.open('get', 'https://api.github.com/users/0zcl')
xhr.send()
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.response)
  }
}

1
2
3
4
5
6
7
8

Post请求

var xhr = new XMLHttpRequest()
xhr.open('post', 'http://gw-mg-test.61info.cn/manager-api/o/paint/material/create/paintMaterialInfo/list.json')
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
xhr.setRequestHeader('Authorization', 'eyJhbGciOiJIUzI1NiJ9.eyJkYXRhIjoiWGcrY0NySlZ0eEg5N0FqQzVJUEV2bVhySFQ2YTY2T0cxVk5uTUdNK3R1Y2pVVU9nSTExQVRPaFZLU1N3VjhIb1VpRUh5WUp4SkRZNnBvendVRjIvYkNGQ0ZiRmhIM1JOR0VjR1RiOFl1SGN3SnBLLzBFRHBXRmVnMU1KcStGekVLejltSmR1Y3dPSXRJcmJvK3I2Q1lwNmtQUCtqRVlIQWdTVXl1UTBocVdiMDBRT0RHY0NzMGVHNzZsam1tN1BDb1RVRXRpL3VhcWZxT0Qxb3IxaktHbDhMeTA2YzZheldsM1RIcmRyQTJudz0iLCJleHAiOjE2MzY3NzI4Nzd9.cf4fVe9fIc0-hkGiQHq3zqcWjfKsGJrw7uK-EPuSrc0')
xhr.send('pageSize=6&page=1')
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.response)
  }
}

1
2
3
4
5
6
7
8
9
10

知识点：熟悉XMLHttpRequest (opens new window), 顺手发现了一篇知乎文章：前端面试时总让写原生Ajax真的很有意义吗？ (opens new window)

编辑

上次更新: 2025/07/17, 07:17:44

← 手写图片懒加载手写AOP装饰函数→