Java基础入门day62

day62

AJAX

概念

AJAX: Asynchronous Javascript And XML

  • AJAX是一种无需重新加载整个网页的情况下,能够更新部分网页的技术

  • AJAX是一种用于创建快速动态网页的技术

  • 通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新

  • 传统的网页如果需要更新内容,必须要重新加载整个网页,而AJAX不需要

工作原理

工作原理图

AJAX案例

使用AJAX来实现一个判断用户名是否存在的案例

<%--Created by IntelliJ IDEA.User: AdministratorDate: 2024/5/31Time: 9:06To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>registry</title>
</head>
<body>
<form action="registry" method="post">
​username: <input type="text" name="username" οnblur="checkUsername()" id="username" /><SPAN id="usernameSpan"></span><br />
​password: <input type="password" name="password" /><br />
​<input type="submit" value="registry" />
</form>
​
<script>function checkUsername(){var username = document.getElementById("username").value;
​// alert(username)
​//    原生AJAX开发有四个步骤://        1.  创建XMLHttpRequest对象//        2.  使用XMLHttpRequets对象的open方法创建请求,参数:请求方式,请求地址,是否异步//        3.  使用XMLHttpRequest对象的send方法发送请求,参数:请求参数//        4.  使用XMLHttpRequest对象的onreadystatechange事件监听请求状态,参数:请求回调函数var xhr = new XMLHttpRequest();
​xhr.open("GET","checkUser?username="+username,true);
​xhr.send();
​xhr.onreadystatechange = function(){if(xhr.readyState == 4 && xhr.status == 200){var result = xhr.responseText;
​// alert(result)
​if(result == "1"){// alert("用户名已存在");document.getElementById("usernameSpan").innerHTML = "<FONT COLOR='RED'>用户名已存在</FONT>";}else{// alert("用户名可用");document.getElementById("usernameSpan").innerHTML = "<FONT COLOR='GREEN'>用户名可用</FONT>";}}}
}
</script>
</body>
</html>

其中open方法中的三个参数:

  1. 请求方式,一般是get或者post

  2. 请求的url,这个url将交给后端进行处理

  3. 是否是异步,使用AJAX一般都是期望使用异步,所以传递的参数为true

该open方法中的第二个参数url的值为checkUser,那么会将请求交给checkUser所对应的servlet,还有问号传参

只有真正指向了XMLHttpRequest对象的send方法才真正将请求交给了后端

后端将执行checkUser所对应的Servlet

package com.saas.day62;
​
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
​
@WebServlet("/checkUser")
public class CheckUserServlet extends HttpServlet {
​@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");resp.setCharacterEncoding("utf-8");resp.setContentType("text/html;charset=utf-8");
​
​String username = req.getParameter("username");
​if("admin".equalsIgnoreCase(username)){resp.getWriter().write("1");}else{resp.getWriter().write("0");}}
}

该Servlet中动态拿到用户从前端传递过来的username,拿到username与后台数据库进行比对(当前案例是模拟)

如果用户名存在则使用HttpServletResponse对象的getWriter方法的write方法将1写给前端,如果不存在则将0写给前端

这样就又回到了Registry.jsp页面

来到的AJAX的第四部,解释XMLHttpRequest对象的responseText可以获取到这个1或者0

通过获取到的1或者0动态更新当前页面的span内容,让它正确显示用户的提示信息

XMLHttpRequest

创建对象

XMLHttpRequest对象是AJAX的基础

所有的现代浏览器都支持该对象,新版本直接new关键字可以创建,老版本(IE5或者IE6)需要使用ActiveObject

该对象用于在后台与服务器交换数据。

var xhr = new XMLHttpRequest();                     //  主流浏览器都支持
var xhr = new ActiveXObject("Microsoft.XMLHTTP");   //  ie5或者ie6
    var xhr ;
​if(window.XMLHttpRequest){          //  主流浏览器xhr = new XMLHttpRequest();} else{                             //  ie5或者ie6xhr = new ActiveXObject("Microsoft.XMLHTTP");}
XMLHttpRequest请求

如需将请求发送到服务器,我们使用XMLHttpRequest对象的open()和send()方法

xhr.open(method, url, async);
xhr.send();

open方法

参数描述
methodGET或者POST,代表请求方式
url请求在服务器上的位置
async是否是异步,true为异步,false为同步

send()方法将请求发送到服务器

readyState
  • 每当readyState改变时,就会触发onreadystatechange事件

  • 在onreadystatechange事件中,我们规定当服务器响应已做好处理的准备是所执行的任务

  • readyState属性存有XMLHttpRequest对象的状态信息

  • 当readyState值为4时status为200时,表示响应已就绪

status的值的对照表

响应码描述
200交易成功
404请求资源未找到
500服务器内部错误
405请求方式不正确

readyState

readyState值描述
0请求未初始化
1服务器连接已建立
2请求已接收
3请求处理中
4请求已完成且响应已就绪
XMLHttpRequest响应

如需获取来自服务器的响应,可以使用XMLHttpRequest对象的responseText或者responseXML属性

属性描述
responseText获取字符串形式的响应数据
responseXML获取XML格式的响应数据
回调函数

回调函数时一种以参数形式传递给另一个函数的函数

该函数调用包含URL以及发生onreadystatechange事件时执行的任务

<%--Created by IntelliJ IDEA.User: AdministratorDate: 2024/5/31Time: 9:06To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>registry</title>
</head>
<body>
<form action="registry" method="post">
​username: <input type="text" name="username" οnblur="checkUsername()" id="username" /><SPAN id="usernameSpan"></span><br />
​password: <input type="password" name="password" /><br />
​<input type="submit" value="registry" />
</form>
​
<script>function checkUsername(){var username = document.getElementById("username").value;
​// alert(username)
​//    原生AJAX开发有四个步骤://        1.  创建XMLHttpRequest对象//        2.  使用XMLHttpRequets对象的open方法创建请求,参数:请求方式,请求地址,是否异步//        3.  使用XMLHttpRequest对象的send方法发送请求,参数:请求参数//        4.  使用XMLHttpRequest对象的onreadystatechange事件监听请求状态,参数:请求回调函数var xhr ;
​if(window.XMLHttpRequest){          //  主流浏览器xhr = new XMLHttpRequest();} else{                             //  ie5或者ie6xhr = new ActiveXObject("Microsoft.XMLHTTP");}
​xhr.open("GET","checkUser?username="+username,true);
​xhr.send();
​xhr.onreadystatechange = function(){alert(xhr.readyState)if(xhr.readyState == 4 && xhr.status == 200){var result = xhr.responseText;
​// alert(result)
​if(result == "1"){// alert("用户名已存在");document.getElementById("usernameSpan").innerHTML = "<FONT COLOR='RED'>用户名已存在</FONT>";}else{// alert("用户名可用");document.getElementById("usernameSpan").innerHTML = "<FONT COLOR='GREEN'>用户名可用</FONT>";}}}
}
</script>
</body>
</html>

JSON

简介

JSON: JavaScript Object notation,js的对象标记,是一种轻量级的数据交换格式。

完全独立于编程语言的文本格式来存储和表示数据

简洁、清晰的层次结构使得JSON成为理想的数据交换语言

易于阅读和编写,同时也易于机器解析和生成,并有效地提高网络传输效率

相对于xml格式会显得更加简单

<students><student><sid>9527</sid><name>zhouxingxing</name><score>99</score><birth><year>1999</year><month>11</month><day>11</day></brith></student><student><sid>9527</sid><name>zhouxingxing</name><score>99</score></student><student><sid>9527</sid><name>zhouxingxing</name><score>99</score></student><student><sid>9527</sid><name>zhouxingxing</name><score>99</score></student><student><sid>9527</sid><name>zhouxingxing</name><score>99</score></student>
</students>

相较于以上的xml格式的数据,如果使用JSON,将以如下方式呈现:

[{sid: 9527, name: "zhouxingxing", score:99, birth:{year: 1999, month: 11, day: 11}},{sid: 9527, name: "zhouxingxing", score:99, birth:{year: 1999, month: 11, day: 11}},{sid: 9527, name: "zhouxingxing", score:99, birth:{year: 1999, month: 11, day: 11}},{sid: 9527, name: "zhouxingxing", score:99, birth:{year: 1999, month: 11, day: 11}},{sid: 9527, name: "zhouxingxing", score:99, birth:{year: 1999, month: 11, day: 11}}
]

语法

  • []代表的时JSON数组

  • {}代表的时JSON对象

  • ""表示属性名或者字符串类型的值

  • :表示属性和属性值之间的间隔符

  • ,代表多个属性的间隔或者时多个元素的间隔

FastJSON

FastJSON是一个Java库,可以将Java对象转换成JSON格式,也可以将JSON格式的字符串转换为Java对象

该类库提供了toJSONString()和parseObject()方法将Java对象与JSON对象相互转换

package com.saas.test;
​
import com.alibaba.fastjson.JSON;
import com.saas.entity.Birth;
import com.saas.entity.Student;
​
import java.util.ArrayList;
import java.util.List;
​
public class TestJSON01 {
​public static void main(String[] args) {Student s = new Student();
​s.setSid(1);s.setName("张三");
//        s.setAge(20);s.setSex("男");s.setAddress("北京");s.setPhone("123456789");
​Birth birth = new Birth();birth.setMonth(1);birth.setDay(1);birth.setYear(2000);
​s.setBirth(birth);
​System.out.println(s);
​System.out.println("==============================");
​String stuJson = JSON.toJSONString(s);System.out.println(stuJson);
​System.out.println("==============================");
​Student s2 = JSON.parseObject(stuJson, Student.class);System.out.println(s2);
​System.out.println("==============================");
​List<Student> stus = new ArrayList<>();
​stus.add(s);stus.add(s2);
​String stusJson = JSON.toJSONString(stus);System.out.println(stusJson);
​System.out.println("==============================");
​List<Student> stus2 = JSON.parseArray(stusJson, Student.class);System.out.println(stus2);}
}

该FastJSON的实现需要依赖于fastjson的第三方jar

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/20841.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Hbase 面试题(三)

1. 请表述Hbase 实时查询的原理和方式 &#xff1f; HBase支持实时查询&#xff0c;这意味着用户可以即时地访问和检索存储在HBase中的数据。HBase的实时查询原理和方式涉及以下几个关键方面&#xff1a; 内存存储&#xff08;MemStore&#xff09;&#xff1a; 当数据被写入H…

11.3 冒泡排序

目录 11.3 冒泡排序 11.3.1 算法流程 11.3.2 效率优化 11.3.3 算法特性 11.3 冒泡排序 冒泡排序&#xff08;bubble sort&#xff09;通过连续地比较与交换相邻元素实现排序。这个过程就像气泡从底部升到顶部一样&#xff0c;因此得名冒泡排序。 如图 11-4 所示…

【TIPs】 Visual Stadio 2019 中本地误使用“git的重置 - 删除更改 -- hard”后,如何恢复?

环境&#xff1a; VS 2019Windows10本地版本管理&#xff08;非远程&#xff09; 前言&#xff1a; git 在Visual Stadio 2019中集成了git的版本管理&#xff0c;在本地用来做版本管理&#xff0c;本来比较好用。 不过有一次&#xff0c;由于拿最初始的版本的时候&#xf…

JsonCpp源码跨平台编译

1.macos编译jsoncpp: https://github.com/open-source-parsers/jsoncpp.git 克隆jsoncpp源码 使用CMake进行编译 生成makefile mkdir build cd build cmake ../ 编译: make编译并运行测试成功:

数据的表示和运算

目录 一.各进制间的相互转换 1.各进制转化为10进制 2.二进制和八进制&#xff0c;十六进制之间地相互转化 3.十进制转换为其他进制 二.BCD码&#xff08;Binary-Coded Decimal&#xff0c;用二进制编码的十进制&#xff09; 1.8421码 2.余3码 3.2421码 三.无符号整数 …

Pytorch的学习

1.基本数据&#xff1a;Tensor Tensor&#xff0c;即张量&#xff0c;是PyTorch中的基本操作对象&#xff0c;可以看做是包含单一数据类型元素的多维矩阵。从使用角度来看&#xff0c;Tensor与NumPy的ndarrays非常类似&#xff0c;相互之间也可以自由转换&#xff0c;只不过Te…

RabbitMQ一、RabbitMQ的介绍与安装(docker)

一、RabbitMQ相关名词解释 MQ MQ全称Message Queue&#xff08;消息队列&#xff09;&#xff0c;是在消息的传输过程中保存消息的容器。 多用于系统之间的异步通信。 常见的两种通信方式&#xff1a; 同步通信&#xff1a;同步通信相当于两个人当面对话&#xff0c;你一言我…

Qt | QSplitter(分离器或分隔符)、QSplitterHandle 类(分界线)

​01、一、QSplitter 类(分离器) 1、QSplitter 类继承自 QFrame 类,也就是说该类是一个带有边框的可视部件。 2、QSplitter 类实现分离器,分离器用于分离两个部件,用户可通过拖动部件之间的分界线来调整子部件的大小。 3、QSplitter 的原理(见上图):QSplitter 的实现原理…

css 中clip 属性和替代方案 clip-path属性使用

clip clip 属性概述 作用&#xff1a;clip 属性用于定义一个裁剪区域&#xff0c;该区域外的元素内容将不可见。适用元素&#xff1a;clip 属性只对绝对定位&#xff08;position: absolute&#xff09;或固定定位&#xff08;position: fixed&#xff09;的元素有效&#xf…

机器学习第四十一周周报 JTFT

文章目录 week41 JTFT摘要Abstract1. 题目2. Abstract3. 网络架构3.1 JTFT3.2 具有可学习频率的稀疏FD表示3.3 用于提取跨渠道依赖关系的低阶注意力层 4. 文献解读4.1 Introduction4.2 创新点4.3 实验过程 5. 结论小结参考文献 week41 JTFT 摘要 本周阅读了题为A Joint Time-…

太空音响器

目录 1&#xff0e;课程设计项目 2.任务和要求 3.总体功能设计与仿真 3.1.元器件汇总 3.2.总体方案设计 3.3 总体电路仿真 4.单元模块设计及电路仿真 4.1 互补型振荡器电路 5.组装&#xff0c;调试与测试 6.分析与总结 7.参考文献 1&#xff0e;课程设…

【scikit-learn010】sklearn算法模型清单实战及经验总结(已更新)

1.一直以来想写下基于scikit-learn训练AI算法的系列文章,作为较火的机器学习框架,也是日常项目开发中常用的一款工具,最近刚好挤时间梳理、总结下这块儿的知识体系。 2.熟悉、梳理、总结下scikit-learn框架模型算法包相关技术点及经验。 3.欢迎批评指正,欢迎互三,跪谢一键…

【简单介绍下K-means聚类算法】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

rpmbuild多进程批量编译脚本

脚本用法 使用手册 bash spec.sh --help Please ensure the directory ~/rpmbuild exists, And the script can execute in any directory.Usage: bash spec.sh [OPTION]... [*.spec]... [OPTION]...or: bash spec.sh [*.spec]... [OPTION]... [*.spec]... rpmbuild all sp…

2024华为OD机试真题-寻找最优的路测线路-(C++/Java/Python)-C卷D卷-200分

【华为OD机试】-(A卷+B卷+C卷+D卷)-2024真题合集目录 【华为OD机试】-(C卷+D卷)-2024最新真题目录 题目描述 评估一个网络的信号质量,其中一个做法是将网络划分为栅格,然后对每个栅格的信号质量计算。 路测的时候,希望选择一条信号最好的路线(彼此相连的栅格集合)进行…

机器学习各个算法的优缺点!(上篇) 建议收藏。

下篇地址&#xff1a;机器学习各个算法的优缺点&#xff01;&#xff08;下篇&#xff09; 建议收藏。-CSDN博客 纯干货&#xff01;&#xff01; 回归 正则化算法 集成算法 决策树算法 支持向量机 降维算法 聚类算法 贝叶斯算法 人工神经网络 深度学习 感兴趣的朋友…

C++11 在 Windows 环境下的多线程编程指南

引言 随着多核处理器的普及&#xff0c;利用多线程编程来提升应用程序性能变得越来越重要。C11 标准库引入了一系列用于多线程编程的API&#xff0c;使得多线程编程变得更加简洁和高效。 一、基本概念 在开始编写多线程代码之前&#xff0c;了解一些基本概念是非常重要的&am…

硬币检测电路设计

一、来源&#xff1a;凡亿教育 第一场&#xff1a;硬币检测装置原理分析、电路设计以及器件选型_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1Zh4y1V7Px/?p1&vd_source43eb1cb50ad3175d7f3b9385905cd88f 二、开发软件&#xff1a;KEIL MDK 三、主控芯片&#…

PostgreSQL常用插件

PostgreSQL 拥有许多常用插件&#xff0c;这些插件可以大大增强其功能和性能。以下是一些常用的 PostgreSQL 插件&#xff1a; 性能监控和优化 pg_stat_statements 1.提供对所有 SQL 语句执行情况的统计信息。对调优和监控非常有用。 2.安装和使用&#xff1a; pg_stat_k…

Vuex:全面指南及使用示例

学习 Vuex&#xff1a;全面指南及使用示例 Vuex 是一个专为 Vue.js 应用设计的状态管理库。它采用集中式存储管理应用的所有组件的状态&#xff0c;并以相应的规则保证状态以一种可预测的方式发生变化。本文将详细介绍 Vuex 的核心概念和使用方法&#xff0c;并通过一个完整的…