Java学习笔记day41

新手小白6

已于 2022-12-03 10:12:38 修改

阅读量211

点赞数

分类专栏： Java学习记录文章标签： java 学习 javascript

于 2022-11-27 15:30:06 首次发布

本文链接：https://blog.csdn.net/kouzai8880/article/details/127970403

版权

Java学习记录专栏收录该内容

41 篇文章 0 订阅

订阅专栏

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.设置回调

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

示例: 
    ajaxReq.onreadystatechange = function (ev1) {
    	if (ajaxReq.readyState == 4 && ajaxReq.status == 200){
    		var text = ajaxReq.responseText;
    		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

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

对象转换为JSON

普通对象转换为JSON
Person person = new Person("张三", "男", 18);
Gson gson = new Gson();
String json = gson.toJson(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 = gson.toJson(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 = gson.toJson(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.println(ps.get(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.println(m.get("220101").getName());

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

其他

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

前端页面跳转

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

前端存值

cookie

webStorage

localStorage

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

sessionStorage

//存值
sessionStorage.setItem("name","张三")
//取值
var name = sessionStorage.getItem("name")
//删除
sessionStorage.removeItem("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: 不与服务器进行交互通信

获取方式: 
document.cookie
localStorage: window.localStorage
sessionStorage: window.sessionStorage

经验: 
cookie: 专业的前端开发人员,很少使用
localStorage: 适合长期存储在本地的数据,如判断用户是否已登录
sessionStorage: sessionStorage存储的数据更偏向业务一些,如页面间数据传递等