Java学习路线-47：Ajax学习XMLHttpRequest、XStream、json-lib

课时1 1.ajax简介（异步与同步）

asynchronous javascript and xml 异步js和xml

1、异步交互和同步交互 同步 发送，等待 整个页面刷新 异步 发送，不等待 局部刷新

示例：异步刷新

点击 



// 文档加载完成后马上执行
window.onload = function(){
    let btn = document.getElementById("btn");

    // 给btn注册点击事件监听
    btn.onclick = function(){
        let text = document.getElementById("text");
        text.innerHTML= "hello!";
    }
}

课时2 2.异步和同步交互图

数据格式 text、xml、json 同步：

请求 -> 
响应  
响应  
请求 -> 

响应 


    #errorText {
        color: red;
    }



    
    




    // 获取XMLHttpRequest对象
    function createXMLHttpRequest() {
        try {
            // 大多数浏览器
            return new XMLHttpRequest();
        } catch (e) {
            try {
                // IE6.0
                new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    // IE点击




    // 获取XMLHttpRequest对象
    function createXMLHttpRequest() {
        try {
            // 大多数浏览器
            return new XMLHttpRequest();
        } catch (e) {
            try {
                // IE6.0
                new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    // IE
    请选择省份



    请选择城市





    
    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);
                    }

                }
            }
        }

    }

二、后端代码 1、数据文件china.xml

    
        东城区    
        西城区
        
    
        和平区    
        河东区
      

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的小工具)

依赖

    xstream
    xstream
    1.2.2

代码实例

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 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 list = new ArrayList();
        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）客户端代码

点击





    // 文档加载完成后马上执行
    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}`;
                }
            }

        }
    }

json与xml比较 可读性 解码难度 流行度

课时13 13.json-lib的应用

继承关系

public final class JSONArray extends AbstractJSON 
    implements JSON, List, Comparable

public final class JSONObject extends AbstractJSON 
    implements JSON, Map, Comparable

依赖

    net.sf.json-lib
    json-lib
    2.4
    jdk15

示例

import net.sf.json.JSONObject;

class Demo {

    public static void main(String[] args)   {
        JSONObject map = new JSONObject();
        map.put("name", "Tom");
        map.put("age", 23);

        String str = map.toString();
        System.out.println(str);
        // {"name":"Tom","age":23}
    }
}

java对象转为json

Person.java

public class Person {
    private String name;
    private int age;

    public Person(String name, int age) {
        this.name = name;
        this.age = age;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }
}

Demo.java

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

class Demo {

    public static void main(String[] args) {
        // 对象转JSONObject
        Person person = new Person("Tom", 23);
        JSONObject obj = JSONObject.fromObject(person);
        System.out.println(obj.toString());
        // {"name":"Tom","age":23}

        // List转 JSONArray
        List list = new ArrayList();
        list.add(new Person("Tom", 23));
        list.add(new Person("Jack", 23));
        JSONArray array = JSONArray.fromObject(list);
        System.out.println(array.toString());
        // [{"age":23,"name":"Tom"},{"age":23,"name":"Jack"}]

        // map转JSONObject
        Map map = new HashMap();
        map.put("name", "Tom");
        map.put("sex", "male");
        System.out.println(JSONObject.fromObject(map).toString());
        // {"sex":"male","name":"Tom"}

    }
}

课时14 14.打包ajax生成小工具

参数

option{
    method
    url
    asyn
    type
    callback
    params
    data
}

xml text json

后端接口

from flask import Flask, request, jsonify
from flask_cors import CORS


app = Flask(__name__)
CORS(app, supports_credentials=True)


@app.route("/json", methods=["GET", "POST"])
def json():
    username = request.args.get("username")

    if request.method == "POST":
        username = request.form.get("username")
        if request.is_json:
            username = request.json.get("username")

    return jsonify({"name": username})


if __name__ == '__main__':
    app.run(debug=True)

封装的工具 ajax-util.js

// 获取XMLHttpRequest对象
function createXMLHttpRequest() {
    try {
        // 大多数浏览器
        return new XMLHttpRequest();
    } catch (e) {
        try {
            // IE6.0
            new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                // IE name=Tom&age=23
 */
function encodeData(data) {
    if (!data) {
        return null;
    }

    let list = [];

    for (let [key, value] of Object.entries(data)) {
        list.push(`${key}=${value}`);
    }

    return list.join("&");
}

const CONTENT_TYPE = "Content-Type";

const contentTypeMap = {
    html: "text/html; charset=utf-8",
    xml: "text/xml; charset=utf-8",
    json: "application/json; charset=utf-8",
    form: "application/x-www-form-urlencoded"
}

/**
 * 
 * @param {*} option:
 *   method
 *   url
 *   asyn
 *   type
 *   callback
 *   params
 *   data 
 */
function ajax(option) {
    // 必传参数
    let url = option.url;
    let callback = option.callback;

    // 可选参数
    let method = option.method || "GET";
    let asyn = option.asyn || true;
    let params = option.params || {};
    let type = option.type || "html";
    let data = option.data || {};

    let xmlHttp = createXMLHttpRequest();

    // 处理响应数据
    xmlHttp.onreadystatechange = function () {
        // 双重判断 xmlHttp状态为服务器响应结束，服务器状态响应结束
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            // 获取响应结果
            let responseData = null;

            if (xmlHttp.responseXML) {
                responseData = xmlHttp.responseXML;
            }
            else {
                responseData = xmlHttp.responseText;
                try {
                    responseData = JSON.parse(responseData);
                } catch (e) {

                }
            }

            callback(responseData);
        }
    }

    // 处理请求数据
    if (params) {
        url = url + "?" + encodeData(params);
    }

    xmlHttp.open(method, url, asyn);
    xmlHttp.setRequestHeader(CONTENT_TYPE, contentTypeMap[type]);

    let sendData = null;
    if (type == "json") {
        sendData = JSON.stringify(data);
    } else {
        sendData = encodeData(data);
    }

    xmlHttp.send(sendData);
}

// console.log(encodeData(undefined));

测试代码

GET


POST

    





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

        // get方法
        let getBtn = document.getElementById("get-btn");

        getBtn.onclick = function () {
            ajax({
                url: "http://127.0.0.1:5000/json",
                method: "GET",
                params: {
                    "username": "Tom"
                },
                callback: function (data) {
                    console.log(data);
                    document.getElementById("get-text").innerHTML = data.name;
                }
            })
        };

        // post方法
        let postBtn = document.getElementById("post-btn");

        postBtn.onclick = function () {
            ajax({
                url: "http://127.0.0.1:5000/json",
                method: "POST",
                type: "json",
                params: {
                    "username": "Tom"
                },
                data: {
                    "username": document.getElementById("username").value
                },
                callback: function (data) {
                    console.log(data);
                    document.getElementById("post-text").innerHTML = data.name;
                }
            })
        }

    }