封装自己的Ajax函数（手写一个简单的Ajax函数）

最新推荐文章于 2022-04-09 00:22:27 发布

LeBron0529

最新推荐文章于 2022-04-09 00:22:27 发布

阅读量730

点赞数 2

CC 4.0 BY-SA版权

文章标签： ajax javascript 前端

本文链接：https://blog.youkuaiyun.com/LeBron0529/article/details/121943680

本文详细介绍了Ajax的工作原理，包括创建XMLHttpRequest对象、发送GET/POST请求、处理onreadystatechange事件，以及如何手写一个基础的Ajax函数。通过实例演示了如何在网页中利用Ajax实现数据异步加载，无需刷新页面。

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

1.Ajax 的概念

在浏览器中，我们可以在不刷新页面的情况下，通过 Ajax 的方式去获取一些新的内容。

Ajax：Asynchronous Javascript And XML（异步 JavaScript 和 XML）。它并不是凭空出现的新技术，而是对于现有技术的结合。Ajax 的核心是 js 对象：XMLHttpRequest。

发送 Ajax 请求的五个步骤：

（1）创建异步对象，即 XMLHttpRequest 对象。

（2）使用 open 方法设置请求参数。open(method, url, async)。参数解释：请求的方法、请求的 url、是否异步。第三个参数如果不写，则默认为 true。

（3）发送请求：send()。

（4）注册事件：注册 onreadystatechange 事件，状态改变时就会调用。

如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。

（5）服务端响应，获取返回的数据。

onreadystatechange 事件

readyState：（存有 XMLHttpRequest 的状态。从 0 到 4 发生变化）

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status：

200: "OK"。
404: 未找到页面。

在 onreadystatechange 事件中，当 readyState 等于 4，且状态码为 200 时，表示响应已就绪。

2.手写AJax函数

//处理data参数   将其转化成查询字符串格式
function resolveData (data) {
  var arr = []
  for (let k in data) {
    arr.push(k + '=' + data[k])
  }
  return arr.join('&')
}
//封装自己的Ajax函数
function ajax (options) {
  //异步对象
  var xhr = new XMLHttpRequest()
  //调用resolveData函数，将数据转化成查询字符串格式
  var qs = resolveData(options.data)
  //判断发起请求的类型
  if (options.methods.toUpperCase() === 'GET') {
  //设置请求参数
    xhr.open(options.methods, options.url + '?' + qs)
  //发送请求
    xhr.send()
  } else if (options.methods.toUpperCase() === "POST") {
    xhr.open(options.methods, options.url)
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    xhr.send(qs)
  }
  //监听onreadystatechange事件
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var result = JSON.parse(xhr.responseText)
      options.success(result)
    }
  }
}

3. 引入手写的Ajax

<script src="./ajax.js"></script>

4.调用手写函数

<script>
  //调用自定义的函数发起Ajax请求
  ajax({
    methods: 'GET',
    url: "url路径",
    data: { },
    success: function (res) {
      console.log(res);
    }
  })
</script>