JSON
JSON概述
JavaScript对象表示形式(JavaScript Object Notation : js对象简谱)
json 是 js对象的一种表现形式
* java对象表示形式
User user = new User();
user.setUsername("小明");
user.setAge(18);
user.setSex("男");
...
Product product = new Product();
product.setName("xx");
product.setDesc("xxxxxx");
* javaScript对象表示形式
let user ={"username":"小明","age":18,"sex":"男"}
let product = {"name":"xx","desc":"xxxxxxx"}
json可以取代XML笨重的数据结构,和xml相比:更小、更快,更易解析
json、xml作用:作为数据的载体,在网络中传输
JSON基础语法
json的语法主要有两种:
1. 对象 { }
2. 数组 [ ]
(1) 对象类型
{name:value,name:value}
(2) 数组类型
[
{name:value,name:value},
{name:value,name:value},
{name:value,name:value}
]
(3) 复杂对象
{
name:value,
list:[{name:value},{},{}]
user:{name:value}
}
注意:
1. 其中name必须是string类型
2. value必须是以下数据类型之一:
字符串
数字
对象(JSON 对象)
数组
布尔
Null
3. JSON 中的字符串必须用双引号包围。(单引号不行!)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>JSON基础语法</title>
</head>
<body>
</body>
<script>
/*
* JSON: 对象{}, 数组[]
* 1. 对象:
* {name:value,name:value}
*
* 2. 数组: 对应java中的List<User>
* [
* {name:value,name:value},
* {name:value,name:value}
* ]
* 3. 复杂: 对应java的对象或Map<String,Object>
* {
* name : value,
* name : [],
* name : {}
* }
*
* 注意:
* 1. 其中name必须是string
* 2. value 必须是以下之一
* string,number,boolean,json对象,json数组,null
* 3. 注意:json字符串必须双引号包围
* */
//1. json对象
let jsonObj = {"username":"xxx","sex":"x","age":x,"married" : x}
// value = 对象.name
console.log(jsonObj.username + "," + jsonObj.married)
//2. json数组
let jsonArray1 = ["xx","xx",x] // 这也是json,这是比较少见
let jsonObj1 = {"username":"xxx","sex":"x","age":x}
let jsonObj2 = {"username":"xxx","sex":"x","age":x}
let jsonObj3 = {"username":"xxx","sex":"x","age":x}
let jsonArray2 = [jsonObj1,jsonObj2,jsonObj3] // 在java中: List<User>
console.log(jsonArray2[1].age) //32
for (let element of jsonArray2) {
console.log(element.username + "," + element.age)
}
//3. json复杂对象
let jsonComplex = {
"username" : "xxx",
"age" : x,
"wives" : [
{"name" : "xx","address" : "xx"},
{"name" : "xx","address" : "xx"}
],
"master":"xxx"
}
console.log(jsonComplex.username + ","+ jsonComplex.master)
console.log(jsonComplex.wives)
</script>
</html>
JSON格式转换
* JSON对象与字符串转换的相关函数
语法:
1. JSON.stringify(object) 把json对象转为字符串
2. JSON.parse(string) 把字符串转为json对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>JSON格式转换</title>
</head>
<body>
<script>
//1. JSON.stringify(object) 把json对象转为字符串
// 原因是: 浏览器发送请求数据的时候,自动转成string
//2. JSON.parse(string) 把字符串转为json对象
/*
* 需求: 后端(java)给前端发送的json数据
1. json在java中是string
2. 前端(js)拿到string格式的json, 先将string -> object,后解析
3. 因为json在js中是对象
* */
//前端接收到后端发送过来的数据(类型:string)
// 注意: 里面是json必须双引,外面就用单引
// let resultData = "{\"result\" : \"failed\" , \"msg\" : \"用户名不存在或密码错误\"}"
let resultData = '{"result" : "failed" , "msg" : "用户名不存在或密码错误"}'
console.log(resultData)
console.log(typeof resultData) //string
console.log(resultData.msg) //string无法这样解析,undefined
//json格式的字符串转成对象
let resultObj = JSON.parse(resultData)
// let resultObj = eval("("+resultData+")") // 也可以转换,在变量外面加上小括号!!!
console.log(resultObj) //
console.log(typeof resultObj) // object
console.log(resultObj.msg) // 正常解析
//json对象转成字符串 (知道即可)
let resultString = JSON.stringify(resultObj)
console.log(resultString)
console.log(typeof resultString) //string
</script>
</body>
</html>
AJAX
AJAX概述
传统网站中存在的问题
-
网速慢的情况下,页面加载时间长,用户只能等待
-
表单提交后,如果一项内容不合格,需要重新填写所有表单内容
-
页面跳转,重新加载页面,造成资源浪费,增加用户等待时间
AJAX可以解决以上问题
AJAX(Asynchronous JavaScript and XML 异步)是浏览器提供的一套方法,在无需重新加载整个网页情况下,能够更新部分网页的技术,从而提高用户浏览网站应用的体验。
中文音译:阿贾克斯
应用场景
- 搜索框提示
- 表单数据验证(验证数据是否合法: 用户名已被注册)
- 无刷新分页(网页不断往下滚动,会不断的发起请求更新数据 : 京东,百度图片)
JS原生AJAX
运行一个java的服务器
jar : java archive(java档案包)
1.实际上jar也是压缩格式的一种(本质跟rar,zip,7z差不多)
2.jar是.class文件的压缩包(.java源码 编译成 .class的)
有些jar包是可以直接启动的:
1.在资料的地址栏中输入: cmd
2.java -jar jar名字 (启动java程序)
案例需求
代码实现
# js原生的ajax (不经过任何封装)
1. 创建ajax对象
let xhr = new XMLHttpRequest();
2. 告诉ajax请求方式和请求地址
xhr.open(请求方式,请求地址);
3. 发送请求
xhr.send();
4. 获取服务器返回的数据
xhr.οnlοad=function(){
xhr.responseText;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>s的原生ajax</title>
<style>
span{
color: red;
}
</style>
</head>
<body>
<input id="username" type="text" placeholder="请输入用户名">
<span id="userwarn"></span>
<script>
//1. 文本框失去焦点的时候触发
document.getElementById("username").onblur = function () {
//2. 向服务器发起一个请求(ajax)
let xhr = new XMLHttpRequest();
let method = "get" // 请求方式(常见两种:get/post)
// username=参数
//文本输入框中的内容作为参数
let value = document.getElementById("username").value
let url = "http://localhost:8080/check?username="+value // 请求地址
xhr.open(method,url)
xhr.send(); // 发送请求
//3. 获取服务器返回的数据
// 此事件是服务器响应数据之后,ajax加载到此数据时触发
xhr.onload = function () {
//获取响应数据
console.log(xhr.responseText)
document.getElementById("userwarn").innerText = xhr.responseText
}
}
</script>
</body>
</html>
JQuery的Ajax插件
jquery作为一个优秀的js框架, 自然也会对ajax的复杂的api进行封装:
get/post 函数
* 1. get请求方式
$.get(url, [data], [callback], [type])
1. url : 请求的服务器端url地址
2. data : 发送给服务器端的请求参数,格式可以是key=value,也可以是json对象
3. callback: 当请求成功后的回掉函数,可以在函数体中编写我们的逻辑代码
4. type : 预期的返回数据的类型,取值可以是 xml, html, script, json, text, _defau等 (默认text: 普通文本,后续json主要)
* 2. post请求方式 :
$.post(url, [data], [callback], [type])
只需要将get函数换成post即可(参数含义同上)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jq的get函数</title>
<!--
jquery已经导入了!!!
-->
<script src="../js/jquery-3.2.1.min.js"></script>
<style>
span{
color: red;
}
</style>
</head>
<body>
<input id="username" type="text" placeholder="请输入用户名">
<span id="userwarn"></span>
<script>
/*
* * 1. get请求方式
$.get(url, [data], [callback], [type]) -> []表示可以没有
1. url : 请求地址
2. data : 请求参数(text,json)
3. callback: 回调函数(ajax请求发送之后,服务器成功响应的回调函数)
function(result){ 其中result 是服务器的响应数据 }
4. type : 预期的返回数据的类型,取值可以是 xml, html, script, json, text, _defau等 (默认text: 普通文本,后续json主要)
如果不写,默认text(纯文本,就是字符串)
* 2. post请求方式 :
$.post(url, [data], [callback], [type])
只需要将get函数换成post即可(参数含义同上)
解释:
1. url 请求地址: 服务器的地址?参数
(如果请求方式是get,可以不拆开?参数 , 如果是post,必须拆开)
2. data : 请求参数(text,json)
text(纯文本,字符串) : name1=value1&name2=value2...
json : {name1: value1,name2:value2}
3. callback : 服务器成功响应之后的调用
函数中有个参数 : 服务器响应的数据
(如果访问服务器失败, 这个函数不会执行)
4. type : 响应数据的类型(常用text,json)
如果不写,默认text
http协议的两种请求方式
1. get
a. 将参数拼接进url
b. 可能体现在浏览器的地址栏, 不安全, 传输的数据长度有限制
2. post
a. 参数不会拼接进url(是放在请求体了)
b. 不会体现在浏览器的地址栏, 安全 , 传输的数据没有限制
* */
//注册失去焦点事件
$("#username").blur(function () {
//先获取文本输入框中的内容
let value = $("#username").val()
//用jquery的api发送ajax请求
// let url = "http://localhost:8080/check?username="+value // 这是js刚才用的
let url = "http://localhost:8080/check" // 只保留?前面的
let data = "username=" + value // 请求参数 text格式
// let data = {"username" : value} // 请求参数 json格式
let cb = function(result){ // 服务器成功响应了会执行这个函数
console.log(result) // 服务器响应的数据
}
let type = "text" // 指定响应数据的类型(常用text,json)
$.get(url,data,cb,type) // get请求
// $.post(url,data,cb,type) // post请求
})
</script>
</body>
</html>
ajax函数
* 语法:
$.ajax({name:value,name:value})
* 参数:
1. url : 请求的服务器端url地址
2. async : (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,设置false
3. data : 发送到服务器的数据,可以是键值对形式,也可以是js对象形式
4. type : (默认: "GET") 请求方式 ("POST" 或 "GET")
5. dataType : 预期的返回数据的类型(默认text,常用json)
6. success : 请求成功后的回调函数
7. error : 请求失败时调用此函数
这些参数,是可以选择性的写
* 总结: 在实际使用中, 比get/post请求多考虑了失败的情况
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>jq的ajax函数</title>
<script src="../js/jquery-3.2.1.min.js"></script>
<style>
span{
color: red;
}
</style>
</head>
<body>
<input id="username" type="text" placeholder="请输入用户名">
<span id="userwarn"></span>
<script>
/*
* * 语法:
$.ajax(settings)
settings是js对象(不是json)
settings = {name:value,name:value}
name 可以不加双引号,value可以写function(json不允许)
* 参数:
1. url : 请求的服务器端url地址
2. async : (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,设置false
3. data : 发送到服务器的数据,可以是键值对形式,也可以是js对象形式
4. type : (默认: "GET") 请求方式 ("POST" 或 "GET")
5. dataType : 预期的返回数据的类型(默认text,常用json)
6. success : 请求成功后的回调函数
7. error : 请求失败时调用此函数
* 总结: 在实际使用中, 比get/post请求多考虑了失败的情况
* */
$("#username").blur(function () {
//获取文本框输入的值
let value = $("#username").val()
// 使用ajax函数发送请求
let settings = {
url:"http://localhost:8080/check", // 请求地址
type:"get", // 请求方式,默认是get,一般不是get/post
data:"username="+value, // 请求参数(text,json)
success:function (resp) { // 成功响应的回调, resp是响应数据
// 实现局部刷新
$('#userwarn').text(resp);
},
error:function () { //失败的回调 : 如果访问失败,会执行这个函数
alert('网络信号不好,服务器繁忙,请稍后重试...')
},
dataType:"text", // 响应数据的格式(默认text,可选json)
async:true // 异步提交(待会讲,默认是true 异步,一般只写true)
}
$.ajax(settings)
})
</script>
</body>
</html>
同步和异步概述
使用ajax发送的是异步请求
同步和异步请求指的是,客户端和服务器交互的行为
同步请求:客户端发送请求后,必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
异步请求:客户端发送请求后,不需要等待服务器端的响应。在服务器处理的过程中,客户端可以进行其他的操作。
http://localhost:8080/sleep
localhost -> 127.0.0.1 (本机)
如果直接访问,默认同步请求,需要等待5秒才会响应,在此期间什么时候都不能做
(目前,网页发起的请求都是同步请求)
使用ajax技术实现异步提交,需要等待5秒才会响应,但是在此期间可以做其他事情
#同异步概念
1. 同步: 先做A任务,只有A任务做完了,才能做B任务
2. 异步: 你先做A任务,A任务还没结束,你就能B任务
感知同步和异步区别
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>同步和异步</title>
<script src="../js/jquery-3.2.1.min.js"></script>
</head>
<body>
<input type="text">
<button id="btn">发送ajax</button>
<script>
// 点击按钮,发送一个异步请求到服务器
$("#btn").click(function () {
/* let settings = {
url : "http://localhost:8080/sleep",
type : "get",
async : false, //async默认=true,false为同步
success : function (result) {
alert(result)
}
}
$.ajax(settings)*/
let url = "http://localhost:8080/sleep"
let data = "" // 没有参数,也可以不写
let cb = function(result){ //成功的回调
alert(result)
}
//默认async=true,异步请求
$.get(url,data,cb)
})
</script>
</body>
</html>
ajax:异步提交和页面局部刷新的技术
Web知识概述
JavaWeb:将编写好的java代码,发布到互联网,可以让所有用户访问到…
软件架构
- 网络中有很多的计算机,它们直接的信息交流,我们称之为:交互
- 在互联网交互的过程的有两个非常典型的交互方式——B/S 交互模型(架构)和 C/S 交互模型(架构)
C/S架构
Client/Server 客户端/服务器
访问服务器资源必须安装客户端软件
例如: QQ,绝地求生,LOL
B/S架构
Browser/Server 浏览器/服务器
访问服务器资源不需要专门安装客户端软件,而是直接通过浏览器访问服务器资源.
例如: 天猫、京东、知乎网站
Web服务器作用
-
开发者通过web服务器可以把本地资源发布到互联网(提供数据服务和支持)
-
用户就可以通过浏览器访问这些资源(消费服务的)
资源的分类
资源:计算机中数据文件
静态资源
- 对于同一个页面,不同用户看到的内容是一样的(该资源不会变化)。
- 例如:体育新闻、网站门户等,常见后缀:
*.html、*.js、*.css
- 例如:体育新闻、网站门户等,常见后缀:
动态资源
- 用对于同一个页面,不同用户看到的内容可能不一样(该资源会变化)。
- 例如:购物车、我的订单等,常见后缀:
*.jsp、*.aspx、*.php
- 例如:购物车、我的订单等,常见后缀:
常见的Web服务器
* Tomcat: Apache组织开源免费的web服务器,支持JavaEE规范(Servlet/Jsp).
* Jetty:Apache组织开源免费的小型web服务器,支持JavaEE规范.
* JBoss: RedHat红帽公司的开源免费的web服务器,支持JavaEE规范.
* Glass Fish:Sun公司开源免费的web服务器,支持JavaEE规范.
---------------------------------------------------------------------
* WebLogic: Oracle公司收费的web服务器,支持JavaEE规范.
* WebSphere:IBM公司收费的web服务器,支持JavaEE规范.
JavaEE规范
在Java中所有的服务器厂商都要实现一组Oracle公司规定的接口,这些接口是称为JavaEE规范。不同厂商的JavaWeb服务器都实现了这些接口,在JavaEE中一共有13种规范。实现的规范越多,功能越强。
Tomcat服务器
Tomcat使用
下载
Tomcat 官网下载地址:https://tomcat.apache.org/download-80.cgi
安装
绿色免安装版,解压即用(注意:不要有中文路径)
目录结构
启动和关闭
- tomcat启动之后, 窗口不要关掉(相当于关闭软件): 点击startup.bat
- 直接右上角点击X : 强制关闭(断电) , 不推荐用(在测试时无所谓)
- 正常关闭: 点击shutdown.bat
在tomcat黑窗口内部ctrl+c
二次,表示正常关闭
启动报错问题
Java环境变量
现象: 黑窗口一闪而过(不到半秒)
原因: tomcat的大部分代码也是java写的
解决:
JDK : Java development kit ( java开发工具包)
a. java开发所运行的工具包(jdk的类)
b. jre : java runtime environment(java 运行环境)
jvm : java virtual machine(java 虚拟机)
配置好Java环境变量
目的: 是为了可以在任意位置,打开cmd都能访问
C:\Program Files\Java\jdk1.8.0_111\bin 下的可执行程序(java.exe…)
a. JAVA_HOME : C:\Program Files\Java\jdk1.8.0_111
b. Path : %JAVA_HOME%\bin
- JDK换成8版本,目前tomcat8和jdk8兼容没问题
8080端口被占用
现象:启动时报错(黑框口等了一会就关闭)
原因: 一个进程占用一个端口port, 一个端口不能被多个进程同时占用
(软件启动至少一个进程)
暴力:找到占用的端口号的对应进程,杀死进程
cmd命令:netstat -ano | findstr "8080"
进入到任务管理器,找到它,干掉它
温柔:修改Tomcat端口号
进入Tomcat安装目录/conf/server.xml 文件修改 (重启tomcat生效)
访问测试
http://localhost:80
http协议默认端口80(会被隐藏)
https协议默认端口443
在整个web阶段我们使用的就是tomcat默认端口:8080
发布项目三种方式
webapps 部署
直接放置在 webapps 目录下
这种方案(支持热更新),一般在开发完毕后,来使用的
server.xml部署
在tomcat/conf/server.xml中找到标签内,添加标签
<!--
path: 虚拟路径
docBase : 真实路径
mypro 映射 C:\Users\spy\Desktop\mypro
注意: 修改配置文件,重启tomcat生效
-->
<Context path="mypro" docBase="C:\Users\spy\Desktop\mypro"/>
</Host>
缺点
1.配置文件修改完毕后,需要重启tomcat生效…
2.server.xml是tomcat的核心配置文件,如果稍有不慎操作失误,整个tomcat启动失败
独立xml部署(开发时使用)
在tomcat/conf/Catalina/localhost 目录下创建一个xml文件,添加标签
文件名就是虚拟路径
不需要重启tomcat
Web项目结构
1. 前端项目
|-- myapp(项目名称)
|-- css 目录
|-- js 目录
|-- html目录
|-- img 目录
|-- index.html
2. web项目
|-- myapp(项目名称)
|-- 静态资源(html、css、js、img)
|-- WEB-INF 目录(浏览器无法直接访问内部的资源)
|-- classes 目录(java的字节码文件)
|-- lib 目录(当前项目所需要的第三方jar包)
|-- web.xml 文件 (当前项目核心配置文件,servlet3.0可以省略)
|-- index.html or index.jsp
Idea中使用Tomcat
配置Tomcat
(工具栏居中,不然默认显示在右侧)
再次点击,确定是否配置成功
创建Web项目
发布Web项目
页面资源热更新
经验值分享
Http协议
Http协议概述
超文本传输协议(Hyper Text Transfer Protocol)是互联网上应用最为广泛的一种网络协议。
传输协议:在客户端和服务器端通信时,规范了传输数据的格式和内容
#. 1. http协议的特点
1). 基于tcp协议 : 三次握手,保障数据安全,相对udp效率低
2). 默认端口 80 (省略不写)
3). 基于请求/响应模型
一次请求对应一次响应 / 先有请求,再有响应
4). 无状态协议(多次请求之间相互独立,不记录状态)
#. 2. http协议版本发展
1). http1.0 (1996) : 每次请求都有一个新的连接(开销大,比较慢)
2). http1.1 (1999) : 长连接,多个请求共用一个连接(开销小一些,比较快)
传输的数据都是文本(比较慢), 不支持推送
目前!!!
3). http2.0 (2015) : 传输的数据经过压缩的,效率很高, 支持推送
4). http3.0 : 2019,想基于udp
# 3. http协议的内容
1). 请求报文: 浏览器发送给服务器的数据
请求行, 请求头, 请求体
2). 响应报文: 服务器发送给浏览器的数据
响应行, 响应头, 响应体
# 4. 抓包工具
1. 在浏览器和服务器交互的时候(发送请求,然后响应),我们可以使用工具抓取数据查看
2. google浏览器内置开发者工具
chrome(谷歌)——按键f12
firefox(火狐)——按键f12
Http请求
浏览器查看Http请求协议
get方式
post方式
HTTP请求消息格式
请求行
* 格式
请求方式 请求路径 协议/版本号
* 例如
POST /xxx/static/login.html HTTP/1.1
GET /xxx/static/login.html?username=jack&password=123 HTTP/1.1
* 请求方式区别
get
1.请求参数在地址栏显示(请求行)
2.请求参数大小有限制
3.数据不太安全
post
1.请求参数不在地址栏显示(请求体)
2.请求参数大小没有限制
3.数据相对安全
(上传文件和表单要用post,其他请求两种都可以)
请求头
* 格式
请求头名称:请求头的值
* 例如
Host: localhost:8080
常见请求头:
1. Host: localhost:8080 访问服务器的地址(域名+端口)
2. Connection: keep-alive 长连接(http1.1协议)
3. Upgrade-Insecure-Requests:1 客户端支持https加密协议
4. Referer: http://baidu.com 上一次请求的地址
防盗链....
5. User-Agent: 客户端系统和浏览器版本
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) Chrome/63.0 Safari/537.36
浏览器兼容性
判断 : 服务器根据用户的浏览器版本, 返回响应的数据
谷歌方式一 : 发送google浏览器可以解析的数据
IE方式二 : 发送ie浏览器可以解析的数据
火狐方式三 :
请求体(正文)
* 格式
参数名=参数值&参数名=参数值...
* 例如
username=jack&password=123
* 注意:
get方式没有请求体,post方式才有
Http响应
浏览器查看Http响应协议
HTTP响应消息格式
响应行
* 格式
协议/版本号 状态码
* 例如
HTTP/1.1 200
* 常见状态码
--------------- 用户可以正常访问页面
200 :表示成功
302 :重定向
304 :从缓存中读取数据
(如果这个资源没有变化,浏览器是会缓存的,下次请求,就直接从缓存中读取,提高效率)
--------------- 用户无法正常访问页面
404:请求资源未找到(not found)
405:请求的方法未找到
500:服务器内部错误(java代码写错了.....)
响应头
* 格式
响应头名称:响应头的值
* 例如
Last-Modified: Mon, 13 Apr 2020 06:11:24 GMT
常见响应头:
1. Location:通常与状态码302一起使用,实现重定向操作
Location:http://www.xxx.cn
2. Content-Type:服务器告诉客户端,返回响应体的数据类型和编码方式
Content-Type:text/html;charset=utf-8
3. Content-Disposition:服务器告诉客户端,以什么样方式打开响应体
* in-line(默认):浏览器直接打开相应内容,展示给用户
* attachment;filename=文件名:浏览器以附件的方式保存文件 【文件下载】
4. Refresh:在指定间隔时间后,跳转到某个页面
Refresh:5;http://www.xxx.cn
响应体(正文)
* 服务器返回的数据,由浏览器解析后展示给用户
用户看到页面所有的内容,都是在响应体中返回的