今日内容
1. AJAX:
2. JSON
工程已经上传到github
https://github.com/Jonekaka/learnWeb_20819
AJAX:
1. 概念: ASynchronous JavaScript And XML 异步的JavaScript 和 XML
1. 异步和同步:客户端和服务器端相互通信的基础上
* 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
* 客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作。
Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。
提升用户的体验
就是说,刷新局部网页,类似于线程,你干你的,我做我的,你做好了把数据传过来就成。
2. 实现方式:
1. 原生的JS实现方式(了解)
java文件测试
package AjaxLearn;
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("/ajaxTest")
public class AjaxTest extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String username = request.getParameter("username");
System.out.println(username);
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>AJAX</title>
<script>
// 定义方法
function fun() {
// 发送异步请求
// 创建核心对象
var xmlHttp;
if(window.XMLHttpRequest){
// code for it7+,firefox,chorme,opera,safari
xmlHttp=new XMLHttpRequest();
}else{
// code for ie6,5
xmlHttp=new ActiveXObject();
}
// 建立连接
// get,send方法空参,参数在url后拼接
// post 参数在send中
// ,url,同步或者异步请求开关
xmlHttp.open("GET","ajaxTest?username=tom",true);
// 发送请求
xmlHttp.send();
// 接收并处理服务器反馈结果
// 服务器响应成功后才能获取,获取方法为xmlHttp.responseText
xmlHttp.onreadystatechange=function () {
// 判断响应状态,readystate就绪状态是否为4,status响应码是否为200
// 4,请求已经完成,响应就绪
// alert(xmlHttp.readyState);
// alert(xmlHttp.status);
if(xmlHttp.readyState==4 && xmlHttp.status==200){
// 响应成功,获得结果
var respText=xmlHttp.responseText;
alert(respText);
}
// 这一个不应该出现,因为他会递增式的从234判断,直到4成功才开始执行
// else{
// alert("错误");
// }
}
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
</body>
</html>
- JQeury实现方式
1. . 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 () {
// 使用$.ajax发送异步请求
$.ajax({
// 请求路径
url:"ajaxTest",
// 请求方式
type:"POST",
// 请求参数
// data:"username=jack&age=123",
data:{
"username":"jack","age":123},
// 可选,响应成功以及失败后的回调函数
success:function(data){
alert(data); },
error:function () {
alert("出错了"); },
// 设置接收到的响应数据的格式
dataType:"text"
});
})
</script>
</head>
<body>
</body>
</html>
-
. g e t ( ) : 发 送 g e t 请 求 ∗ 语 法 : .get():发送get请求 * 语法: .get():发送get请求∗语法:.get(url, [data], [callback], [type])
* 参数:
* url:请求路径
* data:请求参数
* callback:回调函数
* type:响应结果的类型3. $.post():发送post请求 * 语法:$.post(url, [data], [callback], [type]) * 参数: * url:请求路径 * data:请求参数 * callback:回调函数 * type:响应结果的类型
<!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 () {
$.get("ajaxTest",{
username:"123"},function (data) {
alert(data);
},"text");
})
</script>
</head>
<body>
</body>
</html>
JSON:
1. 概念: JavaScript Object Notation JavaScript对象表示法。类似java中的类方法
* json现在多用于存储和交换文本信息的语法
* 进行数据的传输
* JSON 比 XML 更小、更快,更易解析。轻量
- 语法:
1. 基本规则
* 数据在名称/值对中:json数据是由键值对构成的
* 键用引号(单双都行)引起来,也可以不使用引号
* 值得取值类型:
1. 数字(整数或浮点数)
2. 字符串(在双引号中)
3. 逻辑值(true 或 false)
4. 数组(在方括号中) {“persons”:[{},{}]}
5. 对象(在花括号中) {“address”:{“province”:“陕西”…}}
6. null
* 数据由逗号分隔:多个键值对由逗号分隔,为了阅读方便,单双引号建议统一规范
* 花括号保存对象:使用{}定义json 格式
* 方括号保存数组:[]
2. 获取数据:
1. json对象.键名
2. json对象[“键名”]
3. 数组对象[索引]
4. 遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 定义基本格式
// var person={"name":"李四","age":123};
// alert(person.name);
// alert(person["name"]);
// 嵌套格式,{[]}
var person={
"person":[
{
"name":"李四","age":123},
{
"name":"李四","age":123},
{
"name":"李四","age":123}]};
// alert(person.person[2].name);
// alert(person.person[1]);
// 嵌套格式[{}]
var ps=[{
"name":"李四","age":123},{
"name":"李四","age":123}];
// alert(ps[1].name);
// 遍历,对于数组,获得数组长度
for(var i=0;i<ps.length;i++)
{
var person=ps[i];
// 获得的都是键,“xxx”,因此实用a.b方式不行,相当于a."xxx",要使用a["xx"]
for(var key in person){
alert(person[key]);
}
}
</script>
</head>
<body>
</body>
</html>
-
JSON数据和Java对象的相互转换
* JSON解析器: * 常见的解析器:Jsonlib,Gson,fastjson,jackson(spring mvc内置解析器) 这里使用jackson 1. JSON转为Java对象 1. 导入jackson的相关jar包 2. 创建Jackson核心对象 ObjectMapper 3. 调用ObjectMapper的相关方法进行转换 1. readValue(json字符串数据,Class) 2. Java对象转换JSON 1. 使用步骤: 1. 导入jackson的相关jar包 2. 创建Jackson核心对象 ObjectMapper 3. 调用ObjectMapper的相关方法进行转换 1. 转换方法: * writeValue(参数1,obj): 参数1: File:将obj对象转换为JSON字符串,并保存到指定的文件中 Writer:将obj对象转换为JSON字符串,并将json数据填充到字符输出流中 OutputStream:将obj对象转换为JSON字符串,并将json数据填充到字节输出流中 * writeValueAsString(obj):将对象转为json字符串 2. 注解: 1. @JsonIgnore:排除属性。 2. @JsonFormat:属性值得格式化 * @JsonFormat(pattern = "yyyy-MM-dd") 3. 复杂java对象转换 1. List:数组 2. Map:对象格式一致
person对象
package AjaxLearn.domain;
import com.fasterxml.jackson.annotation.JsonFormat;
import java.util.Date;
public class Person {
private String name;
private int age;
private String gender;
// @JsonIgnore忽略该属性
@JsonFormat(pattern="yyyy-MM-dd")
private Date 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;
}
public Date getBirthday() {
return birthday;
}
public void setBirthday(Date birthday) {
this.birthday = birthday;
}
@Override
public String toString() {
return "Person{" +
"name='" + name + '\'' +
", age=" + age +
", gender='" + gender + '\'' +
'}';
}
}
jacksontest
package AjaxLearn.Test;
import AjaxLearn.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;
import java.util.ArrayList;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
public class JsonTest {
// java对象转化为json字符串
@Test
public void testOne() throws Exception {
Person person = new Person();
person.setName("李四");
person.setAge(23);
person.setGender("女");
// 创建jackson核心对象,ObjectMapper
ObjectMapper objectMapper = new ObjectMapper();
// 转换
String s = objectMapper.writeValueAsString(person);
// System.out.println(s);
// 将数据写到文件中
objectMapper.writeValue(new File("d://a.txt"),person);
// 将数据关联到writer中,字符输出流,流到文件中
objectMapper.writeValue(new FileWriter("d://a.txt"),person);
}
// java对象转化为json字符串,list对象数组
@Test
public void testTWO() throws Exception {
Person person = new Person();
person.setName("李四");
person.setAge(23);
person.setGender("女");
person.setBirthday(new Date());
Person person1 = new Person();
person1.setName("李四");
person1.setAge(23);
person1.setGender("女");
person1.setBirthday(new Date());
List<Person> people = new ArrayList<Person>();
people.add(person);
people.add(person1);
// 创建jackson核心对象,ObjectMapper
ObjectMapper objectMapper = new ObjectMapper();
// 转换
String s = objectMapper.writeValueAsString(people);
System.out.println(s);
}
// java的map对象转json
@Test
public void testThree() throws Exception {
// 创建map对象
HashMap<String, Object> stringObjectHashMap = new HashMap<>();
stringObjectHashMap.put("name","李四");
stringObjectHashMap.put("age",12);
// 创建jackson核心对象,ObjectMapper
ObjectMapper objectMapper = new ObjectMapper();
// 转换
String s = objectMapper.writeValueAsString(stringObjectHashMap);
System.out.println(s);
}
// json转java
@Test
public void testFour() throws Exception {
// 初始化json
String json="{\"name\":\"李四\",\"age\":13}";
// 创建jackson核心对象,ObjectMapper
ObjectMapper objectMapper = new ObjectMapper();
// 转化为java对象
Person person = objectMapper.readValue(json, Person.class);
System.out.println(person);
}
}
案例:
* 校验用户名是否存在
1. 服务器响应的数据,在客户端使用时,要想当做json数据格式使用。有两种解决方案:
1. $.get(type):将最后一个参数type指定为"json"
2. 在服务器端设置MIME类型
response.setContentType("application/json;charset=utf-8");
logincheck
package AjaxLearn.web;
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;
@WebServlet("/loginNameCheck")
public class LoginNameCheck extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
// 设置响应数据格式
response.setContentType("application/json;charset=utf-8");
HashMap<String, Object> stringObjectHashMap = new HashMap<>();
if("tom".equals(username)){
stringObjectHashMap.put("userExsit",true);
stringObjectHashMap.put("msg","用户名重复");
}
else{
stringObjectHashMap.put("userExsit",false);
stringObjectHashMap.put("msg","用户名可用");
}
ObjectMapper objectMapper = new ObjectMapper();
objectMapper.writeValue(response.getWriter(),stringObjectHashMap);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
jsp
扫描二维码关注公众号,回复:
11967144 查看本文章
<!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事件
$("#username").blur(function () {
// 获得输入文本框的值
var uName=$(this).val();
// 发送ajax异步请求
$.get("loginNameCheck",{
username:uName},function (data) {
// 判断用户名是否存在
// 提示文本调整格式
var span=$("#s_username");
alert(data.userExsit);
if(data.userExsit){
// 用户名存在
span.css("color","red");
span.html(data.msg);
}else{
span.css("color","green");
span.html(data.msg);
}
});
});
});
</script>
</head>
<body>
<form>
<input type="text" id="username" name="username" placeholder="用户名">
<sapn id="s_username"></sapn>
<br/>
<input type="password" name="password" placeholder="密码"><br/>
<input type="submit" value="注册"><br/>
</form>
</body>
</html>