使用原生的JavaScript实现ajax请求（ajax实现原理)

最新推荐文章于 2025-03-21 10:41:12 发布

SpringRolls

最新推荐文章于 2025-03-21 10:41:12 发布

阅读量459

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/SpringRolls/article/details/110232284

版权

前端专栏收录该内容

56 篇文章

订阅专栏

本文详细介绍了Ajax技术的工作原理及其核心组成部分XMLHttpRequest对象。解释了如何利用Ajax实现网页局部刷新，包括发送GET和POST请求的方式，以及如何处理服务器响应。

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

Ajax 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

XMLHttpRequest 对象

XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest。

var xhr = new XMLHttpRequest();  //创建XMLHttqRequest
var url = 'https://bbin.com';
xhr.onreadystatechange = function () {  //监听状态码的变化，每次变化均执行
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {  //服务端 状态码
            console.log(xhr.responseText);  //服务器返回的响应文本
        } else {
            console.error(xhr.statusText);  //状态码的文本描述，如200的statusText是ok
        }
    }
}

xhr.open('GET', url, true);  //GET请求，初始化请求参数，还没发送请求，true表示异步
xhr.send(null);  //向服务器发送请求，但是不带有数据发送过去，一般在get方式发送时候多使用这个方式

1. open(method, url, async) 方法需要三个参数:

　 method：发送请求所使用的方法（GET 或 POST）；

与POST相比，GET更简单也更快，并且在大部分情况下都能用；然而，在以下情况中，请使用POST请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

GET请求和POST请求的区别：

GET产生1个TCP数据包；POST产生2个TCP数据包
POST比GET安全性要高，因为GET参数直接暴露在URL上，所以不能用来传递敏感信息
GET通过URL传递参数，多个参数以&连接；POST参数放在Request body中
GET请求会被缓存；而POST请求不会，除非手动设置

GET请求长度最多1024kb；POST对请求数据没有限制

　url：规定服务器端脚本的 URL(该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）)；

　async：规定应当对请求进行异步（true）或同步（false）处理；true是在等待服务器响应时执行其他脚本，当响应就绪后对响应进行处理；false是等待服务器响应再执行。

2. send() 方法可将请求送往服务器。

3. onreadystatechange：存有处理服务器响应的函数，每当 readyState 改变时，onreadystatechange 函数就会被执行。

4. readyState：存有服务器响应的状态信息。