前端发起网络请求的几种常见方式（XMLHttpRequest、FetchApi、jQueryAjax、Axios）

摘要

前端发起网络请求的几种常见方式包括：

XMLHttpRequest (XHR)： 这是最传统和最常见的方式之一。它允许客户端与服务器进行异步通信。XHR API 提供了一个在后台发送 HTTP 请求和接收响应的机制，使得页面能够在不刷新的情况下更新部分内容。

Fetch API： Fetch API 是一种新的 Web API，提供了一种更强大、更灵活的方式来发起网络请求。它使用 Promise对象，简化了对网络请求的处理，并且提供了更友好的 API。

jQuery Ajax： jQuery 是一个流行的 JavaScript 库，其中包含了简化 Ajax 调用的方法。通过 jQuery 的 Ajax 方法，可以方便地发送各种类型的 HTTP 请求，并处理响应。

Axios： Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境。它提供了更简单的 API，并支持在浏览器中使用XMLHttpRequest 或在 Node.js 中使用 http 模块。在一些大型框架中会被使用，例如Vue.js。

示例

            前端请求服务器的几种方式                    h2 {            text-align: center;        }        #app {            width: 500px;            margin: 30px auto;        }        #ret {            width: 500px;            height: 100px;            background: #272822;            color: #fff;            padding: 10px;            font-size: 14px;        }        button {            padding: 10px 15px;            background: #39f;            border: none;            color: #fff;            cursor: pointer;        }            
前端请求服务器的几种方式
                    XMLHttpRequest                        FetchApi                        jQueryAjax                        Axios                                                        // XMLHttpRequest        function XHR() {                        document.querySelector('#ret').innerHTML = 'XMLHttpRequest请求中...';                        // 创建 XMLHttpRequest 对象            var xhr = new XMLHttpRequest();                        // 指定请求的方法和 URL            xhr.open('GET', './getData.php?type=XMLHttpRequest', true); // true 表示异步请求                        // 注册事件处理程序，以便在请求的不同阶段获取相应的响应            xhr.onreadystatechange = function() {                                if (xhr.readyState === XMLHttpRequest.DONE) { // 请求完成                                    if (xhr.status === 200) {                                                // 请求成功                        console.log(JSON.parse(xhr.responseText)); // 输出响应数据                        document.querySelector('#ret').innerHTML = xhr.responseText;                    } else {                        console.error('请求失败: ' + xhr.status); // 输出错误信息                        document.querySelector('#ret').innerHTML = '请求失败';                    }                }            };                        // 发送请求            xhr.send();        }                // FetchApi        function FetchApi() {                        document.querySelector('#ret').innerHTML = 'FetchApi请求中...';                        // 使用 fetch() 函数创建一个请求对象            fetch('./getData.php?type=FetchApi')            .then(function(response) {                                // 检查响应是否成功                if (!response.ok) {                    throw new Error('请求失败: ' + response.status);                }                // 解析响应数据为 JSON 格式并返回                return response.json();            })            .then(function(data) {                                // 处理响应数据                console.log(data);                document.querySelector('#ret').innerHTML = JSON.stringify(data);            })            .catch(function(error) {                                // 处理错误                console.error('发生错误: ', error);                document.querySelector('#ret').innerHTML = JSON.stringify(error);            });        }                // jQuery Ajax        function jQueryAjax() {                        $.ajax({                url: './getData.php?type=jQueryAjax',                method: 'GET',                dataType: 'json', // 响应数据类型                beforeSend: function(xhr) {                                        // 在发送请求之前执行的操作，比如设置请求头                    $('#ret').html('jQueryAjax请求中...')                },                success: function(response) {                                        // 输出响应数据                    console.log(response);                    $('#ret').html(JSON.stringify(response))                },                error: function(xhr, status, error) {                                        // 输出错误信息                    console.error('请求失败: ' + status);                     $('#ret').html('请求失败')                }            });        }                // Axios        function Axios() {                        document.querySelector('#ret').innerHTML = 'Axios请求中...';                        axios.get('./getData.php?type=Axios')            .then(function(response) {                                // 输出响应数据                console.log(response.data);                document.querySelector('#ret').innerHTML = JSON.stringify(response.data);            })            .catch(function(error) {                                // 输出错误信息                console.error('请求失败:', error);                document.querySelector('#ret').innerHTML = JSON.stringify(error);            });        }    

getData.php

演示

https://demo.likeyunba.com/web_http/

作者

TANKING