关于原生XMLHttpRequest的原理及使用细节

最新推荐文章于 2024-07-26 16:20:18 发布

rootKQ

最新推荐文章于 2024-07-26 16:20:18 发布

阅读量845

点赞数

文章标签： ajax 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/rootKQ/article/details/129694862

版权

Ajax是一种用于客户端和服务器端异步通信的技术，无需刷新整个页面即可更新内容。它基于JavaScript和XMLHttpRequest对象，通过发送异步请求与服务器交换数据。当请求完成时，可通过回调函数处理响应，提高Web应用性能和用户体验。

摘要由CSDN通过智能技术生成

Ajax（Asynchronous JavaScript and XML）是一种用于客户端和服务器端通信的技术，它可以实现无需刷新整个页面而更新局部内容。与传统的Web应用程序不同，Ajax通过异步通信实现与Web服务器的数据交换，能有效提高Web应用程序的性能和用户体验。Ajax技术是基于JavaScript和XMLHttpRequest对象的。

Ajax工作原理：

当用户与Web应用程序发生交互时，Ajax首先使用XMLHttpRequest对象向Web服务器发送一个异步请求，而不会使整个页面重新加载。在JavaScript中通过XMLHttpRequest对象来创建HTTP请求，然后异步地将请求发送给Web服务器。XMLHttpRequest对象的生命周期具有多种状态，初始状态为0，当对象状态发生变化时，会触发onreadystatechange事件。同时，开发者可以指定回调函数，以便在不同状态下执行不同的代码。

当XMLHttpRequest对象状态变化时，会根据不同的状态值执行不同的操作。其中，readyState表示XMLHttpRequest对象的状态，status表示服务器响应的状态。当XMLHttpRequest对象在调用open方法和send方法之前准备发送请求时，readyState状态值为1（已调用open方法），2（已调用send方法并已接收响应头），3（正在接收响应体），4（已完成并接收到响应）。

在响应头和响应体接收完毕后，可以通过xhr.responseText、xhr.responseXML等属性来获取服务器的响应内容。

总的来说，Ajax的工作原理就是通过XMLHttpRequest对象发起异步请求，进行数据的交换与处理，从而实现动态的局部更新。

XMLHttpRequest对象的属性、方法和事件：

XMLHttpRequest对象是实现异步数据交换的关键。它有许多属性、方法和事件，下面是一些常用的：

1.属性

onreadystatechange: 当XMLHttpRequest对象状态发生变化时被触发，通常会指定一个回调函数。

readyState：表示XMLHttpRequest对象当前的状态，包括以下五种状态：

0 （未初始化）：表示XMLHttpRequest对象已创建，但open()方法还未被调用。

1 （正在载入）：表示open()方法已经被调用，但send()方法还未被调用。

2 （已载入，响应头信息已经被收到）：表示send()方法已经被调用，并已接收到响应头信息。

3 （交互中）：表示正在接收响应体的数据。

4 （完成）：已经接收到完整的响应数据，并可以处理该响应。

status: HTTP状态码，表示服务器响应的状态。

response: 响应体内容。

2.方法

open(method, url, async): 初始化XMLHttpRequest对象以进行请求。

send(data): 向Web服务器发送请求，并获取服务器响应。

setRequestHeader(header, value): 设置请求头信息。

3.事件

onreadystatechange: 当XMLHttpRequest对象的状态变化时被触发。

onabort: 当请求被中断时触发。

onerror: 当请求发生错误时触发。

onload: 当请求成功完成时触发。

HTML代码实例如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo2</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    th {
        width: 100px;
        border: solid 1px;
    }
</style>
<script>
    //json-server地址
    var url = "https://jsonplaceholder.typicode.com/posts";
    window.onload = function () {
        getAllData();
    }
    //获取全部
    function getAllData() {
        //初始化xhr对象
        var xhr = new XMLHttpRequest();
        //添加监听事件
        xhr.addEventListener("load", () => {
            //处理返回信息
            if (xhr.status === 200) {
                //在正常返回时动态加载数据页面
                initData(JSON.parse(xhr.response));
            } else {
                //失败
                console.info(`error ${xhr.status}`);
            }
        });
        //建立http的链接
        xhr.open("GET", url);
        //发送数据
        xhr.send();
    }
    //渲染页面
    function initData(data) {
        //获取dom节点
        var initData = document.getElementById("initData");
        //动态拼接页面元素
        var html = "";
        for (var item of data) {
            html += `<div value="${item.id}" ><h2>${item.title}<h2></div>`;
            html += `<div value="${item.id}">${item.body}</div>`;
        }
        //挂载页面dom
        initData.innerHTML = html;
    }
</script>

<body>
    <div id="initData"></div>
</body>

</html>

效果图如下：