AJAX
-
概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML
-
异步和同步：客户端和服务器端相互通信的基础上
- 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
- 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 [1]
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。提升用户的体验
-
-
实现方式
- 原生的JS实现
请求的servlet：
package 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 { this.doGet(request, response); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1.获取ajax的请求参数 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); } }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax</title> <script> //原生js实现ajax function fun() { //XMLHttpRequest 是 AJAX 的基础。 //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 * 2.请求URL * 3.同步或异步，async：true（异步）或 false（同步） */ xmlhttp.open("GET","ajaxServlet?username=tom",true); //get请求参数写在请求URL的后头,xmlhttp.send();空参传递 //3. 发送请求 xmlhttp.send(); //xmlhttp.send("username=tom"); 传递的是post请求所携带的参数 //4.接收处理服务器点的响应 //获取方式xmlhttp.responseText;当xmlhttp就绪状态发生变化时，触发onreadystatechange xmlhttp.onreadystatechange=function() { /** (1)有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 * 0: 请求未初始化 * 1: 服务器连接已建立 * 2: 请求已接收 * 3: 请求处理中 * 4: 请求已完成，且响应已就绪 (2)xmlhttp.status *200: "OK" * 404: 未找到页面 */ if (xmlhttp.readyState==4 && xmlhttp.status==200) { var responseText = xmlhttp.responseText; alert(responseText); } } } </script> </head> <body> <input type="button" value="发送异步请求" onclick="fun()"> <input type="text"> </body> </html>注意：
-
JQeury实现方式
- $.ajax()
- 语法：$.ajax({键值对});
<script> //jq实现ajax function fun() { $.ajax({ url:"ajaxServlet", type:'POST', data:{"username":"jay","age":44}, //请求参数 json写法(推荐) //第二种data写法 //data:"username=jay&age=33" success:function (data) { alert(data); //data接受后台 }, dataType:"text" }); } </script>- $.get()
- 语法：$.get(url, [data], [callback], [type])
参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
- 语法：$.get(url, [data], [callback], [type])
<script> //jq实现ajax get function fun() { $.get("ajaxServlet",{"username":"liuzeyu","age":44},function (data) { alert(data) },"text"); } </script>- $.post()
- 语法：$.post(url, [data], [callback], [type])
参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
- 语法：$.post(url, [data], [callback], [type])
<script> //jq实现ajax get function fun() { $.get("ajaxServlet",{"username":"liuzeyu","age":44},function (data) { alert(data) },"text"); } </script> - $.ajax()
- 原生的JS实现
JSON
1.概念及特点
概念：JavaScript object Notation ,javascript对象表示法， 类似于Java中对对象的封装。
如：
Student stu = new Student();
stu.setName("zhangsan");
stu.setAge(22);
stu.setGender('男');
引入json,写在js文件里面
var p = {“name”:“zhangsan”,“age”:33};
json特点：
1. json现在多用于存储和交换文件信息的语法
2. 进行数据的传输
3. 比xml更小，更快，更易解析
2.语法
-
基本规则
数据在名称/值对中：json数据是由键值对构成的
键用引号（单双都行）引起来，也可以不使用引号
值得取值类型：1.数字（整数或浮点数）2.字符串（在双引号中） 3.逻辑值（true或false） 4.数组（在方括号中）{“persons"：[{}，{}]} 5.对象（在花括号中）{“address"：{“province”：“陕西“.…}} 6.null
数据由逗号分隔：多个键值对由逗号分隔
花括号保存对象：使用{）定义json格式
方括号保存数组：[]
<script>
//1.定义基本格式，以键值对形式存在
var person1 = {"name":"zhangsan","age":33};
var person2 = {name:"zhangsan","age":33};//键值还可以不用写“”
//alert(person2)
//2.嵌套格式 1，如[]中有｛｝
var person3 = {"person":[
{"name":"zhangsan","age":33},
{"name":"lisi","age":22}
]};
//alert(person3)
//3.嵌套格式2，｛｝中有[]
var person4 = [
{"name":"zhangsan","age":33},
{"name":"lisi","age":22}
];
alert(person4)
</script>
- 获取值
- json对象.键名
- json对象.[“键名”] //主要用于遍历，见下
- json数组对象[索引]
<script>
//1.定义基本格式，以键值对形式存在
var person1 = {"name":"zhangsan","age":33};
//alert(person1.name)
//2.嵌套格式 1，如[]中有｛｝
var person3 = {"person":[
{"name":"zhangsan","age":33},
{"name":"lisi","age":22}
]};
//alert(person3.person[1].age);
//3.嵌套格式2，｛｝中有[]
var person4 = [
{"name":"zhangsan","age":33},
{"name":"lisi","age":22}
];
alert(person4[1].name)
</script>
- 遍历
<script>
//1.定义基本格式，以键值对形式存在
var person = {"name":"zhangsan","age":33};
//遍历person对象中所有键和值
for(var p in person){ //取键名
//alert(p+":"+person[p]);
//此处不能alert(p+":"+person.p); person.p=person."键名"
}
//3.嵌套格式2，｛｝中有[]
var ps = [
{"name":"zhangsan","age":33},
{"name":"lisi","age":22}
];
//遍历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 ,jackjson
- json转Java
//json对象转换成java对象
@Test
public void test4() throws Exception {
String json = "{\"name\":\"liuzeyu\",\"age\":12,\"gender\":\"男\"}";
ObjectMapper mapper = new ObjectMapper();
Person person = mapper.readValue(json, Person.class);
System.out.println(person);
}
- Java转json
. 使用步骤：
1. 导入jackjson相关jar包
2. 创建jackjson核心对象ObjectMapper
3. 调用ObjectMapper相关方法进行转换
//java对象转换成json对象
@Test
public void test1() throws Exception {
//1.创建person对象
Person person = new Person();
person.setName("liuzeyu");
person.setAge(12);
person.setGender("男");
//创建Json对象 ObjectMapper
ObjectMapper mapper = new ObjectMapper();
/**
* 装换方法：
* 1.writeValue（参数1，object）
* 参数1：
* 1.File:将Object对象转换成jason字符串，并保存到指定文件中
* 2.Writer:将Object对象转换成jason字符串，并保存到指定字符输出流中
* 3.OutputStream:将Object对象转换成jason字符串，并保存到指定字节输出流中
* 2.writeValueAsString(参数1)
* 1.将Object对象转换成jason字符串
*/
String json = mapper.writeValueAsString(person);//{"name":"liuzeyu","age":12,"gender":"男"}
//System.out.println(json);
//File对象写入到文件中
mapper.writeValue(new File("c://a.txt"),person);
//字符流写到文件中
mapper.writeValue(new FileWriter("c://a.txt"),person);
}
- 注解：
常用的注解：
@JsonIgnore //忽略Java对象转换成json对象字符串
@JsonFormat(pattern = “yyyy-MM-dd”) 格式化json字符串 - 复杂Java对象转换json字符串```
//java对象转换成json对象(复杂对象)
@Test
public void test3() throws Exception {
//1.创建person对象
Person person = new Person();
person.setName("liuzeyu");
person.setAge(12);
person.setGender("男");
person.setBirthday(new Date());
//1.创建person1对象
Person person1 = new Person();
person1.setName("zhangsan");
person1.setAge(12);
person1.setGender("女");
person1.setBirthday(new Date());
//1.创建person2对象
Person person2 = new Person();
person2.setName("liuzeyu");
person2.setAge(12);
person2.setGender("男");
person2.setBirthday(new Date());
//准备集合类
List<Person> personList = new ArrayList();
personList.add(person);
personList.add(person1);
personList.add(person2);
ObjectMapper mapper = new ObjectMapper();
String s = mapper.writeValueAsString(personList);
//System.out.println(s); //[{},{},{}]
Map map = new HashMap<>();
map.put("name","lizueyu");
map.put("age",12);
map.put("gender","男");
String value = mapper.writeValueAsString(map);
System.out.println(value); //{"gender":"男","name":"lizueyu","age":12}
}
京公网安备 11010502036488号