关于Ajax
概念
Ajax ： ASynchronous JavaScript And XML （异步的JavaScript 和 XML）
- Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 提升用户的体验
- 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
异步 和 同步：
客户端和服务器端相互通信的基础上 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
准备操作：
目录结构：
servlet准备：
ajax的实现
1、 原生的JS实现方式
2、jquery方式
（1）通用的方式：$.ajax()
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="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 fun() {
$.ajax({
url:"ajaxServlet" , // 请求路径
type:"POST" , //请求方式
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>
在输入框里面写一些字母，如果刷新整个页面的话，字母肯定是 不在了。但是当我在输入框里面写一些字母，点击“发送异步请求”按钮，它相当于也是和服务器端进行了交互，也发送了 但是它是异步的请求，整个页面是不会刷新的，也就是意味着这些字母还在。
（2）针对get请求： $.get()
- 语法：$.get(url, [data], [callback], [type])
* 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
<script>
function fun() {
$.get("ajaxServlet",{username:"rose"},function (data) {
alert(data);
},"text");
}
</script>
（3）针对post请求：$.post()
- 语法：$.post(url, [data], [callback], [type])
* 参数：
* url：请求路径
* data：请求参数
* callback：回调函数
* type：响应结果的类型
<script>
function fun() {
$.post("ajaxServlet",{username:"rose"},function (data) {
alert(data);
},"text");
}
</script>
关于 Json
概念：
JavaScript Object Notation （JavaScript对象表示法）
json现在多用于存储和交换文本信息的语法，用来进行数据的传输
JSON 比 XML 更小、更快，更易解析。
语法：
1、json数据是由键值对构成的
- 键 用引号(单双都行)引起来，也可以不使用引号
- 值 类型：
（1）数字（整数或浮点数）
（2）字符串（在双引号中）
（3）逻辑值（true 或 false）
（4）数组
（5）对象
（6）null
2、数据由逗号分隔：多个键值对由逗号分隔
3、花括号 保存对象：使用{}定义json 格式
4、方括号 保存数组：[]
//定义基本格式
var person = {"name": "张三", age: 20, 'gender': true};
//嵌套格式1 花括号 套 方括号
var ps1 = {
"persons": [
{"name": "张三", "age": 20, "gender": true},
{"name": "李四", "age": 21, "gender": true},
{"name": "王五", "age": 22, "gender": false}
]
};
//嵌套格式2 方括号 套 花括号
var ps2 = [
{"name": "张三", "age": 20, "gender": true},
{"name": "李四", "age": 21, "gender": true},
{"name": "王五", "age": 22, "gender": false}
];
获取 Json 数据:
1. json对象.键名
对于 “基本格式” 有 var name = person.name;
2. json对象[“键名”]
对于 “基本格式” 有 var name =person["name"];
3. 数组对象[索引]
对于 “嵌套格式1” 有 var name1 = ps1.persons[2].name;
对于 “嵌套格式2” 有 var name2 = ps2[1].name;
4. 遍历
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
/*
var person = {"name": "张三", age: 20, 'gender': true};
//for in 循环
for(var key in person){
alert(key+":"+person[key]);
}
*/
var ps2 = [
{"name": "张三", "age": 20, "gender": true},
{"name": "李四", "age": 21, "gender": true},
{"name": "王五", "age": 22, "gender": false}
];
for (var i = 0; i < ps2.length; i++) {
var p = ps2[i];
for(var key in p){
alert(key+":"+p[key]);
}
}
</script>
</head>
<body>
</body>
</html>
JSON数据和Java对象的相互转换
常见的JSON解析器：
Jsonlib，Gson，fastjson，jackson（jackson是springmvc内置的解析器）
- JSON转为Java对象（了解）
public static void test4() throws Exception {
//1.初始化JSON字符串
String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":23}";
//2.创建ObjectMapper对象
ObjectMapper mapper = new ObjectMapper();
//3.转换为Java对象 Person对象
Person person = mapper.readValue(json, Person.class);
System.out.println(person);
}
- Java对象转换JSON
package domain;
import java.util.Date;
import com.fasterxml.jackson.annotation.JsonFormat;
public class Person {
private String name;
private int age ;
private String gender;
//@JsonIgnore // 忽略该属性
@JsonFormat(pattern = "yyyy-MM-dd")
private Date birthday;
public Date getBirthday() {
return birthday;
}
public void setBirthday(Date birthday) {
this.birthday = birthday;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
@Override
public String toString() {
return "Person{" +
"name='" + name + '\'' +
", age=" + age +
", gender='" + gender + '\'' +
'}';
}
}
需要引入关于 jackson 的 三个jar包
import java.util.Date;
import com.fasterxml.jackson.databind.ObjectMapper;
import domain.Person;
public class JacksonTest{
public static void main(String[] args) {
try {
test1();
} catch (Exception e) {
e.printStackTrace();
}
}
public static void test1() throws Exception {
//1.创建Person对象
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
p.setBirthday(new Date());
//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);
}
}
//writeValue，将数据写到d://a.txt文件中
mapper.writeValue(new File("e://a.txt"),p);
//writeValue，文件IO之字符流
mapper.writeValue(new FileWriter("e://b.txt"),p);
如果是要将 List对象 转换为Json格式呢？？
只需要在 //2.创建Jackson的核心对象 ObjectMapper前加上一个步骤：
List<Person> ps = new ArrayList<Person>();
ps.add(p);
ps.add(p1);
ps.add(p2);
如果是要将 map对象 转换为Json格式呢？？
public static void test3() throws Exception {
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);
}
有兴趣的同学可以用ajax技术做一下 校验用户名是否存在
扫一扫
2302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
