Ajax详解

于 2023-12-02 09:15:00 发布
阅读量1k 收藏 22
点赞数 32
分类专栏： javaEE 文章标签： ajax 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74212228/article/details/134733521
版权

Ajax

Ajax介绍

Asynchronous JavaScript And XML（异步的JavaScript和XML）

Ajax可以在不刷新页面的前提下，进行页面局部更新

Ajax是前端开发的必备技能，也是主流的开发模式

Ajax使用流程

创建XmlHttpRequest对象

XmlHttpRequest是Ajax的核心，Ajax使用该对象发起请求，接受响应

XmlHttpRequest并不是W3C的标准，不同浏览器的创建方式不同

代码实现：
var xmlhttp;
if (window.XMLHttpRequest) {
    //IE7+，Firefox，Chrome，Opera，Safari浏览器执行代码
    xmlhttp = new XMLHttpRequest();
} else {
    //IE6，IE5浏览器执行代码
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
console.log("XMLHttpRequest:", xmlhttp);
发送Ajax请求

xmlhttp.open()用于创建请求

xmlhttp.send()用于发送请求

代码实现：
// 2.发送Ajax请求
//创建请求
xmlhttp.open("GET", "/content");
//发送到服务器
xmlhttp.send();
处理服务器响应

xmlhttp.onreadystatechange()事件用于监听Ajax的执行过程

xmlhttp.readyState属性说明XMLHttpRequest当前状态

202311141404514

xmlhttp.status属性服务器响应状态码，200：成功 404：未找到…

代码实现：
// 3.处理服务器响应
xmlhttp.onreadystatechange = function () {
    //响应已被接受且服务器处理成功时才执行
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        //获取响应体的文本
        var t = xmlhttp.responseText;
        //对服务器结果进行处理
        console.log(t);
        document.getElementById("divContent").innerHTML = t;
    }
};
代码实现：
@WebServlet("/content")
public class ContentServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        resp.getWriter().println("<b style='color:red'>I am content</b>");

    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="btnLoad" type="button" value="加载"/>
    <div id="divContent"></div>
    <script>
        document.getElementById("btnLoad").onclick = function () {
            // 1.创建XmlHttpRequest对象
            var xmlhttp;
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            } else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            console.log("XMLHttpRequest:", xmlhttp);
            // 2.发送Ajax请求
            xmlhttp.open("GET", "/content");
            xmlhttp.send();
            // 3.处理服务器响应

            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var t = xmlhttp.responseText;
                    console.log(t);
                    document.getElementById("divContent").innerHTML = t;
                }

            };

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

JSON

JSON介绍

JavaScript Object Notation（JavaScript对象表示法）

JSON是轻量级的文本数据交换格式

JSON独立于语言，具有自我描述性，更容易理解

JSON语法规则

数据由键（key）/值（value）描述，由冒号分隔

大括号代表一个完整的对象，拥有多个键/值对

中括号保存数组，多个对象之间使用逗号分隔

写一个JSON

创建employ.json

[
  {
    "empno": 7369,
    "ename": "李宁",
    "job": "软件工程师"
  },
  {
    "empno": 7370,
    "ename": "张三",
    "job": "客户经理",
    "customers": [
      {
        "cname": "李东"
      },
      {
        "cname": "李四"
      }
    ]
  }
]

利用JS操作JSON

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var employeeList = [
            {
                "empno": 7369,
                "ename": "李宁",
                "job": "软件工程师"
            },
            {
                "empno": 7370,
                "ename": "张三",
                "job": "客户经理",
                "customers": [
                    {
                        "cname": "李东"
                    },
                    {
                        "cname": "李四"
                    }
                ]
            }
        ];
        for (var i = 0; i < employeeList.length; i++) {
            var employee = employeeList[i];
            console.log(employee);
            document.write("<h1>");
            document.write(employee.empno+","+employee.ename+","+employee.job);
            document.write("</h1>");
            if (employee.customers != null) {
                document.write("<h2>");
                for (var j = 0; j < employee.customers.length; j++) {
                    var customer = employee.customers[j];
                    document.write(customer.cname + ",");
                }
                document.write("</h2>");
            }
        }
    </script>
</head>
<body>

</body>
</html>

Ajax+JSON开发模式

Jackson

将java对象转化为标准的json字符串

Jackson是国内外著名的Jaca开源JSON序列化组件

Jackson国内拥有大量使用者，拥有API简单，效率高等优点

Jackson也是众多Java框架的底层组件，掌握Jackson很重要

实现步骤

1.添加依赖
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.15.2</version>
</dependency>
2.将通过Maven添加的jar包，添加到lib目录下

点击File中的Project Structure,再点击左侧的Artifacts，将右侧的jar包添加到lib目录下

3.创建实体
package com.nuage.ajax.entity;

public class News {
    private String title;
    private String date;
    private String source;
    private String content;

    public News(String title, String date, String source, String content) {
        this.title = title;
        this.date = date;
        this.source = source;
        this.content = content;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getDate() {
        return date;
    }

    public void setDate(String date) {
        this.date = date;
    }

    public String getSource() {
        return source;
    }

    public void setSource(String source) {
        this.source = source;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}
4.
@WebServlet("/news")
public class NewsServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        List<News> list = new ArrayList<>();
        list.add(new News("2018年编程语言排行趋势", "2018-5-1", "tiobe", "..."));
        list.add(new News("2019年编程语言排行趋势", "2018-5-1", "tiobe", "..."));
        list.add(new News("2020年编程语言排行趋势", "2018-5-1", "tiobe", "..."));
        list.add(new News("2021年编程语言排行趋势", "2018-5-1", "tiobe", "..."));

        //将Java对象转换为json字符串的核心实现
        ObjectMapper objectMapper = new ObjectMapper();
        String json = objectMapper.writeValueAsString(list);
        resp.setContentType("text/json;charset=utf-8");
        resp.getWriter().println(json);

    }
}
5.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="container"></div>
<script>
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        //IE6，IE5浏览器执行代码
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", "/news");
    xmlhttp.send();
    // 3.处理服务器响应
    xmlhttp.onreadystatechange = function () {
        //响应已被接受且服务器处理成功时才执行
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            //获取响应体的文本
            var t = xmlhttp.responseText;
            //对服务器结果进行处理
            console.log(t);
            //将字符串转换为JSON
            var json = JSON.parse(t);
            console.log(json);
            for (var i = 0; i < json.length; i++) {
                var news = json[i];
                var container = document.getElementById("container");

                container.innerHTML = container.innerHTML+"<h2>" + news.title+"</h2>";


            }
        }
    };
</script>
</body>
</html>

Ajax组件库-axios

查看下面官网有步骤

axios中文文档|axios中文网 | axios (axios-js.com)

将下面代码或者网站里代码重写写在一个js文件中，写在html中

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Get请求代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.js"></script>
</head>
<body>
<div id="container"></div>
<script>
    //params传入参数
    axios.get("/news", {params:{"t":"pypl"}}).then(function (response) {
        console.log(response);
        //获取json数据
        var json = response.data;
        for (var i = 0; i < json.length; i++) {
            var news = json[i];
            var container = document.getElementById("container");

            container.innerHTML = container.innerHTML+"<h2>" + news.title+"</h2>";

        }
    }).catch(function (error) {
        console.log(error);
    });
</script>
</body>
</html>

POST请求代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.js"></script>
</head>
<body>
<div id="container"></div>
<script>
    //xos为我们提供的请求参数对象
    const params = new URLSearchParams();
    params.append("t", "pypl");
    params.append("1", "abc");
    // axios.post("/news", "t=pypl&1=abc",
    //     {headers:{"content-type":"application/x-www-form-urlencoded"}})
    axios.post("/news", params)
        .then(function (response) {
        console.log(response);
        var json = response.data;
        for (var i = 0; i < json.length; i++) {
            var news = json[i];
            var container = document.getElementById("container");

            container.innerHTML = container.innerHTML+"<h2>" + news.title+"</h2>";

        }
    }).catch(function (error) {
        console.log(error);
    });
</script>
</body>
</html>

Ajax同步于异步的区别

同步是在服务器未返回JSON前，JS程序一直处于阻塞等待的状态

异步是在服务器未返回JSON前，不阻塞程序，Ajax通过回调获取结果

实现二级联动菜单

代码实现

1.创建实体对象
package com.nuage.ajax.entity;

public class Channel {
    private String code;
    private String name;

    public Channel() {
    }

    public Channel(String code, String name) {
        this.code = code;
        this.name = name;
    }

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}
2.
@WebServlet("/channel")
public class ChannelServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String level = req.getParameter("level");
        String parent = req.getParameter("parent");
        List<Channel> chlist = new ArrayList<>();
        if (level.equals("1")) {
            chlist.add(new Channel("ai", "人工智能"));
            chlist.add(new Channel("web", "前端开发"));
        } else if (level.equals("2")) {
            if (parent.equals("ai")) {
                chlist.add(new Channel("dl", "深度学习"));
                chlist.add(new Channel("cv", "计算机视角"));
                chlist.add(new Channel("nlp", "自然语言处理"));
            } else if (parent.equals("web")) {
                chlist.add(new Channel("html", "深度学习"));
                chlist.add(new Channel("css", "计算机视角"));
                chlist.add(new Channel("js", "自然语言处理"));
            }
        }
        ObjectMapper objectMapper = new ObjectMapper();
        String json = objectMapper.writeValueAsString(chlist);
        resp.setContentType("application/json;charset=utf-8");
        resp.getWriter().println(json);
    }
}
3.

channel.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.js"></script>
</head>
<body>
<select id="lv1" style="width: 200px;height: 30px">
    <option value="-1" selected="selected">请选择</option>
</select>
<select id="lv2" style="width: 200px;height: 30px"></select>
<script>
    var lv1 = document.getElementById("lv1");
    axios.get("/channel", {params: {"level": 1}})
        .then(function (response) {
            var json = response.data;
            console.log(json);
            for (var i = 0; i < json.length; i++) {
                var channel = json[i];
                lv1.options.add(new Option(channel.name, channel.code));
            }
        });
    var lv2 = document.getElementById("lv2");
    lv1.onchange = function () {
        axios.get("/channel", {params: {"level": 2, "parent": lv1.value}})
            .then(function (response) {
                var json = response.data;
                console.log(json);
                lv2.length = 0;
                for (var i = 0; i < json.length; i++) {
                    var channel = json[i];
                    lv2.options.add(new Option(channel.name, channel.code));
                }
            });
    }
</script>
</body>
</html>

效果图

202311141404462

Nuage0110
关注
  • 32
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Ajax详解Ajax详解
07-25
不错的Ajax教程，大家可以下来看看,不错的Ajax教程，大家可以下来看看不错的Ajax教程，大家可以下来看看不错的Ajax教程，大家可以下来看看
AJAX 详解
06-19 2万+
Ajax基础知识，及常见问题详解
看这一篇就够了！-Ajax详解
热门推荐
Oriental_的博客
03-15 16万+
今天来聊一聊前后端交互的重要工具Ajax 结合上次跟大家分享的前后端交互基础，如果还没有看过的童鞋，以下是传送门 前后端交互详解 AJAX - 到底什么是Ajax? ajax 全名 async javascript and XML 是前后台交互的能⼒ 也就是我们`客户端给服务端发送消息的⼯具，以及接受响应的⼯具 是⼀个 默认异步执⾏机制的功能AJAX分为同步（async = false...
AJAX详解
weixin_63719049的博客
04-27 4720
AJAX详解
jQuery Ajax详解
m0_61031325的博客
05-25 1634
jQuery Ajax简介： Ajax全称为：“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML）。Ajax其实质是利用浏览器提供的一个特殊的对象（XMLHttpRequest）异步地向服务器发送请求，服务器返回部分数据，浏览器让你去利用这些数据对象页面做部分的更新，整个过程，页面无刷新，不打断用户的操作。 JavaScript异步编程： 异步（Asynchronous, async）是与同步（Synchronous, sync）相对...
Ajax 详解
m0_55557411的博客
07-22 587
Ajax 详解
ajax详解
程展威的博客
01-05 2992
从认识ajax到熟知ajax的用法，以及明白如何通过promise对他进行封装，本文可能有点长，需要大家耐心阅读，毕竟学习不是一蹴而就的。
AJax详解
封劫的博客
02-21 208
AJax详解 ajax的概念 ​ ajax通俗点就是异步的JavaScript。平时我们写的js语言大部分都是同步的，同步的js运行规则是从上往下依次运行，只有运行完同步代码，才会运行异步代码。像定时器、ajax、animate动画效果……就是异步的。ajax多用于前端向后端发送与请求数据。 原生ajax写法 创建ajax实例 var xhr = new XMLHttpRequest() ...
jquery ajax详解
happyAliceYu的博客
03-23 1980
一：首先要明白前后台数据交互的几种方式： 1：最简单的标签 a href="xxx.xxx?username='liufukin'">请求服务器a>11 2:用的最多的表单 "xxx.xxx" method="post/get"> 用户名：type="text" name="username"> 密码：type="password" name="userpwd"
ajax详解与实战
10-10
**Ajax详解与实战** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个页面的情况下，能够更新部分网页的技术。它通过JavaScript在后台与服务器进行少量数据交换，使得网页实现异步更新，极大地提升了...
ajax详解_动力节点Java学院整理
10-19
主要介绍了ajax详解，详细的介绍了Ajax 简史以及基本用法，有兴趣的可以了解一下
AngularJS Ajax详解及示例代码
11-23
**AngularJS AJAX详解** AngularJS 是一款强大的前端JavaScript框架，由Google维护，它极大地简化了构建动态单页应用（SPA）的过程。在AngularJS中，AJAX（Asynchronous JavaScript and XML）请求通常通过内置的`$...
ajax安装详解
08-08
### AJAX安装与使用详解 #### 引言 AJAX（Asynchronous JavaScript and XML）是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新，这意味着可以在不重新加载整个...
AJAX详解CHM版
05-05
**AJAX详解CHM版** 是一个专门针对AJAX技术的电子书资源，采用CHM（Compiled Help Manual）格式，这种格式是微软开发的帮助文档格式，通常用于存储大量的技术文档和教程。AJAX，全称Asynchronous JavaScript and XML...
Ajax详解.rar
07-09
本系列的作者是一位 Ajax 专家，他演示了这些技术如何协同工作 —— 从总体概述到细节的讨论 —— 使高效的 Web 开发成为现实。他还揭开了 Ajax 核心概念的神秘面纱，包括 XMLHttpRequest 对象。 五年前，如果不...
互联网资源获取：服务器基础与Ajax详解
"本课程主要介绍服务器的基本概念和Ajax技术的初步认识。通过学习，你可以理解客户端与服务器的关系，了解URL地址的含义及其组成部分，并掌握客户端如何与服务器进行通信。此外，课程还将涉及Ajax在jQuery中的应用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Nuage0110

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值