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

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

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



依赖


<dependency>
    <groupId>net.sf.json-lib</groupId>
    <artifactId>json-lib</artifactId>
    <version>2.4</version>
    <classifier>jdk15</classifier>
</dependency>



示例


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<Person> list = new ArrayList<Person>();
        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<String ,String> map = new HashMap<String ,String>();
        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<=5.5
                new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {
                console.log("浏览器版本太老了!");
                throw e;
            }
        }
    }
}
// 判断是否为IE浏览器
function isIE() {
    if (window.addEventListener) {
        return false;
    } else {
        return true;
    }
}
/**
 * 将对象转为url查询参数
 * @param {*} data 
 * { "name": "Tom", "age": 23 }
 * -> 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));


相关文章
|
5月前
|
设计模式 前端开发 JavaScript
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
46 0
|
5天前
|
JSON JavaScript 前端开发
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
10 0
|
4月前
|
前端开发 Java 关系型数据库
Java后台学习路线
Java后台学习路线
53 5
|
3月前
|
Java
图解java工程师学习路线
图解java工程师学习路线
209 0
|
5月前
|
JSON 前端开发 JavaScript
Ajax 学习总结
这是一个关于Ajax学习的总结,包括导入Ajax包、异步请求和表单验证。示例展示了如何使用jQuery进行Ajax请求,从后台获取并显示数据,同时提到了Json乱码问题的解决方法和表单数据的前后端交互。还给出了表单验证的简单示例,通过Ajax实时校验用户名。
49 2
|
5月前
|
Dubbo Java 应用服务中间件
Java外包是如何进入阿里的熬夜整理出Java后端学习路线
Java外包是如何进入阿里的熬夜整理出Java后端学习路线
|
5月前
|
XML JSON 前端开发
学习Ajax使用异步对象发送请求
Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。
59 3
|
5月前
|
移动开发 搜索推荐 Java
Java如何支持函数式编程?,作为移动开发程序员应该怎样去规划自己的学习路线
Java如何支持函数式编程?,作为移动开发程序员应该怎样去规划自己的学习路线
|
5月前
|
Java 数据库连接 API
Java 学习路线:基础知识、数据类型、条件语句、函数、循环、异常处理、数据结构、面向对象编程、包、文件和 API
Java 是一种广泛使用的、面向对象的编程语言,始于1995年,以其跨平台性、安全性和可靠性著称,应用于从移动设备到数据中心的各种场景。基础概念包括变量(如局部、实例和静态变量)、数据类型(原始和非原始)、条件语句(if、else、switch等)、函数、循环、异常处理、数据结构(如数组、链表)和面向对象编程(类、接口、继承等)。深入学习还包括包、内存管理、集合框架、序列化、网络套接字、泛型、流、JVM、垃圾回收和线程。构建工具如Gradle、Maven和Ant简化了开发流程,Web框架如Spring和Spring Boot支持Web应用开发。ORM工具如JPA、Hibernate处理对象与数
150 3
|
5月前
|
XML 开发框架 前端开发
Ajax学习(基础知识)
Ajax学习(基础知识)