一、AJAX
1.概念：
ASynchronous JavaScript And XML 异步的JavaScript 和 XML
异步和同步：客户端和服务器端相互通信的基础上
同步：客户端必须等待服务器端的响应，在等待的期间客户端不能做其他操作
异步：客户端不需要等待服务器端的响应，在服务器处理请求的过程中，客户端可以进行其他的操作
Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在与后台服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的部分进行更新。
传统的网页(不使用Ajax)如果需要更新内容，必须重载整个网页页面。
提升用户的体验
2.实现方式：
- 原声的JS实现方式(了解一下)
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> //定义方法 function fun() { //发送异步请求 //1.创建核心对象 var xmlhttp; if (window.XMLHttpRequest) { // 用于现代浏览器的代码 xmlhttp = new XMLHttpRequest(); } else { // 应对老版本 IE 浏览器的代码 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } //2.建立连接 /* 参数： 1.请求方式：GET、POST * get方式：请求参数在URL后边拼接，send方法为空参 * post方式：请求参数在send方法中定义 2.请求的URL： 3.同步或异步请求：async：true（异步）或 false（同步） */ xmlhttp.open("GET","ajaxServlet?username=tom",true); //3.发送请求 xmlhttp.send(); //4.接收并处理来自服务器的响应结果 //获取方式： xmlhttp.responseText; //什么时候获取？当服务器响应成功后在获取 //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange xmlhttp.onreadystatechange = function() { //判断readyState就绪状态是否为4，判断status响应状态码是否为200 if (this.readyState == 4 && this.status == 200) { //获取服务器响应结果 // document.getElementById("demo").innerHTML = this.getAllResponseHeaders(); var responseText = xmlhttp.responseText; alert(responseText); } }; } </script> </head> <body> <input type="button" value="发送异步请求" onclick="fun();"> <input> </body> </html> - readyState保存了 XMLHttpRequest 的状态。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 正在处理请求
- 4: 请求已完成且响应已就绪
-
- JQuery实现方式
- $.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",//请求方式 // 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：请求路径
- data：请求参数
- callback：回调函数
- type：响应结果的类型
- 参数：
- 语法：$.get(url,[data],[callback],[type])
- $.post()
- $.ajax()
二、JSON
1. 概念：
JavaScript Object Motation JavaScript对象表示法
var p = {"name":"张三","age":"23","gender":"男"};
- json现在多用于存储和交换文本信息的语法
- 进行数据的传输
- json比XML更小、更快、更易解析
2. 语法：
2.1 基本规则
- 数据在名称/值对中：json数据时由键值对构成的
- 键用引号（单双都行）引起来，也可以不使用引号
- 值的取值类型：
- 数字(证书或浮点数)
- 字符串(在双引号中)
- 逻辑值(true或false)
- 数组(在方括号中)
- 对象(在花括号中)
- null
- 数据又逗号分隔：多个键值对由逗号分隔
- 花括号保存对象：使用{}定义json格式
- 方括号保存数组：[]
2.2 获取数据：
- json对象.键名
-
var person1 = {"name":"杨哥","age":"22","gender":true};
-
- json对象["键名"]
-
var person2 = {"person2":[ {"name":"杨爷爷","age":22,"gender":true}, {"name":"杨gege","age":25,"gender":true}, {"name":"杨niubi","age":28,"gender":true} ]};
-
- 数组对象[索引]
-
var person3 = [ {"name":"杨爷爷","age":22,"gender":true}, {"name":"杨gege","age":25,"gender":true}, {"name":"杨niubi","age":28,"gender":true} ];
-
-
获取对象中所有的键和值
-
//for in 循环 for (var key in person1) { //拿到的键对应的是字符串形式 // alert(key+":"+person1.key);//这样的方式获取不到，因为相当于person."name" alert(key+":"+person1[key]); } //获取person3中的所有值 for (var i = 0; i < person3.length; i++) { var p = person3[i]; for (var key in p) { alert(key+":"+p[key]); } }
-
3. JSON数据和Java对象的相互转换
- JSON解析器：
- 常见的解析器：Jsonlib、Gson、fastjson、jackson
3.1 JSON转为Java对象（了解一下）
- 导入jackson的相关jar包
- 创建Jackson核心对象 ObjectMapper
- 调用ObjectMapper的相关方法进行转换
- readValue(json字符串数据,Class)
3.2Java对象转为JSON
- 使用步骤：
- 导入jackson的相关jar包
- 创建Jackson核心对象 ObjectMapper
- 调用ObjectMapper的相关方法进行转换
-
package com.yangge.test; import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jackson.databind.ObjectMapper; import com.sun.deploy.perf.PerfRollup; import com.yangge.domain.Person; 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对象转换为字符串，并保存到指定文件中 Writer：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中 OutPutStream：将obj对象转换为JSON字符串，并将数据填充到字节输出流中 writeValueAsString(obj):将对象转为json字符串 */ String json1 = mapper.writeValueAsString(p); //{"name":"张三","age":23,"gender":"男"} System.out.println(json1); //writerValue，将数据写到d://a.txt文件中 // mapper.writeValue(new File("d://a.txt"),p); //writerValue，将数据关联到Writer中 mapper.writeValue(new FileWriter("d://b.txt"),p); } }注解：
-
@JsonIgnore：排除属性
-
@JsonFormat：属性的格式化
-
-
复杂java对象转换
-
List：数组
-
Map：与对象格式一致
-
@Test public void test3() throws Exception { //1.创建Person对象 Person p = new Person(); p.setName("张三"); p.setAge(23); p.setGender("男"); p.setBirthday(new Date()); Person p1 = new Person(); p1.setName("张三"); p1.setAge(23); p1.setGender("男"); p1.setBirthday(new Date()); Person p2 = new Person(); p2.setName("张三"); p2.setAge(23); p2.setGender("男"); p2.setBirthday(new Date()); //创建List集合 List<Person> list =new ArrayList<Person>(); list.add(p); list.add(p1); list.add(p2); //2.转换 ObjectMapper mapper = new ObjectMapper(); String json = mapper.writeValueAsString(list); System.out.println(json); } @Test public void test4() throws Exception{ //创建map对象 Map<String,Object> map = new HashMap<String,Object>(); map.put("name","张三"); map.put("age","23"); map.put("gender","男"); //转换 ObjectMapper mapper = new ObjectMapper(); String json = mapper.writeValueAsString(map); System.out.println(json); }
-
364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
