Ajax是什么，如何实现?

码农babyQ

已于 2023-10-22 17:45:30 修改

阅读量36

点赞数

分类专栏： Ajax 文章标签：前端

于 2023-10-15 19:22:42 首次发布

本文链接：https://blog.csdn.net/qq_59068526/article/details/133846153

版权

Ajax 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.基本概念

2.实现步骤

1.基本概念

Ajax是创建交互式网页应用的网页开发技术。

在不重新加载整个网页的前提下，与服务器交换数据并更新部分内容。

2.实现步骤

通过XmlHttpRequest对象向服务器发送异步请求，然后从服务器拿到数据，最后通过Js操作Dom的形式更新页面。

创建XmlHttpRequest对象xhr。

通过xhr里的open()方法和服务器建立链接。

构建请求所需的数据，并通过xhr对象中的send()方法发送给服务器。

通过xhr对象的onreadystatechange()事件监听服务器和你的通信状态。

接收并处理服务器响应的数据结果。

把处理的数据更新到HTML页面上。

下面是一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX GET 请求</title>
    <style>
        #result{
            width:200px;
            height:100px;
            border:solid 1px #000000;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button> 
    <div id="result"></div>

    <script>
        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById('result');
        //绑定事件
        btn.onclick = function(){
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化（设置请求的方法）和url
            xhr.open('GET','http://127.0.0.1:8000/server?a=100&&b=200&&c=300');
            //3.发送
            xhr.send();
            //4.事件绑定（处理服务端返回的结果）
            //on    当...时候
            //readystate 是 xhr 对象中的属性，表示状态 0 1 2 3 4  
            //change    改变 的时候触发
            xhr.onreadystatechange = function(){
                //判断（服务端返回了所有的结果）
                if(xhr.readyState === 4){
                    //判断响应状态码    200 404 403 401 500
                    //2xx都表示成功
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理结果  行 头 空行 体
                        //1.响应行
                        // console.log(xhr,status);    //状态码
                        // console.log(xhr.statusText); //状态字符串
                        // console.log(xhr.getAllResponseHeaders()); //所有响应头
                        // console.log(xhr.response);  //响应体
    
                        //设置result的文本
                        result.innerHTML = xhr.response;
                    }else{
                        
                    }
                }
            }
        }
    </script>
</body>
</html>