实现ajax局部异步刷新的基本步骤

最新推荐文章于 2025-02-23 16:00:24 发布

webshitian

最新推荐文章于 2025-02-23 16:00:24 发布

阅读量1.1k

点赞数

分类专栏： web前端开发 js

本文链接：https://blog.youkuaiyun.com/qq_42943107/article/details/90999426

版权

web前端开发同时被 2 个专栏收录

20 篇文章

订阅专栏

8 篇文章

订阅专栏

本文详细介绍了Ajax的定义及其实现步骤，包括创建XMLHttpRequest对象、准备并发送网络请求及指定回调函数。通过一个具体示例展示了如何使用Ajax接收服务器端返回的信息，并实现了页面的局部异步刷新。

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

ajax的定义：Ajax是一个异步的javascript请求，用来获取后台服务端的数据，而不是整个页面进行跳转。
实现ajax的四个步骤：
1.创建XMLHttpRequest对象
2.准备发送网络请求
3.开始发送网络请求
4.指定回调函数

我们先新建一个给ajax校验的php文件。内容如下所示：

<?php

echo "<div style ='color:red;'>恭喜！该名字试用可以显示</div>";
?>

然后我们编写html文件里实现ajax的四个步骤代码，如下图所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        /*a
        jax对象的成员

        属性：
            responseText:以字符串形式接收服务器端返回的信息
            readyState:
                0:刚创建ajax对象
                1：已经调用open方法
                2：已经调用send方法
                3：已经返回部分数据
                4：请求完成，数据返回完整
             onreadystatechange:事件，当ajax状态readyState发生变化的时候要触发执行
                为了获得较多的状态，最好在创建好ajax对象后就设置
                最多可以感知1/2/3/4四种状态
        方法：
            open()创建新的http请求
            send()把请求发送给服务器
        */

        function fi(){
            //ajax发起请求 并接收返回的信息
            //1.创建对象
            var xhr = new XMLHttpRequest();
            //4.给ajax设置事件
            xhr.onreadystatechange = function () {
                //console.log(xhr.readyState);
                if(xhr.readyState ==4){
                    //把服务器端返回的信息显示在页面上
                    document.getElementById('result').innerHTML = xhr.responseText;
                }

            }
            //2.创建新的http请求
            xhr.open('get','./03.php');
            //3.发送请求
            xhr.send(null);


        }
    </script>
    <style type="text/css">

    </style>
</head>
<body>
    <h2>ajax接收服务器端返回的信息</h2>
    <input type="button" value="触发" onclick="fi()"/>
    <div id="result"></div>
</body>
</html>