Ajax&JSON 应用开发

Breeze.

发布于 2022-07-12 15:01:38

9750

发布于 2022-07-12 15:01:38

文章被收录于专栏：一只无聊的清风一只无聊的清风

Ajax基础

Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 Ajax可以在不刷新页面的前提下，进行页面局部更新

Ajax使用流程

创建XmlHttpRequest对象

var xmlhttp;
if (window.XMLHttpRequest) {
    //IE7+、FureFox、Chrome、Opear、Safari 浏览器执行代码
    xmlhttp = new XMLHttpRequest();
} else {
    // IE6、IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

发送Ajax请求

// 创建请求(参数1<发送方式> , 参数2<完整URL或URI>)
xmlhttp.open("GET","/content");
// 发送到服务器
xmlhttp.send();

处理服务器响应

xmlhttp.onreadystatechange // 事件用于监听Ajax的执行状态
xmlhtpp.readyState // 说明XMLHttpRequest当前状态
xmlhttp.status // 服务器响应状态码，200:成功,404:未找到...

xmlhttp.onreadystatechange = function () {
    // 响应已被接收且服务器处理成功时才执行
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        // 获取响应体为本
        var t = xmlhttp.responseText;
        // 对服务器结果进行处理
        console.log(t);
    }
}

JSON 入门

JavaScript Object Notation(JavaScript 对象表示法) JSON 是轻量级的文本数据交换格式，JSON 独立于语言，居右自我描述性，更易理解

{
    "sites":[
        {"name":"百度","url":"www.baidu.com"},
        {"name":"京东","url":"www.jd.com"},
        {"name":"淘宝","url":"www.taobao.com"}
    ]
}

JSON语法规则

数据由键(Key)/值(value)描述，由冒号分隔
大括号代表一个完整的对象，拥有多个键/值对
中括号保存数组，多个对象之间使用逗号(,)分隔

JavaScript操作JSON

JavaScript天然支持解析JSON语法

Ajax应用

利用Jackson实现JSON序列化输出

Jackson

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

Maven仓库：com.fasterxml.jackson.core : jackson-databind : 2.13.3 - Maven Central Repository Search

<dependencies>
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.13.3</version>
    </dependency>
</dependencies>

// ObjectMapper Jackson核心对象
ObjectMapper objectMapper = new ObjectMapper();
// 将对象转化为JSON 序列化
String json = objectMapper.writeValueAsString(list);
response.setContentType("text/json;charset=utf-8");
response.getWriter().println(json);

添加依赖后：进入Project Structure > Artifacts > 选中jar包

选中Put into /WEB_INF/lib：添加到Maven项目中

Ajax处理JSON数据

<script>
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET", "/news");
    xmlhttp.send();

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var news = xmlhttp.responseText;
            var json = JSON.parse(news);
            for (let i = 0; i < json.length; i++) {
                let news = json[i];
                let container = document.getElementById("container");
                container.innerHTML = container.innerHTML + "<h3>" + news.title + "</h3>" + "<p>" + news.content + "</p>";
            }
        }
    }
</script>

Axios快速入门

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

<script>
    // 参数1：对应的URI，参数2：服务器传递参数
    // then: 处理成功  catch：处理失败
    axios.get("/news", {params: {"t": "tiktok"}}).then(function (response) {
        console.log(response);
        let json = response.data;
        for (let i = 0; i < json.length; i++) {
            let news = json[i];
            let container = document.getElementById("container");
            container.innerHTML = container.innerHTML + "<h3>" + news.title + "</h3>" + "<p>" + news.content + "</p>";
        }
    }).catch(function (error) {
        console.log(error);
    });
</script>

<script>
    // 参数1：URI，参数2：请求参数字符串，请求头参数
    // axios.post("/news1", "t=tiktok&l=abc", {headers: {"content-tpye": "application/x-www-form-urlencoding"}})或axios.post("/news", params)
    const params = new URLSearchParams();
    params.append("t", "tiktok");
    params.append("t", "abc");
    axios.post("/news", params)
        .then(function (response) {
        let json = response.data;
        for (let i = 0; i < json.length; i++) {
            let news = json[i];
            let container = document.getElementById("container");
            container.innerHTML = container.innerHTML + "<h3>" + news.title + "</h3>" + "<p>" + news.content + "</p>";
        }
    })
        .catch(function (error) {
        console.log(error);
    });
</script>

同步与异步的区别

同步是在服务器未返回JSON前，JS程序一直处于阻塞等待的状态异步是在服务器未返回JSON钱，不阻塞程序，Ajax通过回调获取结果

<script>
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    } else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    // Ajax默认以异步运行，添加参数false执行同步
    xmlhttp.open("GET", "/news?t=tiktok");
    xmlhttp.send();
    console.log("请求数据已发送")
    // 参数为false则不会运行onreadystatechange
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var news = xmlhttp.responseText;
            console.log(news);
            var json = JSON.parse(news);
            for (let i = 0; i < json.length; i++) {
                let news = json[i];
                let container = document.getElementById("container");
                container.innerHTML = container.innerHTML + "<h3>" + news.title + "</h3>" + "<p>" + news.content + "</p>";
            }
        }
    }
</script>

实现二级联动菜单

@WebServlet("/channel")
public class ChannelServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 父级菜单
        String level = request.getParameter("level");
        // 子级菜单
        String parent = request.getParameter("parent");
        List<Channel> list = new ArrayList();
        if (level.equals("1")) {
            list.add(new Channel("ai", "人工智能"));
            list.add(new Channel("web", "前端开发"));
        } else if (level.equals("2")) {
            if (parent.equals("ai")) {
                list.add(new Channel("dl", "深度学习"));
                list.add(new Channel("cv", "计算机视觉"));
                list.add(new Channel("nlp", "自然语言处理"));
            } else if(parent.equals("web")) {
                list.add(new Channel("html", "HTML超文本标记语言"));
                list.add(new Channel("css", "CSS3样式表"));
                list.add(new Channel("javascript", "JavaScript脚本"));
            }
        }
        // 实例化ObjectMapper
        ObjectMapper mapper = new ObjectMapper();
        // 调用 writeValueAsString 将 list集合转为JSON
        String json = mapper.writeValueAsString(list);
        response.setContentType("application/json;charset=utf-8");
        response.getWriter().println(json);
    }
}

<script>
    // 加载一级菜单
    const lv1 = document.getElementById("lv1");
    axios.get("/channel", {params: {"level": 1}})
        .then(function (response) {
            let json = response.data;
            console.log(json);
            for (let i = 0; i < json.length; i++) {
                let channel = json[i];
                //每次访问接口，都追加内容到select中
                // Option 参数1：显示的文字，参数2：为value值
                lv1.options.add(new Option(channel.name, channel.code));
            }
        })
        .catch(function (error) {
            console.log(error);
        });
    // 二级菜单
    const lv2 = document.getElementById("lv2");
    // 被选项发生变化的时候执行
    lv1.onchange = function () {
        // 参数2：要查询的二级，一级当前code
        axios.get("/channel", {
            params: {
                "level": 2,
                "parent": lv1.value
            }
        })
            .then(function (response) {
                let json = response.data;
                console.log(json);
                // 将lv2的长度设置为0，就可以防止叠加数据
                lv2.length = 0;
                for (let i = 0; i < json.length; i++) {
                    let channel = json[i];
                    lv2.options.add(new Option(channel.name, channel.code));
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    }
</script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

json