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

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

课时1 1.ajax简介(异步与同步)

asynchronous javascript and xml

异步js和xml


1、异步交互和同步交互

同步 发送,等待 整个页面刷新

异步 发送,不等待 局部刷新


示例:异步刷新


<button id="btn">点击</button> 
<h2 id="text"></h2>
<script>
// 文档加载完成后马上执行
window.onload = function(){
    let btn = document.getElementById("btn");
    // 给btn注册点击事件监听
    btn.onclick = function(){
        let text = document.getElementById("text");
        text.innerHTML= "hello!";
    }
}
</script>


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

数据格式

text、xml、json

同步:


请求 ->

响应 <-


请求 ->

响应 <-



异步:


请求 ->

请求 ->


响应 <-

响应 <-



课时3 3.ajax的应用场景和优缺点

优点:

异步交互,增强用户体验

性能:只需要响应部分内容,服务器压力减少


缺点:

ajax不能应用在所有场景

ajax增多了对服务器的请求,给服务器增加压力


课时4 4.ajax四步操作

1、获取XMLHttpRequest


// 大多数浏览器
var xmlHttp = new XMLHttpRequest();
// IE6.0
var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
// IE<=5.5
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
1


编写一个创建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;
            }   
        }   
    }
}




2、连接服务器


xmlHttp.open("GET", "/url", true);

// 参数:请求方式,请求url,是否为异步


3、发送请求


xmlHttp.send(null);

// 参数:请求体内容,如果是GET,必须给出null,不然FireFox可能不发送


4、注册事件监听器

(1)5个状态:


0 刚创建

1 请求开始,调用open

2 请求发送完成 调用send

3 服务器开始响应

4 服务器响应结束



(2)获取响应内容


// 获取状态
var state = xmlHttp.readyState; 
// 得到服务器响应状态码 200, 404, 500
var status = xmlHttp.status;
// 得到服务器响应内容 
var content = xmlHttp.responseText; // 文本格式
var content = xmlHttp.responseXml; // xml格式,document对象



(3)注册监听事件


xmlHttp.onreadystatechange = function(){
    // 双重判断 xmlHttp状态为服务器响应结束,服务器状态响应结束
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
        var text = xmlHttp.responseText;
    }
}



课时5 5.ajax第一例:helloworld

为了便于测试,服务端使用Python语言

服务端 hello.py


# pip install flask, flask-cors
from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
CORS(app, supports_credentials=True)
@app.route("/")
def index():
    return "<h2>Hello!</h2>"
if __name__ == '__main__':
    app.run()



客户端 demo.html


<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;
            }   
        }   
    }
}
// 文档加载完成后马上执行
window.onload = function(){
    let btn = document.getElementById("btn");
    // 给btn点击事件注册监听
    btn.onclick = function(){
        let xmlHttp = createXMLHttpRequest();
        xmlHttp.open("GET", "http://127.0.0.1:5000/", true);
        xmlHttp.send();
        xmlHttp.onreadystatechange = function(){
            // 双重判断 xmlHttp状态为服务器响应结束,服务器状态响应结束
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
            var text = xmlHttp.responseText;
            let h2 = document.getElementById("text");
            h2.innerHTML= text;
        }
}
    }
}
</script>




6.ajax第二例:发送POST请求

多添加一个请求头


// 设置请求头
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 发送请求体
xmlHttp.send("username=Tom&age=23");


服务端接收函数 hello.py



@app.route("/post", methods=['POST'])
def post():
    username = request.form.get("username")
    age = request.form.get("age")
    return f"<h2>username: {username}, age: {age}</h2>"



客户端修改 demo.html


xmlHttp.open("POST", "http://127.0.0.1:5000/post", true);

xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xmlHttp.send("username=Tom&age=23");


课时7 7.ajax第三例:用户名是否已被注册

客户端要求:

1、注册表单

2、监听用户名文本框失去焦点onblur事件

3、获取文本框内容,通过ajax异步发送给服务器

4、如果为1 显示:用户名已被注册

如果为0 什么都不显示


<meta charset="utf-8">
<style>
    #errorText {
        color: red;
    }
</style>
<form action="">
    <input type="text" name="username" id="username">
    <span id="errorText"></span>
</form>
<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;
                }
            }
        }
    }
    // 文档加载完成后马上执行
    window.onload = function () {
        let username = document.getElementById("username");
        // 失去焦点注册事件监听
        username.onblur = function () {
            let xmlHttp = createXMLHttpRequest();
            xmlHttp.open("POST", "http://127.0.0.1:5000/validate", true);
            xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xmlHttp.send("username=" + username.value);
            xmlHttp.onreadystatechange = function () {
                // 双重判断 xmlHttp状态为服务器响应结束,服务器状态响应结束
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    var text = xmlHttp.responseText;
                    let errorText = document.getElementById("errorText");
                    if (text == '1') {
                        errorText.innerHTML = "用户名已被注册";
                    } else {
                        errorText.innerHTML = "";
                    }
                }
            }
        }
    }
</script>




服务端要求:

1、获取客户端传递的用户名参数

2、判断是否为demo,是返回1,否返回0


@app.route("/validate", methods=['POST'])
def validate():
    username = request.form.get("username")
    if username == "demo":
        return "1"
    else:
        return "0"
相关文章
|
25天前
|
Java 调度 开发者
Java线程池ExecutorService学习和使用
通过学习和使用Java中的 `ExecutorService`,可以显著提升并发编程的效率和代码的可维护性。合理配置线程池参数,结合实际应用场景,可以实现高效、可靠的并发处理。希望本文提供的示例和思路能够帮助开发者深入理解并应用 `ExecutorService`,实现更高效的并发程序。
33 10
|
28天前
|
Java 数据库连接 数据库
【潜意识Java】深度分析黑马项目《苍穹外卖》在Java学习中的重要性
《苍穹外卖》项目对Java学习至关重要。它涵盖了用户管理、商品查询、订单处理等模块,涉及Spring Boot、MyBatis、Redis等技术栈。
76 4
|
28天前
|
前端开发 Java 数据库连接
【潜意识Java】深度解读JavaWeb开发在Java学习中的重要性
深度解读JavaWeb开发在Java学习中的重要性
29 4
|
28天前
|
存储 移动开发 算法
【潜意识Java】Java基础教程:从零开始的学习之旅
本文介绍了 Java 编程语言的基础知识,涵盖从简介、程序结构到面向对象编程的核心概念。首先,Java 是一种高级、跨平台的面向对象语言,支持“一次编写,到处运行”。接着,文章详细讲解了 Java 程序的基本结构,包括包声明、导入语句、类声明和 main 方法。随后,深入探讨了基础语法,如数据类型、变量、控制结构、方法和数组。此外,还介绍了面向对象编程的关键概念,例如类与对象、继承和多态。最后,针对常见的编程错误提供了调试技巧,并总结了学习 Java 的重要性和方法。适合初学者逐步掌握 Java 编程。
52 1
|
4月前
|
XML Java 编译器
Java学习十六—掌握注解:让编程更简单
Java 注解(Annotation)是一种特殊的语法结构,可以在代码中嵌入元数据。它们不直接影响代码的运行,但可以通过工具和框架提供额外的信息,帮助在编译、部署或运行时进行处理。
124 43
Java学习十六—掌握注解:让编程更简单
|
4月前
|
存储 SQL 小程序
JVM知识体系学习五:Java Runtime Data Area and JVM Instruction (java运行时数据区域和java指令(大约200多条,这里就将一些简单的指令和学习))
这篇文章详细介绍了Java虚拟机(JVM)的运行时数据区域和JVM指令集,包括程序计数器、虚拟机栈、本地方法栈、直接内存、方法区和堆,以及栈帧的组成部分和执行流程。
66 2
JVM知识体系学习五:Java Runtime Data Area and JVM Instruction (java运行时数据区域和java指令(大约200多条,这里就将一些简单的指令和学习))
|
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月前
|
JSON JavaScript 前端开发
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
《进阶篇第7章》学习vue中的ajax之后,练习vue案例-github用户搜索案例
29 0
|
4月前
|
存储 算法 Java
带你学习java的数组军队列
带你学习java的数组军队列
48 0