Java学习路线-47:Ajax学习XMLHttpRequest、XStream、json-lib(2)

简介: Java学习路线-47:Ajax学习XMLHttpRequest、XStream、json-lib



课时8 8.ajax第四例:响应内容为xml

服务端响应头


Content-Type: text/xml; charset=utf-8


客户端设置


var doc = xmlHttp.responseXML; // 得到Document对象


服务端代码


@app.route("/xml")
def xml():
    data = """
        <person>
            <name>Tom</name>
            <age>23</age>
        </person>
    """
    res = make_response(data)
    res.headers['Content-Type'] = 'text/xml; charset=utf-8'
    return res



客户端代码


<button id="btn">点击</button>
<h2 id="text"></h2>
<script>
    // 获取XMLHttpRequest对象
    function createXMLHttpRequest() {
        try {
            // 大多数浏览器
            return new XMLHttpRequest();
        } catch (e) {
            try {
                // IE6.0
                new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    // IE<=5.5
                    new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {
                    console.log("浏览器版本太老了!");
                    throw e;
                }
            }
        }
    }
    // 判断是否为IE浏览器
    function isIE() {
        if (window.addEventListener) {
            return false;
        } else {
            return true;
        }
    }
    // 文档加载完成后马上执行
    window.onload = function () {
        let btn = document.getElementById("btn");
        // 注册事件监听
        btn.onclick = function () {
            let xmlHttp = createXMLHttpRequest();
            xmlHttp.open("GET", "http://127.0.0.1:5000/xml", true);
            xmlHttp.send(null);
            xmlHttp.onreadystatechange = function () {
                // 双重判断 xmlHttp状态为服务器响应结束,服务器状态响应结束
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    // 获取响应结果
                    var doc = xmlHttp.responseXML;
                    // IE 和非IE有所区别
                    let name = doc.getElementsByTagName("name")[0].textContent;
                    let age = doc.getElementsByTagName("age")[0].textContent;
                    let text = document.getElementById("text");
                    text.innerHTML = `name: ${name}, age: ${age}`;
                }
            }
        }
    }
</script>



课时9-10 ajax第五例:省市联动

<select name="province" id="">
    <option value="">请选择省份</option>
</select>
<select name="city" id="">
    <option value="">请选择城市</option>
</select>



服务端提供两个接口

province

city?province=北京


完整代码

一、前端代码

1、util.js


// 获取XMLHttpRequest对象
function createXMLHttpRequest() {
    try {
        // 大多数浏览器
        return new XMLHttpRequest();
    } catch (e) {
        try {
            // IE6.0
            new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                // IE<=5.5
                new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                console.log("浏览器版本太老了!");
                throw e;
            }
        }
    }
}
// 判断是否为IE浏览器
function isIE() {
    if (window.addEventListener) {
        return false;
    } else {
        return true;
    }
}



2、demo.html


<select name="province" id="province">
    <option value="">请选择省份</option>
</select>
<select name="city" id="city">
    <option value="">请选择城市</option>
</select>
<script src="./util.js"></script>
<script>
    function createOption(name) {
        // 创建option元素
        let option = document.createElement("option");
        option.value = name;
        // 创建文本节点
        let textNode = document.createTextNode(name);
        option.appendChild(textNode);
        return option;
    }
    // 文档加载完成后马上执行
    window.onload = function () {
        // 第一步:先获取省级列表
        let xmlHttp = createXMLHttpRequest();
        xmlHttp.open("GET", "http://127.0.0.1:5000/provinces", true);
        xmlHttp.send(null);
        let province = document.getElementById("province");
        xmlHttp.onreadystatechange = function () {
            // 双重判断 xmlHttp状态为服务器响应结束,服务器状态响应结束
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                // 获取响应结果
                var text = xmlHttp.responseText;
                let list = text.split("|"); // 拆分数据得到数组
                for (let item of list) {
                    let option = createOption(item);
                    province.appendChild(option);
                }
            }
        }
        // 第二步:监听省级列表变动,获取城市列表
        province.onchange = function () {
            if (province.value == "") {
                return
            }
            let xmlHttp = createXMLHttpRequest();
            xmlHttp.open("POST", "http://127.0.0.1:5000/cities", true);
            xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xmlHttp.send(`province=${province.value}`);
            xmlHttp.onreadystatechange = function () {
                // 双重判断 xmlHttp状态为服务器响应结束,服务器状态响应结束
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    // 移除所有结果
                    let city = document.getElementById("city");
                    let optionList = city.getElementsByTagName("option");
                    while (optionList.length > 1) {
                        city.removeChild(optionList[1]);
                    }
                    // 获取响应结果
                    var doc = xmlHttp.responseXML;
                    let cities = doc.getElementsByTagName("city");
                    for (let item of cities) {
                        let cityName = "";
                        // 兼容IE浏览器和其他浏览器
                        if (isIE()) {
                            cityName = item.text; // IE
                        } else {
                            cityName = item.textContent; // FireFox等
                        }
                        let option = createOption(cityName);
                        city.appendChild(option);
                    }
                }
            }
        }
    }
</script>



二、后端代码

1、数据文件china.xml


<china>
    <province name="北京">
        <city>东城区</city>    
        <city>西城区</city>
    </province>    
    <province name="天津">
        <city>和平区</city>    
        <city>河东区</city>
    </province>  
</china>



2、数据解析文件demo.py


# pip install lxml
from lxml import etree
class China():
    path = "china.xml"
    @classmethod
    def getProvinces(cls):
        """获取省份
        """
        tree = etree.parse(cls.path)
        return tree.xpath('//province/@name')
    @classmethod
    def getCities(cls, province):
        """获取城市
        """
        tree = etree.parse(cls.path)
        result = tree.xpath(f"//province[@name='{province}']")
        if result:
            return etree.tostring(result[0], encoding="UTF-8")
        else:
            return ""
if __name__ == "__main__":
    print(China.getProvinces())
    print(China.getCities("北京"))




3、接口文件


from flask import Flask, request, make_response
from flask_cors import CORS
from demo import China
app = Flask(__name__)
CORS(app, supports_credentials=True)
@app.route("/provinces")
def provinces():
    return "|".join(China.getProvinces())
@app.route("/cities", methods=['POST'])
def cities():
    province = request.form.get("province")
    res = make_response(China.getCities(province))
    res.headers['Content-Type'] = 'text/xml; charset=utf-8'
    return res
if __name__ == '__main__':
    app.run(debug=True)




课时11 11.XStream(可把Javabean转换成XMl的小工具)

依赖


<dependency>
    <groupId>xstream</groupId>
    <artifactId>xstream</artifactId>
    <version>1.2.2</version>
</dependency>



代码实例


import com.thoughtworks.xstream.XStream;
import java.util.ArrayList;
import java.util.List;
class City {
    private String name;
    public City(String name) {
        this.name = name;
    }
}
class Province {
    private String name;
    private List<City> cities = new ArrayList<>();
    public void addCity(City city){
        cities.add(city);
    }
    public Province(String name) {
        this.name = name;
    }
}
public class TestXStream {
    public static void main(String[] args) {
        // 数据准备
        List<Province> list = new ArrayList<Province>();
        Province province = new Province("北京");
        province.addCity(new City("东城区"));
        province.addCity(new City("昌平区"));
        list.add(province);
        XStream xStream = new XStream();
        // 指定别名
        xStream.alias("china", List.class);
        xStream.alias("province", Province.class);
        xStream.alias("city", City.class);
        // 属性设置
        xStream.useAttributeFor(Province.class, "name");
        // 去除无用的标签
        xStream.addImplicitCollection(Province.class, "cities");
        String str = xStream.toXML(list);
        System.out.println(str);
    }
}





课时12 12.JSON的概述

js提供的一种数据交换格式

Json语法

属性名必须使用双引号括起来


对象:{}

属性:

   null、数值、字符串、数组[]、boolean(true/false)



var s = "1 + 2";

eval(s);

// 3



1、示例

(1)服务端代码


from flask import Flask, jsonify
from flask_cors import CORS
app = Flask(__name__)
CORS(app, supports_credentials=True)
@app.route("/json")
def json():
    return jsonify({"name": "Tom"})
if __name__ == '__main__':
    app.run(debug=True)





(2)客户端代码


<button id="btn">点击</button>
<h2 id="text"></h2>
<script src="./util.js"></script>
<script>
    // 文档加载完成后马上执行
    window.onload = function () {
        let btn = document.getElementById("btn");
        btn.onclick = function () {
            let xmlHttp = createXMLHttpRequest();
            xmlHttp.open("GET", "http://127.0.0.1:5000/json", true);
            xmlHttp.send(null);
            xmlHttp.onreadystatechange = function () {
                // 双重判断 xmlHttp状态为服务器响应结束,服务器状态响应结束
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    // 获取响应结果
                    let text = xmlHttp.responseText;
                    let obj = JSON.parse(text);
                    document.getElementById("text").innerHTML = `name: ${obj.name}`;
                }
            }
        }
    }
</script>








相关文章
|
27天前
|
Java 调度 开发者
Java线程池ExecutorService学习和使用
通过学习和使用Java中的 `ExecutorService`,可以显著提升并发编程的效率和代码的可维护性。合理配置线程池参数,结合实际应用场景,可以实现高效、可靠的并发处理。希望本文提供的示例和思路能够帮助开发者深入理解并应用 `ExecutorService`,实现更高效的并发程序。
34 10
|
30天前
|
Java 数据库连接 数据库
【潜意识Java】深度分析黑马项目《苍穹外卖》在Java学习中的重要性
《苍穹外卖》项目对Java学习至关重要。它涵盖了用户管理、商品查询、订单处理等模块,涉及Spring Boot、MyBatis、Redis等技术栈。
86 4
|
30天前
|
前端开发 Java 数据库连接
【潜意识Java】深度解读JavaWeb开发在Java学习中的重要性
深度解读JavaWeb开发在Java学习中的重要性
30 4
|
30天前
|
存储 移动开发 算法
【潜意识Java】Java基础教程:从零开始的学习之旅
本文介绍了 Java 编程语言的基础知识,涵盖从简介、程序结构到面向对象编程的核心概念。首先,Java 是一种高级、跨平台的面向对象语言,支持“一次编写,到处运行”。接着,文章详细讲解了 Java 程序的基本结构,包括包声明、导入语句、类声明和 main 方法。随后,深入探讨了基础语法,如数据类型、变量、控制结构、方法和数组。此外,还介绍了面向对象编程的关键概念,例如类与对象、继承和多态。最后,针对常见的编程错误提供了调试技巧,并总结了学习 Java 的重要性和方法。适合初学者逐步掌握 Java 编程。
52 1
|
2月前
|
JSON Java 数据格式
java操作http请求针对不同提交方式(application/json和application/x-www-form-urlencoded)
java操作http请求针对不同提交方式(application/json和application/x-www-form-urlencoded)
107 25
java操作http请求针对不同提交方式(application/json和application/x-www-form-urlencoded)
|
3月前
|
JSON Java 关系型数据库
Java更新数据库报错:Data truncation: Cannot create a JSON value from a string with CHARACTER SET 'binary'.
在Java中,使用mybatis-plus更新实体类对象到mysql,其中一个字段对应数据库中json数据类型,更新时报错:Data truncation: Cannot create a JSON value from a string with CHARACTER SET 'binary'.
348 4
Java更新数据库报错:Data truncation: Cannot create a JSON value from a string with CHARACTER SET 'binary'.
|
3月前
|
Java 大数据 API
14天Java基础学习——第1天:Java入门和环境搭建
本文介绍了Java的基础知识,包括Java的简介、历史和应用领域。详细讲解了如何安装JDK并配置环境变量,以及如何使用IntelliJ IDEA创建和运行Java项目。通过示例代码“HelloWorld.java”,展示了从编写到运行的全过程。适合初学者快速入门Java编程。
|
3月前
|
JavaScript Java 项目管理
Java毕设学习 基于SpringBoot + Vue 的医院管理系统 持续给大家寻找Java毕设学习项目(附源码)
基于SpringBoot + Vue的医院管理系统,涵盖医院、患者、挂号、药物、检查、病床、排班管理和数据分析等功能。开发工具为IDEA和HBuilder X,环境需配置jdk8、Node.js14、MySQL8。文末提供源码下载链接。
|
4月前
|
XML Java 编译器
Java学习十六—掌握注解:让编程更简单
Java 注解(Annotation)是一种特殊的语法结构,可以在代码中嵌入元数据。它们不直接影响代码的运行,但可以通过工具和框架提供额外的信息,帮助在编译、部署或运行时进行处理。
124 43
Java学习十六—掌握注解:让编程更简单
|
4月前
|
JSON JavaScript Java
在Java中处理JSON数据:Jackson与Gson库比较
本文介绍了JSON数据交换格式及其在Java中的应用,重点探讨了两个强大的JSON处理库——Jackson和Gson。文章详细讲解了Jackson库的核心功能,包括数据绑定、流式API和树模型,并通过示例演示了如何使用Jackson进行JSON解析和生成。最后,作者分享了一些实用的代码片段和使用技巧,帮助读者更好地理解和应用这些工具。
371 0
在Java中处理JSON数据:Jackson与Gson库比较