ajax请求步骤与实例（原生）

最新推荐文章于 2025-03-17 00:25:29 发布

冰派甜心

最新推荐文章于 2025-03-17 00:25:29 发布

阅读量338

点赞数

分类专栏： js 文章标签： ajax

本文链接：https://blog.youkuaiyun.com/qq_37906822/article/details/98723951

版权

js 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了AJAX请求的五个步骤，包括创建XMLHttpRequest对象、设置请求参数、发送请求、检测服务器状态以及获取响应数据。特别强调了GET请求的实现，通过原生JavaScript进行AJAX操作，解释了readyState和status的状态含义，帮助读者深入理解AJAX通信过程。

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

AJAX的请求步骤

（1）创建异步对象XMLHttpRequest

（2）请求数据准备，设置请求参数（请求的方法、路径）：调用XMLHttpRequest对象的open方法

1）（无参）get方法send的参数为null

2）（有参）post方法send的参数为路径，需要在发送之前设置请求头对参数进行解析

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

（3）发送：调用XMLHttpRequest对象的send方法

（4）检测服务器状态：为XMLHttpRequest对象增加onreadyStatechange函数，对服务器状态进行检测（当状态值readyState等于4，状态码status等于200则说明服务器正常运行并返回响应数据）

1）是否完成：XMLHttpRequest对象的readyState==4

2）是否可用：XMLHttpRequest对象的status==200

readyState（状态值）有五种可能的值：

0 (未初始化)： (XMLHttpRequest)对象已经创建，但还没有调用open()方法。

1 (载入)：已经调用open() 方法，但尚未发送请求。

2 (载入完成)：请求已经发送完成。

3 (交互)：可以接收到部分响应数据。

4 (完成)：已经接收到了全部数据，并且连接已经关闭。

status（状态码）检测的是服务器的处理状态 https://www.runoob.com/http/http-status-codes.html

状态码是由3个数字组成，分别表示不同状态类型（5种）

1. 1XX 表示服务器正在处理中；

2. 2XX 表示请求成功，比如200；

3. 3XX 重定向，表示请求不成功，客户必须采取处理方式；304 303

4. 4XX 客户端错误，表示请求的地址或者文档不存在，比如404；

5. 5XX 服务端或者后台出现问题，比如500,503……

（5）响应主体返回的文本：XMLHttpRequest对象的reponseText属性

实例

一、原生方法（常考）

1、get方法进行AJAX请求

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <p>userName: <input type="text" name="" id="username"></p>

    <p>password: <input type="password" name="" id="password"></p>

    <button id="login">登录</button>

    <p id="txt"></p>

    <script>

        login.onclick=function(){

            var xhr=new XMLHttpRequest();

            xhr.open('get','test.php?user='+username.value+'&pass='+password.value);

            xhr.send(null);

            xhr.onreadystatechange=function(){

                if (xhr.readyState==4) {

                    if (xhr.status==200) {

                       txt.innerHTML=xhr.responseText;

                   }

                }

            }

        }

    </script>

</body>

</html>