(九)AJAX

news/2024/4/19 4:43:22/

一、AJAX 概述

AJAX (Asynchronous JavaScript And XML) :异步的 JavaScript XML
AJAX 作用有以下两方面:
(1)与服务器进行数据交换 :通过 AJAX 可以给服务器发送请求,服务器将数据直接响应回给浏览器。
使用AJAX和服务器进行通信,以达到使用 HTML+AJAX来 替换JSP页面

(2)异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用校验,等等

二、AJAX 快速入门

(1)编写AjaxServlet,并使用response输出字符串

(2)创建XMLHttpRequest对象:用于和服务器交换数据

(3)向服务器发送请求

(4)获取服务器响应数据

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>//1. 创建核心对象var xhttp;if (window.XMLHttpRequest) {xhttp = new XMLHttpRequest();} else {// code for IE6, IE5xhttp = new ActiveXObject("Microsoft.XMLHTTP");}//2. 发送请求xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet");xhttp.send();//3. 获取响应xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {alert(this.responseText);}};</script></body>
</html>

三、使用AJAX验证用户名是否存在

需求:在完成用户注册时,当用户名输入框失去焦点时,校验用户名是否在数据库已存在
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>欢迎注册</title><link href="css/register.css" rel="stylesheet">
</head>
<body><div class="form-div"><div class="reg-content"><h1>欢迎注册</h1><span>已有帐号?</span> <a href="login.html">登录</a></div><form id="reg-form" action="#" method="get"><table><tr><td>用户名</td><td class="inputs"><input name="username" type="text" id="username"><br><span id="username_err" class="err_msg" style="display: none">用户名已存在</span></td></tr><tr><td>密码</td><td class="inputs"><input name="password" type="password" id="password"><br><span id="password_err" class="err_msg" style="display: none">密码格式有误</span></td></tr><tr><td>验证码</td><td class="inputs"><input name="checkCode" type="text" id="checkCode"><img src="imgs/a.jpg"><a href="#" id="changeImg">看不清?</a></td></tr></table><div class="buttons"><input value="注 册" type="submit" id="reg_btn"></div><br class="clear"></form></div><script>//1. 给用户名输入框绑定 失去焦点事件document.getElementById("username").onblur = function () {//2. 发送ajax请求// 获取用户名的值var username = this.value;//2.1. 创建核心对象var xhttp;if (window.XMLHttpRequest) {xhttp = new XMLHttpRequest();} else {// code for IE6, IE5xhttp = new ActiveXObject("Microsoft.XMLHTTP");}//2.2. 发送请求xhttp.open("GET", "http://localhost:8080/ajax-demo/selectUserServlet?username="+username);xhttp.send();//2.3. 获取响应xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {//alert(this.responseText);//判断if(this.responseText == "true"){//用户名存在,显示提示信息document.getElementById("username_err").style.display = '';}else {//用户名不存在 ,清楚提示信息document.getElementById("username_err").style.display = 'none';}}};}</script>
</body>
</html>

四、Axios 异步框架

Axios 对原生的 AJAX 进行封装,简化书写。
Axios 官网是: https://www.axios - http.cn

1. Axios 快速入门

(1)引入 Axios 的 js 文件

(2)使用 axios 发送请求,并获取响应结果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script src="js/axios-0.18.0.js"></script><script>//1. getaxios({method:"get",url:"http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan"}).then(function (resp) {alert(resp.data);})//2. postaxios({method:"post",url:"http://localhost:8080/ajax-demo/axiosServlet",data:"username=zhangsan"}).then(function (resp) {alert(resp.data);})</script></body>
</html>

2. Axios 请求方式别名

为了方便起见, Axios 已经为所有支持的请求方法提供了别名。
get 请求 : axios.get(url[,config])
delete 请求 : axios.delete(url[,config])
head 请求 : axios.head(url[,config])
options 请求 : axios.option(url[,config])
post 请求: axios.post(url[,data[,config])
put 请求: axios.put(url[,data[,config])
patch 请求: axios.patch(url[,data[,config])
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script src="js/axios-0.18.0.js"></script><script>//1. getaxios.get("http://localhost:8080/ajax-demo/axiosServlet?username=zhangsan").then(function (resp) {alert(resp.data);})//2. postaxios.post("http://localhost:8080/ajax-demo/axiosServlet","username=zhangsan").then(function (resp) {alert(resp.data);})</script></body>
</html>

五、JSON

1. JSON 概述

概念: JavaScript Object Notation 。JavaScript 对象表示法
作用:由于其语法格式简单,层次结构鲜明,现多用于作为 数据载体 ,在网络中进行数据传输。

2. JSON 基础语法

JSON 本质就是一个字符串,但是该字符串内容是有一定的格式要求的。 定义格式如下:
var 变量名 = '{"key":value,"key":value,...}';
value 的数据类型分为如下
(1)数字(整数或浮点数)
(2)字符串(使用双引号括起来)
(3)逻辑值( true 或者 false
(4)数组(在方括号中)
(5)对象(在花括号中)
(6)null
var jsonStr = '{"name":"zhangsan","age":23,"addr":["北京","上海","西安"]}'
获取数据:
js对象.属性名
jsonStr.name

3. JSON 数据和 Java 对象转换

请求数据:JSON字符串转为Java对象
响应数据:Java对象转为JSON字符串

Fastjson 是阿里巴巴提供的一个 Java 语言编写的高性能功能完善的 JSON 库,是目前 Java 语言中最快的 JSON 库,可以实现 Java 对象和 JSON 字符串的相互转换。

(1)导入坐标

        <dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.62</version></dependency>

(2)Java对象转JSON

String jsonStr = JSON.toJSONString(obj);

(3)JSON字符串转Java对象

User user = JSON.parseObject(jsonStr, User.class);

4. 案例

@WebServlet("/selectAllServlet")
public class SelectAllServlet extends HttpServlet {private BrandService brandService = new BrandService();@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1. 调用Service查询List<Brand> brands = brandService.selectAll();//2. 将集合转换为JSON数据   序列化String jsonString = JSON.toJSONString(brands);//3. 响应数据response.setContentType("text/json;charset=utf-8");response.getWriter().write(jsonString);}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<a href="addBrand.html"><input type="button" value="新增"></a><br>
<hr>
<table id="brandTable" border="1" cellspacing="0" width="100%"><tr><th>序号</th><th>品牌名称</th><th>企业名称</th><th>排序</th><th>品牌介绍</th><th>状态</th><th>操作</th></tr><tr align="center"><td>1</td><td>三只松鼠</td><td>三只松鼠</td><td>100</td><td>三只松鼠,好吃不上火</td><td>启用</td><td><a href="#">修改</a> <a href="#">删除</a></td></tr><tr align="center"><td>2</td><td>优衣库</td><td>优衣库</td><td>10</td><td>优衣库,服适人生</td><td>禁用</td><td><a href="#">修改</a> <a href="#">删除</a></td></tr><tr align="center"><td>3</td><td>小米</td><td>小米科技有限公司</td><td>1000</td><td>为发烧而生</td><td>启用</td><td><a href="#">修改</a> <a href="#">删除</a></td></tr>
</table><script src="js/axios-0.18.0.js"></script><script>//1. 当页面加载完成后,发送ajax请求window.onload = function () {//2. 发送ajax请求axios({method:"get",url:"http://localhost:8080/brand-demo/selectAllServlet"}).then(function (resp) {//获取数据let brands = resp.data;let tableData = " <tr>\n" +"        <th>序号</th>\n" +"        <th>品牌名称</th>\n" +"        <th>企业名称</th>\n" +"        <th>排序</th>\n" +"        <th>品牌介绍</th>\n" +"        <th>状态</th>\n" +"        <th>操作</th>\n" +"    </tr>";for (let i = 0; i < brands.length ; i++) {let brand = brands[i];tableData += "\n" +"    <tr align=\"center\">\n" +"        <td>"+(i+1)+"</td>\n" +"        <td>"+brand.brandName+"</td>\n" +"        <td>"+brand.companyName+"</td>\n" +"        <td>"+brand.ordered+"</td>\n" +"        <td>"+brand.description+"</td>\n" +"        <td>"+brand.status+"</td>\n" +"\n" +"        <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +"    </tr>";}// 设置表格数据document.getElementById("brandTable").innerHTML = tableData;})}</script></body>
</html>


http://www.ppmy.cn/news/186955.html

相关文章

苹果处理器性能排行榜天梯图2022 苹果处理器排行榜2022

1、apple m1 2、apple a15 bionic 3、apple a12z bionic 4、apple a12x bionic iphone手机爆降1800这活动太给力了机会不容错过 http://iphone.adiannao.cn/2 5、apple a14 bionic22 6、apple a13 bionic 7、apple a12 bionic 8、apple a11 bionic 9、apple a10x fusion 1…

使用Inkscape绘制矢量电路图

GNU Inkscape是一个免费的开源矢量图形编辑器&#xff0c;非常适合画论文中的矢量插图。 Inkscape Inkscape支持win mac linux全平台&#xff08;下载&#xff09;&#xff0c;windows端还发布了uwp版本&#xff0c;可在Windows store安装。 基本操作&#xff1a; inkscape工…

【linux系统】ubuntu18.04蓝牙耳机没有声音

问题1&#xff1a;蓝牙耳机无法连接 解决参考&#xff1a; https://blog.csdn.net/ftmsz12345678/article/details/106244138https://wiki.archlinux.org/index.php/Bluetooth_headset_(%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87)#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E5%8F%8A%…

a7_scala三元运算

目录 scala outline案例注意事项 scala outline scala outline 案例 Scala 中任意表达式都是有返回值的&#xff0c;也就意味着 if else 表达式其实是有返回结果的,可以历用这个特性进行三元运算 举例 &#xff1a;Scala 中任意表达式都是有返回值 def main(args: Array[Str…

安信可A7模块介绍,以及GPRS基本测试命令

一、模块介绍&#xff1a; 该模块分为GPRS和GPS两个部分&#xff0c;GPRS支持AT命令&#xff0c;可用AT命令对其进行操作。 电源开关打开后&#xff0c;按PWR_KEY&#xff08;模块启动按钮&#xff09;按键1s以上启动内核&#xff08;类同于手机开机&#xff09;。 二、模块连线…

小白学 Python(24):Excel 基础操作(下)

人生苦短&#xff0c;我选Python 前文传送门 小白学 Python&#xff08;1&#xff09;&#xff1a;开篇 小白学 Python&#xff08;2&#xff09;&#xff1a;基础数据类型&#xff08;上&#xff09; 小白学 Python&#xff08;3&#xff09;&#xff1a;基础数据类型&…

ARM裸机开发篇1:Cortex-A7开发环境搭建

写在前面&#xff1a; 本文章为《ARM Cortex-A7裸机开发篇》系列中的一篇&#xff0c;全系列总计11篇。笔者使用的开发平台为华清远见FS-MP1A开发板&#xff08;STM32MP157开发板&#xff09;。 针对FS-MP1A开发板&#xff0c;除了Cortex-A7裸机开发篇外&#xff0c;还包括其…

linux(centos)防火墙ip和端口访问权限配置

这章到这里就结束了&#xff0c;如果觉得学的还不过瘾的话&#xff0c;请移步到&#xff1a;https://www.processon.com/view/6076a7ffe401fd2d66980f5b 在推荐一款全栈学习地十&#xff1a;https://www.processon.com/view/60504b5ff346fb348a93b4fa 以10.158.90.62服务器为…

超硬核!数据结构学霸笔记,考试面试吹牛就靠它

上次发操作系统笔记&#xff0c;很快浏览上万&#xff0c;这次数据结构比上次硬核的多哦&#xff0c;同样的会发超硬核代码&#xff0c;关注吧。 超硬核&#xff01;操作系统学霸笔记&#xff0c;考试复习面试全靠它 第一次笔记&#xff08;复习c&#xff0c;课程概述&#xff…

二极管A7与M7的区别

M7与A7都为贴片整流二极管,二者功能参数一样,只是封装不同&#xff0c;A7的体积要比M7小,下面我们来详细的介绍下两款二极管的具体体积。 M7:SMA/DO-214AC A7:SOD-123

华为USG防火墙基本配置

USG防火墙基本配置 学习目的 掌握登陆USG防火墙的方法 掌握修改防火墙设备名的方法 掌握对防火墙的时间、时区进行修改的方法 掌握修改防火墙登陆标语信息的方法 掌握修改防火墙登陆密码的方法 掌握查看、保存和删除防火墙配置的方法 掌握在防火墙上配置vlan、地址接口、…

小型网络仿真搭建(防火墙功能)-SDN/Mininet/Ryu/OVS

防火墙功能 yy 编写 1.需要的软件 软件环境的搭建&#xff1a;(2条消息) SDN mininet OVS ryu 安装之路_的博客-CSDN博客https://blog.csdn.net/weixin_43944134/article/details/104657239 RYUMininetOVS,当然也可以使用其他的控制器。 RYU:主要是启动防火墙功能&…

FTP协议以及防火墙配置

本文转自:http://hi.baidu.com/ueszx/item/81e97dc0f11173b80d0a7b56 FTP服务器需要开几个端口 新买了台服务器&#xff0c;只用来提供FTP和SQL Server服务&#xff0c;为保证安全&#xff0c;只开放21和1433端口。但FTP不能访问&#xff0c;于是我就花了点时间研究了一下防火…

ASEMI二极管A7参数,A7二极管规格书,A7二极管的封装

编辑-Z ASEMI二极管A7参数&#xff1a; 型号&#xff1a;A7二极管 最大循环峰值反向电压&#xff08;VRRM&#xff09;&#xff1a;1000V 最大有效值电压&#xff08;VRMS&#xff09;&#xff1a;700V 最大直流阻断电压&#xff08;VDC&#xff09;&#xff1a;1000V 最…

Fortigate 飞塔防火墙命令行常用操作 CLI

文章目录 1.基本配置1. 设备console口设置2. 设置接口IP3. 设置网关4. 设置DNS5. 设置NTP6. 设置时区和主机名7. 配置备份 2.HA相关1. 查看HA状态 3.基本元素1. 新建IP库2. 新建IP组3. 新建虚拟IP库&#xff08;端口映射&#xff09;4. 新建虚拟IP group&#xff0c;并关联虚拟…

SONY A7R2 基础操作

文章目录 1 使用肩带2安装眼罩3 调节取景器&#xff08;屈光度调节&#xff09;4 自定义键设置5 控制拨轮6 MENU菜单&#xff08;略写&#xff09;7 Fn按钮8 使用“Quick Navi”9 拍摄静止影像9.1 对焦指示灯 10 拍摄动态影像 1 使用肩带 2安装眼罩 当您想要使用取景器时&…

详解:二极管M7和A7的区别

整流二极管M7可以用什么来代替&#xff1f;请问贴片二极管M7的参数及能用什么管子代换&#xff1f;M7贴片二极管与什么型号的二极管通用&#xff1f;贴片整流二极管M7和A7有什么区别&#xff1f;整流二极管可用半导体锗或硅等材料制造&#xff0c;M7和A7都是硅整流二极管&#…

如何绕过网站防火墙WAF进一步sql注入

Web Hacker总是生存在与WAF的不断抗争之中的&#xff0c;厂商不断过滤&#xff0c;Hacker不断绕过。WAF bypass是一个永恒的话题&#xff0c;不少基友也总结了很多奇技怪招。那今天我在这里做个小小的扫盲吧。先来说说WAF bypass是啥。 WAF呢&#xff0c;简单说&#xff0c;它是…

xilinx A7芯片介绍

1&#xff0c;Power&Ground VCCAUX是为辅助电路供电的引脚&#xff0c;1.8V&#xff1b;VCCAUX_IO_G#是为辅助I/O电路供电的引脚&#xff0c;1.8v或者2.0v&#xff08;只有HP bank有此引脚&#xff09;&#xff1b;VCCINT是给内核逻辑供电的引脚&#xff0c;0.9v或者1.0v&a…

安信可A7模块 GPRS/GPS使用教程

【转载请注明出处: http://blog.csdn.net/leytton/article/details/72724081】 一、引脚接线 安信可A7模块包含了GPRS(网络数据传输)和GPS(卫星定位)两部分&#xff0c;可通过串口用AT指令进行控制操作。 A7模块引脚卡槽图如下&#xff0c;测试时USB转串口线与A7模块接线对…