Ajax详解

已于 2025-06-06 17:03:20 修改
阅读量1k 收藏 15
点赞数 11
CC 4.0 BY-SA版权
分类专栏： web前端 文章标签： ajax 前端
于 2025-06-06 17:01:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_linsir/article/details/148477908

1、什么是Ajax

        Ajax（Asynchronous JavaScript and XML）是一种用于创建动态网页应用的技术，允许网页在不重新加载整个页面的情况下与服务器进行异步交互。

2、组成部分

        1.JavaScript: 用于实现网页的动态行为和与服务器的异步通信。

        2.XMLHttpRequest: 这是 Ajax 的核心，允许浏览器向服务器发送请求并接收响应。虽然名称中包含 XML，但实际上它可以处理多种格式的数据（如 JSON、HTML、纯文本等）。

        3.DOM（文档对象模型）: 用于动态更新网页内容，更新用户在浏览器中看到的内容。

        4.服务器: 处理来自客户端的请求，返回数据，这些数据通常是 JSON 或 XML 格式。

3、工作原理

        1.用户事件: 用户在网页上执行某个动作（例如点击按钮）。

        2.发送请求: JavaScript 使用 XMLHttpRequest 对象发送到服务器的请求。

        3.处理请求: 服务器接收请求并处理，根据请求返回相应的数据。

        4.接收响应: JavaScript 接收服务器的响应。

        5.更新界面: 使用 DOM 操作更新网页上的内容，而无需重新加载整个页面。

4、优点

        1.提高用户体验: 用户可以在无需刷新整个页面的情况下，与应用程序进行交互，从而提高响应速度和用户体验。

        2.节省带宽: 只传输必要的数据，而不是整个网页。

        3.动态内容加载: 可以根据用户的操作或输入，动态加载数据。

5、缺点

        1.搜索引擎优化问题: Ajax 内容可能不被搜索引擎很好地索引，导致 SEO 难题。

        2.复杂性: 开发和调试 Ajax 应用程序可能较复杂，尤其是在处理多个异步请求时。

        3.浏览器兼容性: 虽然大多数现代浏览器都支持 Ajax，但在一些早期版本的浏览器中可能会存在兼容性问题。

6、JavaScript 原生 AJAX

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

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

    <title>JavaScript 原生 AJAX</title>

    <script>

        window.onload = function(){//文档加载完成后执行

            //获取文本域元素

            let textarea = document.getElementById("textarea");

            //需求1：点击按钮1，通过 GET 请求获取数据

            let btn1 = document.getElementById("btn1");

            //绑定按钮1事件

            btn1.onclick = function(){

                //1.创建 XMLHttpRequest 对象

                let xhr = new XMLHttpRequest();

                //2.初始化，设置请求方式和 url

                xhr.open("GET", "http://127.0.0.1:8000/helloWorld");

                //设置请求头信息（可以设置自定义请求头信息）

                //xhr.setRequestHeader("Content-Type","text/plain;charset=UTF-8");

                xhr.setRequestHeader("token","token123");//自定义会话的 token



                //3.发送请求

                xhr.send();

                //4.事件绑定，处理服务器返回的结果。readyState 是 xhr 对象中的属性，表示状态有：0、1、2、3、4

                xhr.onreadystatechange = function(){

                    if(xhr.readyState === 4){

                        //判断响应状态码：一般200开头的都是成功

                        /*

                        xhr.status：响应状态码

                        xhr.statusText：状态字符串

                        xhr.getAllResponseHeaders()：所有响应头

                        xhr.response：响应体

                        */

                        if(xhr.status >= 200 && xhr.status < 300){

                            //设置 textarea 的文本

                            textarea.innerHTML = xhr.response;

                        }

                    }

                }

            }



            //需求2：点击按钮2，通过 POST 请求获取数据

            let btn2 = document.getElementById("btn2");

            btn2.onclick = function(){

                let xhr = new XMLHttpRequest();

                xhr.open("POST", "http://127.0.0.1:8000/say");

                xhr.send();

                xhr.onreadystatechange = function(){

                    if(xhr.status >= 200 && xhr.status < 300){

                            //设置 textarea 的文本

                            textarea.innerHTML = xhr.response;

                        }

                }

            }



        }

    </script>

</head>

<body>

    <button id="btn1">按钮1 通过 GET 请求获取数据</button>

    <button id="btn2">按钮2 通过 POST 请求获取数据</button>

    <br><br>

    <textarea id="textarea" cols="30" rows="10"></textarea>

</body>

</html>

    7、jQuery 发送 AJAX 请求

            jQuery 发送 AJAX 请求主要有 3 个常用方法

            1、$.get()

            2、$.post()

            3、$.ajax()

            其中，$.get() 和 $.post() 都是简单的请求方式，有 4 个参数：url,[data],[callback],[type]

            url：请求的 url 地址

            data：参数值（键值对格式）

            callback：成功时的回调函数

            type：返回的数据格式，xml, html, script, json, text, _default

            $.ajax() 用于处理比较复杂的请求，它可以设置很多参数，比如：头部信息（headers，注意值不允许包含中文或者说是全角输入法的内容）、成功的回调（success）、失败的回调（error）、超时设置（timeout）等

    <!DOCTYPE html>

<html lang="zh-CN">



<head>

    <meta charset="UTF-8">

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

    <title>jQuery 发送 AJAX</title>

    <!-- 通过 CDN 引入 js库 -->

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

    <script>

        $(function () {//文档加载完成后执行

            //发送 get 请求

            $("#btn1").click(function () {

                //get 请求有4个参数：url、参数（键值对）、回调函数、返回的数据类型

                $.get("http://127.0.0.1:8000/getById", { id: 1 }, function (data) {

                    const userName = data.userName;

                    const introduction = data.introduction;

                    //在文本域中显示信息

                    $("#textarea").val("用户名：" + userName + "，自我介绍：" + introduction);

                }, "json");

            });



            //发送 post 请求

            $("#btn2").click(function () {

                //post 请求也有4个参数：url、参数（键值对）、回调函数、返回的数据类型

                $.post("http://127.0.0.1:8000/getByName", { "userName": "周星驰" }, function (data) {

                    const userName = data.userName;

                    const introduction = data.introduction;

                    //在文本域中显示信息

                    $("#textarea").val("用户名：" + userName + "，自我介绍：" + introduction);

                }, "json");

            });



            //发送 ajax 请求。语法：jQuery.ajax(url,[settings])

            $("#btn3").click(function () {

                const myToken = "your token message";

                const otherHeader = "can no be Chinese!";

                $.ajax({

                    //url 地址

                    url: "http://127.0.0.1:8000/getByName",

                    //请求类型

                    type: "POST",

                    //头部信息（值不允许包含中文）

                    headers: {

                        token: myToken,

                        other: otherHeader

                    },

                    //参数

                    data: { "userName": "海明威" },

                    //响应体结果

                    dataType: "json",

                    //成功的回调

                    success: function (data) {

                        const userName = data.userName;

                        const introduction = data.introduction;

                        //在文本域中显示信息

                        $("#textarea").val("用户名：" + userName + "，自我介绍：" + introduction);

                    },

                    //失败的回调

                    error: function () {

                        $("#textarea").val("接口调用失败啦！");

                    },

                    //超时时间设置，单位：毫秒

                    timeout: 2000,

                })

            });



        })

    </script>

</head>



<body>

    <h2>jQuery 发送 AJAX 请求</h2>

    <button id="btn1">GET 请求</button>

    <button id="btn2">POST 请求</button>

    <button id="btn3">通用型方法 ajax</button>

    <br><br>

    <textarea id="textarea" cols="30" rows="10"></textarea>

</body>



</html>

    8、axios 发送 AJAX 请求

            axios 是现在前端比较流行和热门的 AJAX 工具库，也是 VUE 和 React 推荐的发送 AJAX 请求的工具。

            axios 发送 AJAX 请求主要有 3 个常用方法（与 jQuery 类似）：

                    1、axios.get()

                    2、axios.post()

                    3、axios()

            axios 在调用 AJAX 有一个 then() 函数用来接收返回数据

    <!DOCTYPE html>

<html lang="zh-CN">



<head>

    <meta charset="UTF-8">

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

    <title>axios 发送 AJAX</title>

    <!-- 通过 CDN 引入 js库 -->

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>

    <script>

        window.onload = function () {//文档加载完成后执行

            //获取文本域元素

            let textarea = document.getElementById("textarea");

            //获取按钮

            let btn1 = document.getElementById("btn1");

            let btn2 = document.getElementById("btn2");

            let btn3 = document.getElementById("btn3");



            //配置 axios 基础请求路径

            axios.defaults.baseURL = "http://127.0.0.1:8000";



            //发送 get 请求

            btn1.onclick = function () {

                axios.get("/getById",

                    //参数

                    {

                        params: {

                            id: 1

                        },

                        //请求头信息

                        headers: {

                            token: "your token"

                        }

                    }

                ).then(response => {

                    //响应状态码

                    console.log(response.status);

                    //响应状态字符串

                    console.log(response.statusText);

                    //响应头信息

                    console.log(response.headers);

                    //响应体

                    console.log(response.data);

                    //在文本域显示信息

                    const userName = response.data.userName;

                    const introduction = response.data.introduction;

                    textarea.innerHTML = "用户名：" + userName + "，自我介绍：" + introduction;

                }).catch(function (error) {

                    console.log(error);

                });

            };





            //发送 post 请求

            btn2.onclick = function () {

                axios.post("/getByName",

                    //请求体参数

                    {

                        userName: "周星驰"

                    },

                    //其它参数

                    {

                        params: {

                            otherParam: "other"

                        },

                        //请求头参数

                        headers: {

                            //注意：后台服务该 POST 方法获取 userName 参数的格式是：@RequestParam String userName，需要增加头部 Content-Type 的配置

                            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",

                            "token": "your token"

                        }

                    }

                ).then(function (response) {

                    //响应状态码

                    console.log(response.status);

                    //响应状态字符串

                    console.log(response.statusText);

                    //响应头信息

                    console.log(response.headers);

                    //响应体

                    console.log(response.data);

                    //在文本域显示信息

                    const userName = response.data.userName;

                    const introduction = response.data.introduction;

                    textarea.innerHTML = "用户名：" + userName + "，自我介绍：" + introduction;

                }).catch(function (error) {

                    console.log(error);

                });

            };





            //发送 axios 请求

            btn3.onclick = function () {

                axios({

                    //请求方法

                    method: "POST",

                    //url

                    url: "/getByName",

                    //url参数

                    params: {

                        otherParam: "other"

                    },

                    //头信息

                    headers: {

                        //注意：后台服务该 POST 方法获取 userName 参数的格式是：@RequestParam String userName，需要增加头部 Content-Type 的配置

                        "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",

                        "token": "your token"

                    },

                    //请求体参数

                    data: {

                        userName: "海明威"

                    }

                }).then(response => {

                    //响应状态码

                    console.log(response.status);

                    //响应状态字符串

                    console.log(response.statusText);

                    //响应头信息

                    console.log(response.headers);

                    //响应体

                    console.log(response.data);

                    //在文本域显示信息

                    const userName = response.data.userName;

                    const introduction = response.data.introduction;

                    textarea.innerHTML = "用户名：" + userName + "，自我介绍：" + introduction;

                }).catch(function (error) {

                    console.log(error);

                });

            }

        }

    </script>

</head>



<body>

    <h2>axios 发送 AJAX 请求</h2>

    <button id="btn1">GET 请求</button>

    <button id="btn2">POST 请求</button>

    <button id="btn3">通用型方法 axios</button>

    <br><br>

    <textarea id="textarea" cols="30" rows="10"></textarea>

</body>



</html>

    【JavaScript】Ajax
    南栀的博客
    12-17 3853
    Ajax
    js ajax
    qq_42438026的博客
    07-08 360
    ajax 定义 ajax就是异步 的js和XML 1.Ajax即"Asynchronous Javascript And XML” (异步JavaScript 和XML) ，是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。 2.通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 3.就是使用ajax技术对网页进行局部更新 (向后台发送 了请求但是页面不会发生跳转)
    Ajax-原生JS实现Ajax请求
    李建雨的博客
    12-26 2329
    一、Ajax的核心：XMLHttpRequest 概念:XMLHttpRequest是浏览器中内置的一个构造函数(属于BOM和DOM范畴)，用来创建对象的作用:用来发起Ajax请求的,是Ajax的核心原理 1、使用XMLHttpRequest进行发送请求 分析ajax请求 axios({ url:'请求地址', method:'请求方式', //查询参数 //请求体 }).then(function(res){}) 2、XMLHttpRequest中必须要有 请求
    Ajax ajax.js
    07-12
    看看吧 总有点用 实现post 提交和 get 提交 只要传几个参数
    JS Ajax
    Gandalf_aro的博客
    11-24 246
    今天在使用Ajax读取json文件的时候遇到了一个问题，json文件格式如下{ "name":"json","age":"18" }json文件就是很常见的形式，但是在读取responseText之后，无法使用eval()方法转成json对象，原因是在读取responseText之后，json已经以字符串的方式读取了，并不需要另外加上单引号。
    js Ajax
    青蛙king的博客
    05-14 906
    ajax出现之前用的是iframe。 一、ajax 概念及其特点 ajax 是 Asynchronous JavaScript + XML 的简写。 ajax 是异步的，在无需重新加载整个网页的情况下，能够更新部分网页。 ajax 是可靠的，因为浏览器使用 socket（TCP连接）实现 HTTP 协议并充当服务端，对 ajax 的 HTTP 请求进行处理。 ajax 分为两个级别，是因为 XMLHttpRequest 对象有两个级别。 ajax 的核心是 XMLHttpRequest 对象。
    Ajax详解及其案例分析
    10-24
    Ajax（异步JavaScript和XML）是一种技术方案，它使得Web应用能够快速地更新部分网页而不必重新加载整个页面。Ajax技术的核心是XMLHttpRequest对象，它是浏览器提供的一个API，用于在后台与服务器交换数据。 本文...
    网页基础开发指南：HTML、CSS、JavaScript、JSON与Ajax详解
    最新发布
    03-27
    最后介绍了Ajax技术及其应用场景，展示了如何使用原生XMLHttpRequest、jQuery和Axios进行异步请求。 适合人群：适用于初学者和有一定经验的前端开发人员，帮助他们全面掌握网页开发的基础知识和技术。 使用场景及...
    JS的AJAX
    weixin_43297321的博客
    06-28 1474
    Ajax 异步通信技术，是Asynchronous JavaScript+XML的简写，这种技术允许向服务器请求额外的数据而无需卸载（刷新）页面。 网页发展缓慢 网页传播消息、允许进行搜索查询 搜索（SEO） 媒介搜索 静态页面能被搜索到 如果页面是需要的时候动态写入，那就无法搜索到该页面 SEO的优化，得写成静态页面 造成早期网页不能向其他语言一样直接给服务端发送消息，服务器返回消息，所以早期的通信都是前后端不分离的情况（跳转页面），这种方式能够最大限度的允许我们通过SEO搜索页面 但是有缺陷（无
    JS-AJAX
    繁花落幕的博客
    09-05 355
    JS-AJAXtomcat servlet + ajax实现示例 tomcat servlet + ajax实现示例
    js中的ajax
    xie_bro的博客
    08-31 570
    js中的ajax 一、简介 百科词条：         Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。         通过在后台与服务器进行少量数据交换，Ajax 可以
    JS-Ajax
    m0_51318597的博客
    08-15 363
    原生Ajax异步请求 JQuery发送Ajax请求 同源策略 跨域请求(JSNOP) GET POST
    JS中的ajax
    热门推荐
    不想写代码的一天
    06-17 1万+
    AJAX 传统的web交换缺点： 1.流量损失 2.浪费时间和带宽 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 概念： ajax使网页异步刷新，在不重新加载整个页面时，对网页的局部进行刷新。 特点： 局部刷新； 最大的特点：局部刷新 ajax的优点： 1.局部刷新； 2,。优化了浏览器与服务器之间的传输，减少了不必要...
    JS中的Ajax
    桑稚远方的博客
    08-22 1451
    在 JavaScript 中，可以通过封装原生的 Ajax 请求来进行与服务器的数据交互。下面是一个封装了原生 Ajax 请求的示例代码，以及对代码的详细注解。
    js-ajax(js)
    muzidigbig的博客
    07-03 3679
    一、Ajax概述 1．什么是同步，什么是异步 同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态（不能进行其他操作） 异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死（可以进行其他操作） 2．Ajax的运行原理 页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提...
    js_ajax
    qq_40634961的博客
    09-24 486
    这里先占个位后续会补上说明
    评论
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

    当前余额3.43元 前往充值 >
    需支付：10.00元
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付元
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明：

    1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

    余额充值