实现原生JS的AJAX请求

原创已于 2022-08-17 11:17:27 修改 · 628 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2022-08-17 10:55:52 首次发布

本文详细介绍了AJAX的概念，包括其作为异步请求技术的特点，如何通过XMLHttpRequest实现发送GET和POST请求，以及监听请求状态和接收响应数据的过程。重点展示了原生AJAX的实现和关键步骤。

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

AJAX概念

（1）异步请求技术。

（2）无需刷新页面，通过ajax向后台发送请求并等响应后呈现到页面上。

使用xhr发送AJAX请求步骤

（1）创建XMLHttpRequest实例；

（2）发送HTTP实例

（3）监听请求

（4）接收服务器返回的数据

原生AJAX

const ajax = {
  get(url,func){
    //创建异步对象
    const xhr = new XMLHttpRequest()
    //第一个参数是请求类型，第二个参数是请求的url（可以带参数），第三个参数异步与否
    //第三个参数:true为异步，请求和后续代码同时执行；false为同步，等待请求完成后执行后续代码
    //建立连接
    xhr.open('GET',url,true)
    //监听请求
    xhr.onreadystatechange = function(){
      //监听请求进度
      if(xhr.readyState === 4) {
        //xhr.responseText存储着服务器返回客户端的数据，数据是JSON格式的字符串
        func(xhr.responseText)
      } 
    }
    //发送请求
    xhr.send()
  }
  post(url,data,func){
    const xhr = new XMLHttpRequest()
    xhr.open('POST',url,true)
    //设置Content-type属性
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
    //监听onreadystatechange事件
    xhr.onreadystatechange = function(){
      if(xhr.readyState === 4){
        func(xhr.responseText)
      }
    }
    //发送请求
    xhr.send(data)
  }
}

步骤详解

XMLHttpRequest实例

现代每个浏览器都有内建的对象：XMLHttpRequest 创建一个实例对象: const xhr = new XMLHttpRequest()

发送xhr实例

向服务器发送请求，需要用到XMLHttpRequest的open方法和send方法

//对请求的类型，url和异步与否进行规定
open(method,url,async)：
    method:请求的类型
    url:文件在服务器的位置
    async：异步true，同步false
send()：
//GET请求中，send无需带参数
//POST请求中，send需要带参数，也就是提交的数据

监听请求

xhr.readyState 的值表明了请求进度；

0    =>未初始化，还没有调用send()方法；
1    =>载入；已调用send()方法，正在发送请求；
2    =>载入完成；send()执行完成，已经接收到全部的响应内容；
3    =>交互；正在解析响应内容；
4    =>完成；响应内容解析完成，可以在客户端调用了；

xhr.status 获取服务器响应的状态码

1开头：信息性状态码，表示接收的请求正在处理
2开头：成功状态码，表示请求正常处理
3开头：重定向状态码，表示需要附加操作来完成请求
4开头：客户端错误状态，表示服务器无法处理请求
5开头：服务器错误状态，表示服务器处理请求出错

接收数据

responseText：获得字符串形式的响应数据
responseXML：获得XML形式的响应数据

上面的例子中传入了func回调函数，也就是自己定义的方法。怎么操作响应返回的数据就在该方法内写。

个人笔记