原生js发起网络请求

网页常见的集中网络请求

  • XMLHttpRequest：
    • 是浏览器原生的网络请求对象，通过创建实例、设置请求方法与 URL、监听状态变化等多个步骤来发起和处理请求。例如先 new XMLHttpRequest() 创建实例，再用 open 方法设置请求细节，最后 send 发送请求，并通过 onreadystatechange 事件监听状态变化获取响应内容。
    • 特点是兼容性好，几乎所有浏览器都支持，但语法相对繁琐复杂，异步操作易出现回调地狱问题。
  • Fetch API：
    • 基于 Promise 的现代网络请求接口，使用 fetch 函数发起请求，像 fetch('url').then(response => response.json()).then(data => console.log(data)) 简单几步就能完成请求及处理响应数据（以解析 JSON 为例）。
    • 语法简洁，便于组织异步代码，能有效避免回调地狱，对 JSON 等数据格式有原生支持，但在老版本浏览器上可能需兼容处理，且对 HTTP 错误状态不会自动抛异常，需手动判断。
  • Axios：
    • 基于 Promise 的 HTTP 客户端库，可用于浏览器和 Node.js 环境，调用形式清晰（如 axios.get('url').then(response => console.log(response.data)).catch(error => console.log(error)) ），可方便配置请求头、设置超时等，还有请求和响应拦截器。
    • 功能强大，使用便捷，能轻松应对复杂请求场景及业务逻辑，不过需引入外部库文件，会增加项目资源体积。
  • jQuery 的 $.ajax ()：
    • 依托 jQuery 库，将请求操作整合在参数配置里（如配置 url、type、data、success、error 等参数）来发起请求，像 $.ajax({...}) 形式，在请求成功或失败时有对应回调函数处理结果。
    • 对于熟悉 jQuery 的开发者使用门槛低，与 jQuery 其他功能结合紧密，但随着轻量化开发趋势，其使用范围在缩小，且引入 jQuery 会有一定资源开销。

结合以上各个网络请求架构的特点综合考虑：优先选择 Axios。后续中大型项目主要生态为Vue， Vue 项目常用 Axios 配合使用，另外Axios代码简洁易维护，功能扩展性强，同时性能较高。

示例代码如下：以下代码主要逻辑为点击按钮，发起Axios请求，通过访问接口将返回得到的Json数据显示到网页下。

 

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Button Click Example</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <div id="postList"></div>
</head>
<body>
    <button id="btn2">使用Axios发送Get请求</button>
    <script>
    document.querySelector("#btn2").addEventListener("click",function (params) {
            var url = "https://jsonplaceholder.typicode.com/posts";
            var paramsdata = {};
            axios({
                url:url,
                method:'GET',
                params:paramsdata
            }).then(function (res) {
                const postListElement = document.getElementById('postList');
                res.data.forEach(post => {
                const postDiv = document.createElement('div');
                postDiv.innerHTML = `
                    <h3>${post.title}</h3>
                    <p>${post.body}</p>
                    <hr>
                `;
                postListElement.appendChild(postDiv);
                });
            }).catch(function (error) {
                console.log(error);
            });
        });
    </script>
</body>
</html>

 

posted @ 2024-12-27 16:47  西湖盗月  阅读(227)  评论(0)    收藏  举报