首页 前端知识 前端发起网络请求的几种常见方式(XMLHttpRequest、FetchApi、jQueryAjax、Axios)

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

2024-05-07 13:05:02 前端知识 前端哥 955 294 我要收藏

摘要

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

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

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

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

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

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">
    <title>前端请求服务器的几种方式</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script>
    <style>
        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;
        }
    </style>
</head>
<body>
    
    <h2>前端请求服务器的几种方式</h2>
    <div id="app">

        <!--XMLHttpRequest-->
        <button onclick="XHR()">XMLHttpRequest</button>
        
        <!--FetchApi-->
        <button onclick="FetchApi()">FetchApi</button>
        
        <!--jQueryAjax-->
        <button onclick="jQueryAjax()">jQueryAjax</button>
        
        <!--Axios-->
        <button onclick="Axios()">Axios</button>
        
        <!--请求结果-->
        <p id="ret"></p>
    
    </div>
    
    <script>
        
        // 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);
            });
        }

    </script>
</body>
</html>

getData.php

<?php
    
    header("Content-type:application/json");
    sleep(1);
    echo json_encode(array('code' => 0,'msg' => $_GET['type'] . '请求成功'), JSON_UNESCAPED_UNICODE);

?>

演示

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

在这里插入图片描述

作者

TANKING

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7283.html
标签
okhttp
评论
发布的文章

exceljs

2024-05-11 10:05:00

Java研学-JSON与AJAX

2024-05-10 22:05:37

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!