Javaweb基础知识复习------AJAX
AJAX相关知识复习
简而言之，就是可以用AJAX+HTML代替JSP页面，也可以进行异步交互，更新部分界面
Ajax案例
后端代码就是一个servlet文件，前端页面的代码也不是很常用，可以在下面这个网址这里找到相关代码：https://www.w3school.com.cn/js/js_ajax_intro.asp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//创建核心对象
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//发送请求
xhttp.open("GET", "http://localhost:8080/ttCookieLogin_war_exploded/ajaxServlet");
xhttp.send();
//获取响应
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
}
};
</script>
</body>
</html>
相关的创建核心对象、发送请求、获取响应的代码操作在上述网址中均能找到！
AJAX案例------验证用户是否存在
后端代码：
//selectUserServlet.java
package org.example.web.Ajax;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class selectUserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String username=req.getParameter("username");
boolean flag=true;
resp.getWriter().write(""+flag);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doGet(req,resp);
}
}
<!--register.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册界面</title>
</head>
<body>
<center>
<tr>
已有账号？<a href="index.jsp">登录</a>
</tr>
<form action="registerServlet" method="post">
<tr>
<td>用户名：</td>
<td><input type="text" id="username" name="username" placeholder="请输入用户名"></td>
<br>
<div id="errorUsername">${register_msg}</div>
</tr>
<p>
<tr>
<td>密码：</td>
<td><input type="text" name="password" placeholder="请输入密码"></td>
</tr>
<p>
<tr>
<td>验证码：</td>
<td>
<input name="checkCode" id="checkCode" type="text">
</td>
<td><img src="checkServlet" id="checkCodeImg"></td>
<td><a href="#" id="changeImg">看不清？</a></td>
</tr>
<p>
<tr>
<button type="submit" value="提交">提交</button>
</tr>
</form>
<script>
document.getElementById("changImg").onclick=function(){
document.getElementById("checkCodeImg").src="/ttCookieLogin/checkServlet?"+new Date().getMilliseconds();
}
</script>
</center>
<script>
//点击事件
document.getElementById("username").onblur=function(){
var username=this.value;
//创建核心对象
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//发送请求
xhttp.open("GET", "http://localhost:8080/ttCookieLogin_war_exploded/ajaxServlet?username="+username);
xhttp.send();
//获取响应
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//alert(this.responseText);
//判断
if(this.responseText=="true"){
document.getElementById("errorUsername").style.display='';
}else{
document.getElementById("errorUsername").style.display='none';
}
}
};
}
</script>
</body>
</html>
核心代码在此：
Javaweb基础知识复习------AJAX的更多相关文章
- JavaWeb基础知识总结
JavaWeb基础知识总结. 1.web服务器与HTTP协议 Web服务器 l WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. l Internet上供 ...
- 超详细的Java面试题总结（四 ）之JavaWeb基础知识总结
系列文章请查看: 超详细的Java面试题总结(一)之Java基础知识篇 超详细的Java面试题总结(二)之Java基础知识篇 超详细的Java面试题总结(三)之Java集合篇常见问题 超详细的Java ...
- spring 基础知识复习
spring是一个分层架构,由 7 个定义良好的模块组成.Spring 模块构建在核心容器之上,核心容器定义了创建.配置和管理 bean 的方式. 组成spring框架的每个模块(或组件)都可单独存在 ...
- JavaScript进阶【三】JavaScript面向对象的基础知识复习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ZYNQ笔记（0）：C语言基础知识复习
ZYNQ的SDK是用C语言进行开发的,C语言可以说是当今理工类大学生的必备技能.我本科学C语言时就是对付考试而已,导致现在学ZYNQ是一脸懵逼.现在特开一帖,整理一下C语言的基础知识. 一.定义 1. ...
- [Java面试三]JavaWeb基础知识总结.
1.web服务器与HTTP协议 Web服务器 l WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. l Internet上供外界访问的Web资源分为: • 静 ...
- JavaWeb基础知识
一.WEB基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web ...
- MySQL数据库基础知识复习
现在是2020年寒假,这也是新年写的第一篇博客,用了十几天的时间自学了数据库基础部分,想总结一下得失同时并通过写博客来复习前面学的知识点. 个人: 1.本来是计划一周学完基础部分的178p但没能完成这 ...
- JavaWeb 基础知识补充
软件架构 1. C/S: Client/Server 客户端/服务器端 * 在用户本地有一个客户端程序,在远程有一个服务器端程序 * 如:QQ,迅雷... ...
- android基础知识复习——RelativeLayout布局属性、背景、半透明设置（XML设置）
转自:http://blog.csdn.net/fansongy/article/details/6817968 复习布局与XML,写了一个空的登录界面.XML的注释我写在当行的后面了.程序运行图: ...
随机推荐
- docker 搭建mysql主从复制环境（一主两从）
一主多从配置 服务器规划:使用docker方式创建,主从服务器IP一致,端口号不一致 主服务器:容器名docker-mysql-master,端口3306 从服务器:容器名docker-mysql-s ...
- POJ 1830 开关问题 异或高斯消元
题目链接 将题目转化为矩乘问题 构建一个 \(n \times n\) 的开关信息矩阵,其中第 \(i\) 列第 \(j\) 行的元素为 \(0 / 1\) 代表在改变开关 \(i\) 的情况下开关 ...
- 使用Wireshark完成实验1
用来观察协议执行实体之间交换的报文的基本工具被称为分组嗅探器(packet sniffer),一个分组嗅探器被动地拷贝(嗅探)计算机发送和接受的报文,也能显示出这些被捕获报文的各个协议字段的内容.Wi ...
- 【BOOK】动态渲染页面爬取--Selenium库
动态渲染页面爬取 JavaScript动态渲染 其中一种方式是Ajax请求,通过直接分析Ajax再用requests来实现数据爬取 另外一种方式是模拟浏览器运行 一. Selenium库 Seleni ...
- 作业三：CART回归树
作业三:CART回归树 20大数据三班 博客链接 学号 201613336 问题一: 表1为拖欠贷款人员训练样本数据集,使用CART算法基于该表数据构造决策树模型,并使用表2中测试样本集确定剪枝后的最 ...
- react+antd upload实现图片宽高、视频宽高尺寸校验
图片宽高校验方法: // 上传图片尺寸限制 const checkIconWH = (file: any) => { return new Promise<void>(functio ...
- jdkman（jdk版本管理工具）安装和使用（mac）
1.安装jdkman 1.1.下载命令 curl -s "https://get.sdkman.io" | bash 执行后,sdkman安装到目录$HOME/.sdkman/,比 ...
- std::ref
The std::thread constructor copies the supplied values, without converting to the expected argument ...
- 六、js创建页码器：分页、上一页下一页、省略页码
表格数据太多,需要做成分页.因此需要写一个页码器. 1,初始化页码 获取数据之后渲染页码器,页码器初始化,小于6页的全部展示,否则展示前四页,后面是省略号,最后展示尾页.默认选中第一页,禁用前一页的箭 ...
- windows系统下查找开放端口的监听程序
C:\Program Files (x86)\Nmap>nmap 127.0.0.1Starting Nmap 7.92 ( https://nmap.org ) at 2022-07-15 1 ...