讲的比较粗，但是作为了解也是够了
第一章 Ajax
1.1 概念
Ajax(Asynchronous JavaScript And XML): 异步的JS和XML
- 是一种用于创建快速动态网页的技术
- 是一种在无需刷新页面的情况下,能够更新部分页面内容的技术
- 通过在后台与服务器的少量数据交换,我们就可以实现异步更新
同步和异步的区别
1.2 原生JS实现Ajax
用的不多,因为很多框架都将他封装了
不多bb,直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生js实现</title>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<div id="myDiv"></div>
<script>
function fun() {
//创建ajax必须创建的对象,下面这些操作仅仅为了兼容性
let xmlHttp;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest()
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
}
//open方法的参数
//method：请求的类型；GET 或 POST
//url：文件在服务器上的位置
//async：true（异步）或 false（同步）
xmlHttp.open("GET", "ajaxServlet?username=Tom", true)
//send方法的参数
//string：仅用于 POST 请求,get请求的时候可以不填写,就像下面这样
xmlHttp.send()//如果请求方法是POST,那么我们就需要在send方法中定义参数
//获取响应结果
//下面的xmlHttp.onreadystatechange就是检测ajax的就绪状态是否发生改变
//存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
//0: 请求未初始化
//1: 服务器连接已建立
//2: 请求已接收
//3: 请求处理中
//4: 请求已完成，且响应已就绪
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
document.getElementById("myDiv").innerHTML = document.getElementById("myDiv").innerHTML + "</br>" + xmlHttp.responseText;
}
}
}
</script>
</body>
</html>
//这个是模拟的服务器
@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取异步请求的参数
String username = request.getParameter("username");
System.out.println(username);
response.setCharacterEncoding("utf-8");
response.getWriter().write("fuck you " + username + "!");
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
实现的效果就是,每次我们点击按钮,返回的都是fuck you tom
1.3 Jquey 实现Ajax
三种实现方式
- $.ajax()
- $.get()
- $.post()
$.ajax()
不多bb,直接看代码把
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery</title>
<script type="text/javascript" src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<div id="myDiv"></div>
<script>
function fun() {
$.ajax({
url: "ajaxServlet", //请求路径
type: "POST",
data: {username: "Jack"},
//下面是回调函数
success(res) {
document.getElementById("myDiv").innerHTML = document.getElementById("myDiv").innerHTML + "</br>" + res;
},
error(err) {
console.log(err);
},
//设置响应的数据的格式
//dataType: "JSON" 如果不加的话,那么默认返回String
})
}
</script>
</body>
</html>
$.get()
没什么好说的,就是上面的请求的缩减版
$get(url,[data],[callback],[type])
这里的type就是上面的dataType, callback懂得都懂,
如果不写type,那么返回的数据的类型由response的ContentType响应头里面的内容决定决定
例如:
`$.get("ajaxServlet",{username: "Jack"},function(res){alert(res)},"JSON")`
$.post()
没什么好说的
$post(url,[data],[callback],[type])
例如:
`$.post("ajaxServlet",{username: "Jack"},function(res){alert(res)},"JSON")`
第二章 JSON
2.1 概念
JSON(JavaScript Object Notation): JavaScript对象表示法
JSON是存储和交换文本信息的语法,类似XML
2.2 语法
基本规则
- 数据在名称/值对中: json数据是由键值对构成的
- key 可以用单双引号引起来,也可以不用,都行
- value里面基本上可以放任何东西,可以放
- 数字
- 字符串
- 逻辑值
- 数组
- 对象
- 数据由括号分隔:多个键值对由逗号分隔
- 花括号保存对象
- 方括号保存数组
获取数据的方式
- JSON对象.键名
- JSON对象[“键名”]
- 数组[索引]
- 数组[索引].键名
2.3 JSON数据和Java对象的相互转换
为什么要学习这个?
- 因为,在Java服务器中,我们对数据的处理要通过Java对象而不是JSON数据
- 而客户端和服务器之间传递的数据是JSON
- 客户端得到和使用的数据是JSON
我们转化要用到解析器
-
常见的解析器有: Jsonlib , Gson , fastjson , jackson
-
这里我们将使用jackson
我们只要提前导入jar包就行了
JSON转化为Java对象
使用步骤
- 导入jar包
- 创建ObjectMapper核心对象
- 调用方法
Shut up and just see my code
//json转化为对象
@Test
public void test04() throws IOException {
String data = "{\"name\":\"你爹\",\"age\":16,\"gender\":\"男\"}";
ObjectMapper om = new ObjectMapper();
Person person = om.readValue(data, Person.class);
System.out.println(person);//Person{name='你爹', age=16, gender='男'}
}
常见的方法
<Class> readValue(json字符串数据,Class)
Java对象转化为JSON
使用步骤
- 导入jackson的相关jar包
- 创建jackson核心对象 objectMapper
- 调用方法
常见的两个方法
<参数1> writeValue(参数1,obj):
参数1:
File: 将obj对象转换为JSON字符串,并保存在指定的文件中
Writer: 将obj对象转换为JSON字符串,并将json数据填充到字符输出流中
OutputStream: 将obj对象转换为JSON字符串,并将json数据填充到字节输出流中
String WriteValueAsString(obj): 传入一个对象,转化为json字符串
代码如下
package com.test;
import com.domain.Person;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;
import java.io.File;
import java.io.FileWriter;
import java.io.IOException;
public class JacksonTest {
//测试方法
@Test
public void test01() throws IOException {
Person p = new Person();
p.setAge(16);
p.setName("你爹");
p.setGender("男");
//创建核心对象
ObjectMapper om = new ObjectMapper();
//我们现在用第二种方法
System.out.println(om.writeValueAsString(p));//{"name":"你爹","age":16,"gender":"男"}
//我现在想要将数据写到D盘里面
om.writeValue(new File("F://a.txt"), p);//确实在盘中出现了这个文件
//关联到一个字节输出流中
om.writeValue(new FileWriter("f://b.txt"), p);
}
}
一些注解
@JsonFormat(pattern = "xxx"): 用在类的成员变量上边,一般用于对日期的格式化@JsonIgnore: 用在成员变量上面,当我们不想让这个属性加入到JSON中时,就在那个属性上面加上这个注解
复杂的java的转换
List的转换
转化出来是一个数组
代码如下
@Test
public void test02() throws IOException {
Person p1 = new Person();
p1.setAge(16);
p1.setName("你爹");
p1.setGender("男");
Person p2 = new Person();
p2.setAge(16);
p2.setName("你爹");
p2.setGender("男");
Person p3 = new Person();
p3.setAge(16);
p3.setName("你爹");
p3.setGender("男");
Person p4 = new Person();
p4.setAge(16);
p4.setName("你爹");
p4.setGender("男");
List<Person> ps = new ArrayList<>();
ps.add(p1);
ps.add(p2);
ps.add(p3);
ps.add(p4);
//创建核心对象
ObjectMapper om = new ObjectMapper();
System.out.println(om.writeValueAsString(ps));
//[{"name":"你爹","age":16,"gender":"男"},{"name":"你爹","age":16,"gender":"男"},{"name":"你爹","age":16,"gender":"男"},{"name":"你爹","age":16,"gender":"男"}]
}
Map的转换
转化出来的格式和对象一样
@Test
public void test03() throws IOException {
HashMap<String, Object> map = new HashMap<>();
map.put("name", "张三");
map.put("age", "张三");
map.put("qwq", "张三");
map.put("gender", "张三");
//创建核心对象
ObjectMapper om = new ObjectMapper();
System.out.println(om.writeValueAsString(map));
//{"gender":"张三","name":"张三","qwq":"张三","age":"张三"}
}
2.4 综合案例
需求分析
校验用户名是否存在
- 服务器响应的数据的类型可以由下面两种东西决定
- 优先级最高的就是在请求的方法里面设置的响应格式的参数
- 其次就是根据响应头的ContentType里面的内容决定
代码实现
//html网页
<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<form action="">
<label>
<input id="username" type="text" name="username" placeholder="请输入用户名">
<span id="s_username"></span>
</label>
<label>
<input type="text" name="password" placeholder="请输入密码">
</label>
<input type="submit" value="注册">
</form>
<script>
$(function () {
$("#username").blur(function () {
//获取username文本输入框的值
let username = $(this).val();
//发送ajax请求
$.get("FindServlet", {username: username}, res => {
//我们收到的res是一个String,所以我们要在$.get()的type参数规定为JSON
$("#s_username").html(res.msg)
$("#s_username").css("color", "pink")
}, "JSON")
})
})
</script>
</body>
</html>
//Servlet实例
package com.Servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.HashMap;
import java.util.Map;
@WebServlet("/FindServlet")
public class FindServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//获取用户名
String username = request.getParameter("username");
Map<String, Object> map = new HashMap<>();
ObjectMapper om = new ObjectMapper();
//调用service层来判断用户名是否存在,这里我们就写死
if ("Tom".equals(username)) {
//存在
map.put("userExist", true);
map.put("msg", "用户名已经存在了,傻逼!");
} else {
//不存在
map.put("userExist", false);
map.put("msg", "该用户名可以使用");
}
//设置响应信息
response.setCharacterEncoding("utf-8");
om.writeValue(response.getWriter(), map);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
3144
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
