Ajax&JSON 应用开发



Ajax基础

Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

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

Ajax使用流程

  1. 创建XmlHttpRequest对象
var xmlhttp;
if (window.XMLHttpRequest) {
    //IE7+、FureFox、Chrome、Opear、Safari 浏览器执行代码
    xmlhttp = new XMLHttpRequest();
} else {
    // IE6、IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
  1. 发送Ajax请求
// 创建请求(参数1<发送方式> , 参数2<完整URL或URI>)
xmlhttp.open("GET","/content");
// 发送到服务器
xmlhttp.send();
  1. 处理服务器响应
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);
    }
}
image-20220707165617493

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序列化输出

image-20220708150703709

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包

image-20220708155719472

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

image-20220708155743353

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通过回调获取结果

image-20220708185039431
<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>
Ajax&JSON 应用开发-HuaのJava之旅
Ajax&JSON 应用开发
此内容为免费资源,请登录后查看
0
免费资源
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片