实现原生 AJAX 封装

紫微前端

于 2022-05-30 09:40:38 发布

阅读量414

点赞数

CC 4.0 BY-SA版权

分类专栏：前端知识加深文章标签： ajax javascript 前端

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/125040883

前端知识加深专栏收录该内容

510 篇文章 ¥39.90 ¥99.00

订阅专栏

本文详细探讨了如何实现原生AJAX封装，包括创建XMLHttpRequest对象、设置请求参数、发送请求、处理响应等内容，旨在帮助前端开发者更好地理解和应用AJAX技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

const ajax = {
  get(url, fn) {
    const xhr = new XMLHttpRequest()
    xhr.open('GET', url, true)
    xhr.onreadystatechange = function() {
      if(xhr.readyState === 4) {
        fn(xhr.responseText)
      }
    }
    xhr.send()
  },
  post(url, fn, data) {
    const xhr = new XMLHttpRequest()
    xhr.open('POST', url, true)
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
    xhr.onreadystatechange = function() {
      if(xhr.readyState === 4) {
        fn(xhr.responseText)
      }
    }
    xhr.send(data)
  }
}