Java学习笔记day41

Java学习笔记day41

AJAX

简介

全称: Asynchronous JavaScript And XML
中文名: 异步JS与XML
作用: 网页使用JavaScript脚本实现前端与服务器的异步交互技术,可以在不刷新网页的前提下实现和服务器的数据交互
注意: AJAX不是一种编程语言,而是使用JS的一种技术

使用步骤

原生AJAX

步骤

1.创建网络通讯对象
2.打开连接
3.设置回调
4.发送请求

1.创建网络通讯对象

因为存在兼容问题所以分两种方式创建 
//IE7以下
var ajaxReq = new ActiveXObject("Microsoft.XMLHTTP");
//IE7及以上版本
var ajaxReq = new XMLHttpRuquest();
注意: 可以通过window.XMLHttpRequest判断浏览器是否支持XMLHttpRuquest示例: 
var ajaxReq;
if (window.XMLHttpRequest){ajaxReq = new XMLHttpRequest();
} else{ajaxReq = new ActiveXObject("Microsoft.XMLHTTP");
}

2.打开连接

方法: open(method,url,async)method: 表示异步请求的请求方式 (GET|POST)url: 异步请求的目标路径asyn: 是否异步 (true异步,false同步)示例1: GET请求ajaxReq.open("GET","url?key=value&key2=value2",true);
示例2: POST请求ajaxReq.open("POST","url",true);注意: POST请求如果想像标签一样上传数据,需要在打开连接后,发起请求前设置请求头,如: ajaxReq.setRequestHeader("Content-type","application/x-www-form-urlencoded");
传参1.在发起请求时填入上传的参数2.与GET相同,将上传的参数追加到url的尾部

3.设置回调

语法: adystatechange = function (ev1) {}
注意: 当请求状态发生改变时就会调用
请求状态: 0 表示ajax请求对象完成创建但并未初始化1 表示ajax请求对象完成初始化但未发送请求2 表示ajax请求已经发送并到达服务器3 表示服务器正在处理ajax请求(通信...)4 表示服务器正处理完成,ajax请求对象已经成功获取响应结果
获取服务器响应内容:
//获得字符串形式的响应数据
sponseText
//获得 XML 形式的响应数据
sponseXML示例: adystatechange = function (ev1) {if (adyState == 4 && ajaxReq.status == 200){var text = sponseText;alert(text);}};

4.发送请求

get请求
ajaxReq.send(null);post请求
//不带参
ajaxReq.send(null);
//带参,仅支持POST请求
ajaxReq.send("key1=value1&key2=value2");

JSON

简介

全称: JavaScript Object Notation
中文名: JS对象简谱
特点: 
一种轻量级的数据交换格式
一种特殊的字符串,方便了机器进行解析和生成
相较原来的XML格式数据,JSON数据的解析占用内存少,效率高
作用: 前后端之间、不同语言之间进行数据交互所遵守的一种数据的格式

格式

1.键值
键值之间使用冒号连接,多个键值对之间使用逗号连接
如: "name":"张三","age":18...2.对象或字典
使用{}表示
//对象
{"name":"张三","age":18}3.集合
使用[]表示
[
{"name":"张三","sex":"男","age":18},
{"name":"李四","sex":"男","age":19},
{"name":"小丽","sex":"女","age":18}
]

格式转换

js对象转换为JSON

普通对象转换JSON
//创建JS对象
var obj = {"name":"张三","sex":"男","age":18};
//将JS对象转换成JSON格式字符串
var jsonStr = JSON.stringify(obj);列表(集合)对象转换为JSON
function Person(name,sex,age) {this.name = name;this.sex = sex;this.age = age;
}
var p1 = new Person("张三","男",18);
var p2 = new Person("李四","男",19);
var p3 = new Person("小丽","女",18);
var list = [];
list[0] = p1;
list[1] = p2;
list[2] = p3;
var json = JSON.stringify(list);
console.log(json);

JSON转换为js对象

JSON转换为普通对象
var jsonStr = '{"name":"张三","sex":"男","age":18}';
var obj = eval("("+jsonStr+")");
console.log(obj.name);JSON转换为列表(集合)
var json = '[{"name":"张三","sex":"男","age":18},{"name":"李四","sex":"男","age":19},{"name":"小丽","sex":"女","age":18}]';
var list = eval("("+json+")");
console.log(list[0].name);

Java

三方包: FASTJsonGSONJackSon
注意: 常用GSON,需要导入GSON的jar包

对象转换为JSON

普通对象转换为JSON
Person person = new Person("张三", "男", 18);
Gson gson = new Gson();
String json = Json(person);
System.out.println(json);
//转换后数据: {"name":"张三","sex":"男","age":18}

集合对象转换为JSON
Person p01 = new Person("张三", "男", 18);
Person p02 = new Person("李四", "男", 19);
Person p03 = new Person("小丽", "女", 18);
ArrayList<Person> list = new ArrayList<>();
list.add(p01);
list.add(p02);
list.add(p03);
Gson gson = new Gson();
String json = Json(list);
System.out.println(json);
/*
转换后数据: [{"name":"张三","sex":"男","age":18},{"name":"李四","sex":"男","age":19},{"name":"小丽","sex":"女","age":18}]
*/

字典对象转换为JSON
Person p01 = new Person("张三", "男", 18);
Person p02 = new Person("李四", "男", 19);
Person p03 = new Person("小丽", "女", 18);
HashMap<String, Person> map = new HashMap<>();
map.put("220101",p01);
map.put("220102",p02);
map.put("220103",p03);
Gson gson = new Gson();
String json = Json(map);
System.out.println(json);
/*
{"220102":{"name":"李四","sex":"男","age":19},"220101":{"name":"张三","sex":"男","age":18},"220103":{"name":"小丽","sex":"女","age":18}}
*/

JSON转换为对象

JSON字符串转换为普通对象
String json = "{'name':'张三','sex':'男','age':18}";
Person p = gson.fromJson(json, Person.class);

JSON字符串转换为集合
String json = "[{'name':'张三','sex':'男','age':18},{'name':'李四','sex':'男','age':19},{'name':'小丽','sex':'女','age':18}]";
Type type = new TypeToken<ArrayList<Person>>(){}.getType();
ArrayList<Person> ps = gson.fromJson(json, type);
System.out.(0).getName());

JSON字符串转换为字典
String json = "{'220102':{'name':'李四','sex':'男','age':19},'220101':{'name':'张三','sex':'男','age':18},'220103':{'name':'小丽','sex':'女','age':18}}";
Type type = new TypeToken<Map<String,Person>>(){}.getType();
Map<String,Person> m = gson.fromJson(json, type);
System.out.("220101").getName());

注意: 1.实体类中必须提供无参构造函数2.实体类中属性名必须与key值相同

其他

后端给前台返回数据时,需要设置响应的数据类型为application/json
response.setContentType("application/json;charset=UTF-8");

前端页面跳转

location.href = "要跳转的页面";

前端存值

cookie

webStorage

localStorage

//存值
localStorage.setItem("name","张三");
//取值
var name = Item("name");
//删除
veItem("name");
//修改,key值相同即为修改
localStorage.setItem("name","李四");
//清空
localStorage.clear();

sessionStorage

//存值
sessionStorage.setItem("name","张三")
//取值
var name = Item("name")
//删除
veItem("name");
//修改,key值相同即为修改
sessionStorage.setItem("name","李四")
//清空
sessionStorage.clear()注意: session与sessionStorage并不相同

cookie,localStorage,sessionStorage

生命周期: 
cookie: 时间到了或被用户删除
localStorage: localStorage的生命周期是永久的,关闭页面或浏览器之后localStorage中的数据也不会消失.除非主动删除数据,否则数据永远不会消失
sessionStorage: 仅在当前浏览器窗口关闭之前有效存储大小: 
cookie: 4kb
localStorage,sessionStorage: 5MB,甚至更大存储位置: 
都保存在客户端是否与服务器通讯: 
cookie: 同源的http请求中携带(即使不需要)
localStorage,sessionStorage: 不与服务器进行交互通信获取方式: 
kie
localStorage: window.localStorage
sessionStorage: window.sessionStorage经验: 
cookie: 专业的前端开发人员,很少使用
localStorage: 适合长期存储在本地的数据,如判断用户是否已登录
sessionStorage: sessionStorage存储的数据更偏向业务一些,如页面间数据传递等