Ajax工作原理及关于XMLHttpRequest对象的应用

lixinlian1

已于 2024-03-13 00:09:03 修改

阅读量831

点赞数 24

文章标签： ajax okhttp 前端

于 2024-03-13 00:08:06 首次发布

本文链接：https://blog.csdn.net/lixinlian1/article/details/136666707

版权

onload 属性：使用 XMLHttpRequest 对象时，你可以定义一个回调函数，以便在请求收到答复时执行。

onreadystatechange 属性：

XMLHttpRequest 对象事件

基于JSONPlaceHolder为数据，对Ajax及XMLHttpRequest对象进行应用

JSONPlaceHolder数据

对Ajax及XMLHttpRequest对象进行应用,获取JSONPlaceHolder数据，在页面上显示获取的id和name

Ajax基本理解

Ajax是什么

AJAX（Asynchronous JavaScript And XML ）是一种使用 XMLHttpRequest 技术构建更复杂，动态的网页的编程实践。

注：AJAX 并非编程语言。

AJAX 仅仅组合了：

浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）

JavaScript 和 HTML DOM（显示或使用数据）。

作用：当你HTML页面的DOM发生改变的时候，AJAX 允许只更新一个 HTML 页面的部分 DOM，而无须重新加载整个页面。

因此Ajax非常适合异步编程，当网页的一部分正试图重新加载时，你的代码可以继续运行，而不是等待加载完成了之后在运行其它的代码，可以提升用户的体验感。

Ajax工作原理

XMLHttpRequest对象

XMLHttpRequest的作用

XMLHttpRequest 对象可用于在后台与 Web 服务器交换数据。这意味着可以更新网页的部分内容，而无需重新加载整个页面。

XMLHttpRequest 对象方法

例：

// 创建 XMLHttpRequest 对象

const xhttp = new XMLHttpRequest();



// 定义回调函数

xhttp.onload = function() {

  // 您可以在这里使用数据

}



// 发送请求

xhttp.open("GET", "ajax_info.txt");

xhttp.send();

XMLHttpRequest 对象属性

例：

onload 属性：使用 XMLHttpRequest 对象时，你可以定义一个回调函数，以便在请求收到答复时执行。

实例

xhttp.onload = function() {

  document.getElementById("demo").innerHTML = this.responseText;

}

xhttp.open("GET", "ajax_info.txt");

xhttp.send();

onreadystatechange 属性：

readyState 属性保存 XMLHttpRequest 的状态。

onreadystatechange 属性定义了一个回调函数，当 readyState 改变时执行该函数。

status 属性和 statusText 属性保存 XMLHttpRequest 对象的状态。

实例：当 readyState 为 4 且 status 为 200 时，响应就绪

function loadDoc() {

  const xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {

    if (this.readyState == 4 && this.status == 200) {

      document.getElementById("demo").innerHTML =

      this.responseText;

    }

  };

  xhttp.open("GET", "ajax_info.txt");

  xhttp.send();

}

XMLHttpRequest 对象事件

事件	触发条件
abort	当 request 被停止时触发，例如当程序调用 XMLHttpRequest.abort() 时。也可以使用 onabort 属性。
error	当 request 遭遇错误时触发。也可以使用 onerror 属性
load	XMLHttpRequest请求成功完成时触发。也可以使用 onload 属性。
loadend	当请求结束时触发，无论请求成功 ( load) 还是失败 (abort 或 error)。也可以使用 onloadend 属性。
loadstart	接收到响应数据时触发。也可以使用 onloadstart 属性。
progress	当请求接收到更多数据时，周期性地触发。也可以使用 onprogress 属性。
timeout	在预设时间内没有接收到响应时触发。也可以使用 ontimeout 属性。

详情请看：

XMLHttpRequest - Web API 接口参考 | MDN

基于JSONPlaceHolder为数据，对Ajax及XMLHttpRequest对象进行应用

JSONPlaceHolder数据

官方数据来源：https://jsonplaceholder.typicode.com/users

如何数据使用：

https://www.baidu.com/link?url=EolPNYK2uwkLx3XT2G0MU3_NizIRgH7JQqkLB52Cw2Aza7i3QeBLW7jOdbShGgdZ_135kqLP_AQauu8hfE2f7x_GSpbL6KQyFTziGOdqvSy&wd=&eqid=fa699a1700109f6d0000000665f01fc2

对Ajax及XMLHttpRequest对象进行应用,获取JSONPlaceHolder数据，在页面上显示获取的id和name

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Ajax with XMLHttpRequest Example</title>

</head>



<body>

    <button id="fetchDataBtn">点击获取数据</button>

    <div id="dataDisplay"></div>



    <script>

        document.getElementById('fetchDataBtn').addEventListener('click', function () {

            // 创建 XMLHttpRequest 对象 

            var xhr = new XMLHttpRequest();

            // 设置请求类型和URL 

            xhr.open('GET', 'https://jsonplaceholder.typicode.com/users', true);

            // 设置请求完成时的回调函数 

            xhr.onload = function () {

                if (xhr.status === 200) {

                    // 解析响应的JSON数据 

                    var users = JSON.parse(xhr.responseText);

                    // 获取显示数据的元素 

                    var dataDisplay = document.getElementById('dataDisplay');

                    // 清空之前的数据 

                    dataDisplay.innerHTML = '';

                    // 遍历用户数据，并显示id和name 

                    for (var i = 0; i < users.length; i++) {

                        var user = users[i];

                        var p = document.createElement('p');

                        p.textContent = 'ID: ' + user.id + ', Name: ' + user.name;

                        dataDisplay.appendChild(p);

                    }

                } else {

                    console.error('Error fetching data: ' + xhr.statusText);

                }

            };

            // 设置请求出错时的回调函数 

            xhr.onerror = function () {

                console.error('Network Error');

            };

            // 发送请求 

            xhr.send();

        });

    </script>

</body>



</html>

参考：AJAX 简介

XMLHttpRequest - Web API 接口参考 | MDN