day45
今日内容
- AJAX
- JSON
AJAX
- 概念：ASynchronous JavaScri And Xml 异步的JavaScript 和 xml
1. 异步和同步:是在客户端和服务端相互通信的基础上
同步：同步是指一个进程在执行某个请求的时候，如果该请求需要一段时间才能返回信息，那么这个进程会一直等待下去，直到收到返回信息才继续执行下去。
异步：异步是指进程不需要一直等待下去，而是继续执行下面的操作，不管其他进程的状态，当有信息返回的时候会通知进程进行处理，这样就可以提高执行的效率了，即异步是我们发出的一个请求，该请求会在后台自动发出并获取数据，然后对数据进行处理，在此过程中，我们可以继续做其他操作，不管它怎么发出请求，不关心它怎么处理数据。
Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页(不使用Ajax)如果需要更新内容，必须重载整个网页页面。
- 实现方式：
1. 原生的JS实现方式(了解)
2. JQuery实现方式
1. $.ajax()
2. $.get()
3. $.post()
- 原生的JS实现方式(了解)
package cn.itcast.web.servlet;
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("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.获取请求参数
String username = request.getParameter("username");
//处理业务逻辑，耗时
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}
//2.打印username
System.out.println(username);
//3.响应
response.getWriter().write("hello" + username);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//定义方法
function fun(){
//发送异步请求
//1.创建核心对象
var xmlhttp;
if (window.XMLHttpRequest) {
// 用于现代浏览器的代码（Chrom、IE7+、Firefox、Safari 以及 Opera）
xmlhttp = new XMLHttpRequest();
} else {
// 应对老版本 IE 浏览器的代码（IE5 和 IE6）
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.建立连接
/*
参数：
method：请求类型 GET 或 POST
* get方式：请求参数在url后边拼接，send方法为空参
* post方式：请求参数在send方法中定义
url：文件位置
async：true（异步）或 false（同步）
user：可选的用户名称
psw：可选的密码
*/
xmlhttp.open("GET", "ajaxServlet?username=tom", true);
//3.发送请求
xmlhttp.send();
//4.接受并处理来自服务器的响应结果
//获取方式：xmlhttp.responseText
//什么时候获取？当服务器响应成功后再获取
//当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange
xmlhttp.onreadystatechange = function() {
//判断readyState就绪状态是否为4，判断status响应状态码是否为200
/*
保存了 XMLHttpRequest 的状态。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 正在处理请求
4: 请求已完成且响应已就绪
status:
200: "OK"
403: "Forbidden"
404: "Page not found"
*/
if (this.readyState == 4 && this.status == 200) {
//获取响应结果
var responseText = xmlhttp.responseText;
alert(responseText);
}
};
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>
- JQuery实现方式
- . a j a x ( ) 语 法 ： .ajax() 语法： .ajax()语法：.ajax({键值对});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//定义方法
function fun(){
//使用$.ajax()发送异步请求
$.ajax({
url:"ajaxServlet",//请求路径
type:"POST",//请求方式，默认是get
//data:"username=jack&age=23",//请求参数
data:{"username":"jack","age":"23"},
success:function (data) {
alert(data);
},//响应成功后的回调函数
error:function () {
alert("出错啦…");
},//表示如果请求响应出现错误，会执行的回调函数
dataType:"text"//设置接受到响应数据的格式
});
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>
- $.get():发送get请求
语法：$.get(url, [data], [callback], [type])
参数：
url:待载入页面的URL地址，请求路径
data:待发送 Key/value 参数，请求参数
callback:载入成功时回调函数
type:返回内容格式，xml, html, script, json, text, _default，响应结果的类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//定义方法
function fun(){
$.get("ajaxServlet",{"username":"rose"},function (data) {
alert(data);
},"text");
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>
- $.post():发送post请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//定义方法
function fun(){
$.post("ajaxServlet",{"username":"rose"},function (data) {
alert(data);
},"text");
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>
JSON
- 概念：JavaScript对象表示法(JavaScript Object Notation)，JSON 是一种存储和交换数据的语法，JSON 是通过 JavaScript 对象标记法书写的文本。用于进行数据的传输，JSON比XML更小、更快、更易解析。
JavaScript对象表示法：var p = {“name”:“张三”,“age”:23,“gender”:“男”}
- 语法：
1. 基本规则
数据在名称/值对中：JSON数据是有键值对构成的
* 键用引号（单双都行）引起来，也可以不使用引号
* 值的取值类型：
1. 数字（整数或浮点数）
2. 字符串（在双引号中）
3. 逻辑值（true或false）
4. 数组（在方扩号中）
5. 对象（在花括号中）{"address":{{"provice":"陕西",……}}}
6. null
数据由逗号分隔：多个键值对由逗号分隔
花括号容纳对象：使用{}定义json格式
方括号容纳数组：[]
<script>
//1.定义基本格式
var person = {"name": "张三", "age": 23, "gender": true}
// alert(person);
//获取name的值
var name = person.name;
var person2 = person["name"];
// 2.嵌套格式
var persons = {
"person": [
{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 24, "gender": true},
{"name": "王五", "age": 25, "gender": false}
]
};
var name2 = persons.person[2].name;//获取王五
//alert(persons);
var ps = [
{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 24, "gender": true},
{"name": "王五", "age": 25, "gender": false}
];
var name3 = ps[1].name;
//alert(ps);
alert(name + "：" + person2 + "：" + name2 + "：" + name3);
</script>
2. 获取数据
1. json对象.键名
2. json对象["键名"]
3. 数组对象[索引]
<script>
//1.定义基本格式
var person = {"name": "张三", "age": 23, "gender": true}
var ps = [
{"name": "张三", "age": 23, "gender": true},
{"name": "李四", "age": 24, "gender": true},
{"name": "王五", "age": 25, "gender": false}
];
//获取person对象中所有的键和值
//for in 循环
for(var key in person){
alert(key + "：" + person[key]);
}
// 获取ps中的所有值
for(var i = 0; i < ps.length; i++){
var p = ps[i];
for (var key in p){
alert(key + "：" + p[key]);
}
}
</script>
- JSON数据和Java对象的相互转换
* JSON解析器：
* 常见的解析器：Jsonlib，Gson，fastjson，jackson
1. JSON转为Java对象
1.使用步骤：
1.导入jackson的相关jar包，
jackson-annotations-2.2.3.jar
jackson-core-2.2.3.jar
jackson-databind-2.2.3.jar
2.创建Jackson核心对象ObjectMapper
3.调用ObjectMapper的相关方法进行转换
* readValue(json字符串数据,Class)
* Class:转成什么类型的对象，如转成Person对象，则Class填Person.class
@Test
public void test5() throws Exception {
//1.初始化JSON字符串
String json = "{\"name\":\"张三\",\"age\":23,\"gender\":\"男\"}";
//2.创建ObjectMapper对象
ObjectMapper mapper = new ObjectMapper();
//3.转换为Java对象，Person对象
Person person = mapper.readValue(json, Person.class);
System.out.println(person);
}
2. Java对象转换JSON
1.使用步骤：
1.导入jackson的相关jar包，
jackson-annotations-2.2.3.jar
jackson-core-2.2.3.jar
jackson-databind-2.2.3.jar
2.创建Jackson核心对象ObjectMapper
3.调用ObjectMapper的相关方法进行转换
package cn.itcast.test;
import cn.itcast.domain.Person;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.junit.Test;
import java.io.File;
import java.io.FileWriter;
public class JacksonTest {
//Java对象转为JSON字符串
@Test
public void test1() throws Exception {
//1.创建Person对象
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
//2.创建Jackson的核心对象 ObjectMapper
ObjectMapper mapper = new ObjectMapper();
//3.转换
/*
转换方法：
writeValue(参数1, obj);
参数1：
File：将obj对象转换为JSON字符串，并保存到指定的文件中
Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
writeValueAsString(obj);将对象转为json字符串
*/
String json = mapper.writeValueAsString(p);
System.out.println(json);//{"name":"张三","age":23,"gender":"男"}
//writeValue, 将数据写到F://a.txt文件中
//mapper.writeValue(new File("F://a.txt"),p);
//writeValue, 将数据关联到F://b.txt文件中
mapper.writeValue(new FileWriter("F://b.txt"),p);
}
}
2.注解：
1. @JsonIgnore：排除属性
2. @JsonFormat：属性值得格式化
@JsonFormat(pattern = "yyyy-MM-dd")
3.复杂java对象转换
1. List：数组
2. Map：对象格式一致
案例：校验用户名是否存在
- 校验用户名是否存在
1. 服务器响应的数据，在客户端使用时，要想当做json数据格式使用。有两种解决方案：
1. $.get(type):将最后一个参数type指定为"json",并设置
* response.setContentType("text/html;charset=utf-8");
2. 在服务器端设置MIME类型
* response.setContentType("application/json;charset=utf-8");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
$(function () {
$("#username").blur(function () {
var username = $(this).val();
//发送ajax请求
//期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎，请更换一个"}
// {"userExsit":false,"msg":"用户名可用"}
$.get("findUserServlet", {"username":username},function (data) {
//判断userExsit键的值是否是true
alert(data);
var span = $("#s_username");
if (data.userExsit){
//用户名存在
span.css("color","red");
span.html(data.msg);
}else{
//用户名不存在
span.css("color","green");
span.html(data.msg);
}
}/*,"json"*/);
});
})
</script>
</head>
<body>
<form>
<input type="text" id="username" name="username" placeholder="请输入用户名">
<span id="s_username"></span>
<br>
<input type="password" name="password" placeholder="请输入密码"><br>
<input type="button" value="提交"><br>
</form>
</body>
</html>
package cn.itcast.web.servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
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;
import java.util.HashMap;
import java.util.Map;
@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//response.setContentType("text/html;charset=utf-8");
response.setContentType("application/json;charset=utf-8");
//1.获取用户名
String username = request.getParameter("username");
//2.调用service层判断用户名是否存在
//期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎，请更换一个"}
// {"userExsit":false,"msg":"用户名可用"}
Map<String, Object> map = new HashMap<String,Object>();
if ("tom".equals(username)){
//存在
map.put("userExsit",true);
map.put("msg","此用户名太受欢迎，请更换一个");
}else{
//不存在
map.put("userExsit",false);
map.put("msg","用户名可用");
}
//将map转为JSON，并且传送给客户
ObjectMapper mapper = new ObjectMapper();
//转换为字符输出流，并且传递给客户端
mapper.writeValue(response.getWriter(),map);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
73
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
