AJAX
-
概念:
-
ASynchronous JavaScript And XML 异步的JavaScript 和 XML
-
同步:客户端发送请求后,客户端必须等待服务端的响应,在等待期间客户端不能做其他操作
-
异步:客户端发送请求后,客户端不需要等待服务端的响应,在等待期间客户端可以做其他操作
-
-
功能:在无需重新加载整个网页的情况下,能够更新部分网页
-
好处:提升用户的体验感
-
-
实现方式
-
原生JS实现方式:
<script> function fun() { //发送异步请求 //1.创建核心对象 var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } //2.建立连接 /* 参数: 1.请求方式:GET,POST * get方式,请求方式在URL后边拼接,send方法为空参 * post方式,请求参数在send方法中定义 2.请求的URL: 3.同步或异步请求:true(异步) 或 false (同步) */ xmlhttp.open("GET", "ajaxServlet?username=tom", true); //3、发送请求 xmlhttp.send(); //4.接受并处理来自服务器的响应结果 //获取方式:xmlhttp.responseText; //什么时候获取? //当服务器响应成功后在获取 //当 xmlhttp 对象的就绪状态改变时,触发事件onreadystatechange xmlhttp.onreadystatechange = function () { //判断readystate就绪状态是否为4,判断status响应状态码是否为200 /* * 就绪状态存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪*/ if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //获取服务器的响应结果 var responseText = xmlhttp.responseText; alert(responseText); } } } </script> <input type="button" value="发送异步请求" onclick="fun();">
- 具体方法可参考w3cschool官网
-
-
JQeury实现方式
-
$.ajax()
-
语法:$.ajax({键值对});
-
代码片段
//使用$.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" })
-
-
$.get
-
语法:$.get(url, [data], [callback], [type])
-
参数:
- url:请求路径
- data:请求参数
- callback:回调函数
- type:响应结果的类型
-
代码片段:
$.get("ajaxServlet", {"username": "zhangsan"}, function (data) { alert(data); }, "text");
-
-
-
$.post()
- 语法:$.post(url, [data], [callback], [type])
-
参数:
- url:请求路径
- data:请求参数
- callback:回调函数
- type:响应结果的类型
-
代码片段:
$.post("ajaxServlet", {"username": "zhangsan"}, function (data) { alert(data); }, "text");
-
- 语法:$.post(url, [data], [callback], [type])
-
JSON
-
概念:JavaScript Object Notation : JavaScript对象表示法
-
功能:
-
json现在多用于存储和交换文本信息的语法
-
进行数据的传输
-
-
优点:比XML 更小、更快,更易解析
-
语法:
-
基本规则
- 数据在名称/值对中:json数据是由键值对构成的
- 键用引号(单双都行)引起来,也可以不使用引号
- 值得取值类型:
- 数字(整数或浮点数)
- 字符串(在双引号中)
- 逻辑值(true 或 false)
- 数组(在方括号中):
{"persons":[{},{}]}
- 对象(在花括号中)::
{"address":{"province":"陕西"....}}
- null
- 数据由逗号分隔:多个键值对由逗号分隔
- 花括号保存对象:使用{}定义json 格式
- 方括号保存数组:[]
- 键用引号(单双都行)引起来,也可以不使用引号
- 数据在名称/值对中:json数据是由键值对构成的
-
获取数据:
-
json对象.键名:
var name = person.name;
-
json对象[“键名”]:
var name = person["name"];
-
数组对象[索引]:
var name = persons.persons[2].name;
-
遍历
<script> var person = {"name": "张三", "age": 18, "gender": true}; var ps = [ {"name": "张三", "age": 18, "gender": true}, {"name": "王五", "age": 12, "gender": false}, {"name": "李四", "age": 19, "gender": true} ]; //获取person对象中所有的键与值 //for in 循环 /*for (var key in person) { //这样获取不到值--->原因:相当于 person."name" // alert(key +":"+person.key); alert(key + ":" + person[key]); }*/ 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
-
JSON转为Java对象
- 导入jackson的相关jar包
- 创建Jackson核心对象 ObjectMapper
- 调用ObjectMapper的相关方法进行转换
-
readValue(json字符串数据,Class)
//JSON字符串转换为Java对象 @Test public void test5() throws IOException { //1.初始化JSon字符串 String json = "{\"gender\":\"男\",\"name\":\"战三\",\"age\":18}"; //2.创建ObjectMapper对象 ObjectMapper mapper = new ObjectMapper(); //3.转换为Java对象Person对象 Person person = mapper.readValue(json, Person.class); System.out.println(person.toString()); }
-
-
Java对象转换JSON
- 使用步骤:
- 导入jackson的相关jar包
- 创建Jackson核心对象 ObjectMapper
- 调用ObjectMapper的相关方法进行转换
-
转换方法:
-
writeValue(参数1,obj):
- 参数1:
- File:将obj对象转换为JSON字符串,并保存到指定的文件中
- Writer:将obj对象转换为JSON字符串,并将json数据填充到字符输出流中
- OutputStream:将obj对象转换为JSON字符串,并将json数据填充到字节输出流中
- 参数1:
-
writeValueAsString(obj):将对象转为json字符串
//Java对象转换为JSON字符串 @Test public void test() throws IOException { //创建一个person对象 Person person = new Person(); person.setAge(18); person.setName("张三"); person.setGender("男"); //创建Jackson的核心对象 ObjectMapper ObjectMapper mapper = new ObjectMapper(); //转换 /* * 转换方法: * writeValue(参数1,obj); * 参数1: * File:将obj对象转换为JSON字符串,并保存到指定的文件夹中 * Writer:将obj对象转换为JSon字符窜,并将json数据填充到字符输出流中 * OutputStream:将obj对象转换为JSon字符窜,并将json数据填充到字节输出流中 * * writeValueAsString(obj):将obj对象转换为JSON字符串 * */ /*String str = mapper.writeValueAsString(person); System.out.println(str); //{"name":"张三","age":18,"gender":"男"}*/ // mapper.writeValue(new File("e://a.txt"),person); mapper.writeValue(new FileWriter("e://a.txt"), person); }
-
-
注解:
- @JsonIgnore:排除属性。
- @JsonFormat:属性值得格式化
- @JsonFormat(pattern = “yyyy-MM-dd”)
-
复杂java对象转换
-
List:数组
@Test public void test3() throws JsonProcessingException { //创建一个person对象 Person person1 = new Person(); person1.setAge(18); person1.setName("张三"); person1.setGender("男"); person1.setBirthday(new Date()); Person person2 = new Person(); person2.setAge(18); person2.setName("李四"); person2.setGender("男"); person2.setBirthday(new Date()); Person person3 = new Person(); person3.setAge(18); person3.setName("王五"); person3.setGender("女"); person3.setBirthday(new Date()); List<Person> people = new ArrayList<Person>(); people.add(person1); people.add(person3); people.add(person2); ObjectMapper mapper = new ObjectMapper(); String str = mapper.writeValueAsString(people); System.out.println(str); //[{"name":"张三","age":18,"gender":"男","birthday":"2020-06-05"},{"name":"王五","age":18,"gender":"女","birthday":"2020-06-05"},{"name":"李四","age":18,"gender":"男","birthday":"2020-06-05"}] }
-
Map:对象格式一致
@Test public void test4() throws JsonProcessingException { HashMap<String, Object> map = new HashMap<>(); map.put("name","战三"); map.put("age",18); map.put("gender","男"); ObjectMapper mapper = new ObjectMapper(); String str = mapper.writeValueAsString(map); System.out.println(str); //{"gender":"男","name":"战三","age":18} }
-
-
- 使用步骤:
- JSON解析器:
-