Ajax和Json 学习笔记

最新推荐文章于 2022-09-13 16:49:44 发布
最新推荐文章于 2022-09-13 16:49:44 发布
阅读量312 收藏
点赞数
分类专栏： JavaWeb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BigDevil_/article/details/104269832
版权

文章目录

Ajax

1. Ajax简述

Ajax 即 “Asynchronous Javascript And XML”，是指一种创建交互式网页应用的网页开发技术。Ajax = 异步 JavaScript 和 XML。通过在后台与服务器进行少量数据交换。

Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（局部更新）。传统的网页如果需要更新内容，必须重载整个网页页面。

2. 异步和同步的区别

在这里插入图片描述

  • 同步：一次请求对应一次响应。本次请求的响应结束前，不能下一次请求。
  • 异步：在本请求的响应结束之前，可以进行其他请求。

同步和异步，阻塞和非阻塞

3. Ajax实现方式

3.1 js方式实现ajax（不推荐）

JS的ajax：出现最早。使用一个对象XmlHttpRequest对象。专门用于进行ajax发送请求，和接收响应。

  1. 若使用JS的AJAX技术，为了实现简单功能，就需要书写大量复杂代码。
  2. JS的AJAX代码，浏览器兼容性比较差。
代码实现
前端页面：
<script type="text/javascript">
		//负责发送ajax请求
		function run(){
			//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、建立连接
			//参数一：请求方式   GET/Post
			//参数二：请求的url
			//参数三：true：异步   false:同步
			xmlhttp.open("GET","ajax?uname=baby",true);
			//3、发送请求
			xmlhttp.send();
			//4、响应
			xmlhttp.onreadystatechange=function()
			  {
			  if (xmlhttp.readyState==4 && xmlhttp.status==200)
			    {
			   	var text = xmlhttp.responseText;
			   	alert(text);
			    }
			  }
			
		}
	</script>
</head>
<body>

	<input type="button" value="js发送ajax请求" onclick="run()">
	
	<input type="text">
</body>
AjaxServlet：
//加长处理时间
		try {
			Thread.sleep(10000);
		} catch (InterruptedException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		String uname = request.getParameter("uname");
		System.out.println(uname);
		response.getWriter().write(uname);

使用XMLHttpRequest 对象实现Ajax【了解】很麻烦。。【了解】【了解】【了解】
1）xml格式获取xml格式数据，再用DOM解析。var result = request.responseXML;（使用XMLHttpRequest 对象实现Ajax）
2）html直接添加代码：document.getElementById(“details”).innerHTML = request.responseText;
3）json格式：var result = request.responseText; var object = eval("("+result+")");

4）document
document对象为对网页内部文档的操作，它基本上所有的东西都可以操作，一般用来操作一些标签。
而要想操作这个标签里面的元素，首先要找到该元素。
JS里面找元素的方式类似于样式表的选择器找元素的方式，同时为元素定义一个变量：
1.通过id查找：var a = document.getElementById(“a”);，括号内为元素的id；
2.通过class查找：var b = document.getElementsByClassName(“a”);，
括号内为元素的class；如果在class名后面加上[0],则可找到其中第一个元素，[]内的数字和数组内数字的顺序相同；
3.通过标签名查找：var c = document.getElementsByTagName(“div”);，括号内为标签名；
4.通过name查找：var d = document.getElementsByName(“uid”);，
这种查找方式适用于表单元素，括号内为表单元素的名字（name）。

3.2 jquery方式实现ajax（推荐）

ajax的属性和传参方法

JQuery的ajax：底层封装了JS的ajax代码，做了浏览器的兼容性。

程序员仅需要调用简单的JQ的AJAX方法，就可以实现复杂的AJAX功能。

  1. 少量代码，实现复杂功能
  2. 浏览器兼容性好，一处编写，处处执行
3.2.1 Get请求方式：$.get(url,data,callback,type)
3.2.1.1 Get请求方式语法

  • 格式：$.get(url,data,callback,type)

  • 参数1： url 请求的路径

  • 参数2： data 请求携带的参数

​ 参数格式（json）：key = value 或者 {uname:“baby”,pwd:666}

  • 参数3：callback 响应结束后的回调函数

  • 参数4：type 响应的数据类型 text、html、xml、json

3.2.1.2 Get请求方式代码
<script type="text/javascript">
		function fun(){
			//jq的get方式发送ajax请求
			//参数1
			var url = "/ajaxstu/ajax";
			//参数2
			var data = {uname:"baby",pwd:666};
			$.get(url,data,function(msg){
              	//msg  : 响应过来的内容体
				//响应成功后执行   200
				alert("响应成功！！"+msg);
			});
		}
	</script>

	<input type="button" value="jq的get方式"  onclick = "fun()">
3.2.2 Post请求方式：$.post(url,data,callback,type)
3.2.2.1 Post请求方式语法
  • 格式： $.post(url,data,callback,type)
3.2.2.2 Post请求方式代码
<script type="text/javascript">
		function fun(){
			//jq的post方式发送ajax请求
			//参数1
			var url = "/ajaxstu/ajax";
			//参数2
			var data = {uname:"baby",pwd:666};
			$.post(url,data,function(msg){
              	//msg  : 响应过来的内容体
				//响应成功后执行   200
				alert("响应成功！！"+msg);
			});
		}
	</script>

<input type="button" value="jq的post方式"  onclick = "fun()">
3.2.3 Ajax请求方式：$.ajax({ … })

ajax的属性和传参方法

3.2.3.1 Ajax请求方式语法
  • 方法1：jQuery.ajax({[settings]})
  • 方法2：$.ajax({[settings]})
    [settings] 是各种参数的设置
3.2.3.2 Ajax请求方式代码
function fun(){
			$.ajax({
				url:"/ajaxstu/ajax",
				async:true,// 异步 true为开启
				data:{uname:"baby",pwd:666}, // 参数
				type:"POST", // 请求方式
				dataType:"text", // 响应数据类型
				success:function(){
					alert("响应成功");
				},
				error:function(){
					alert("响应失败！！");
				}
			})
		}

3.3 load方法请求方式（不常用）

可以用于HTML文档的元素节点，把结果直接加为对应节点的子元素，通常而言，load方法加载后的数据是一个HTML片段
代码实现：

	var $obj = ...
	var url = ...
	var args = {key:value};
	$obj.load(url,args);
	
		$(function(){
		$("a").click(function(){
			var url = this.href;
			//避免缓存
			var args = {"time":new Date()};
			$("#content").load(url,args);
			return false;
			});	
		})

4. Ajax传输数据的3种格式

  • 1）XML：笨重，解析困难，但XML是通用的数据交换格式

  • 2）HTML：不需要解析可以直接放到文档中，若仅更新第一部分区域，但传输的数据不是很方便，且HTML代码需要拼装完成

  • 3）JSON：小巧，有面向对象的特征，且有很多第三方jar包可以把java对象或集合转为JSON字符串

JSON

1. Json简述

JSON(JavaScript Object Notation) JavaScript对象表示法。

是一种轻量级的数据交换格式。JSON采用完全独立于语言的文本格式，就是说不同的编程语言JSON数据是一致的。

易于人阅读和编写，同时也易于机器解析和生成(一般用于提升网络传输速率)。

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

2. Json语法格式

json是一个以键值对存在的集合，其中属性可以是字符串，数字，布尔值，json对象，方法，属性之间用逗号分隔。赋值用冒号 :

  • JSON自定义格式：

    var json1 = {参数名1:参数值1,参数名2:参数值2};

    注意：

    ​ 1、外面由{}括起来

    ​ 2、参数名和参数值之间用 “:” 隔开，多个参数之间用","隔开

    ​ 3、参数名的引号可加可不加

    ​ 4、参数值如果是string类型，就必须加引号，如果是数字类型，引号可加可不加

注意：

var jsonObject = {
			"name":"liming",
			"age":15,
			"adress":{"city":"beijing","school":"qinghua"},
			"teaching":function(){
				alert("这是json中的方法");
			}	
	}
	alert(jsonObject.name);
	console.log(jsonObject.adress.city);
	
	jsonObject.teaching();

	//把字符串转为json对象
	//使用eval()方法:可以把一个字符串转为本地的js代码来执行
	var jsonStr = "{'name':'zhangsan'}";
	var testStr = "alert('hello eval')";
	//可以把一个字符串转为本地的js代码来执行
	eval(testStr);
	//转为json的语法，需要前后加括号
	var testObject = eval("(" + jsonStr + ")");
	console.log(testObject.name);

3. JSON数据和Java对象相互转换

在这里插入图片描述
json和java对象相互转换的工具（第三方提供好的）

3.1 方法1：Json-lib

核心类：

  • JSONObject java对象或Map 转 json
  • JSONArray 数组或集合 转 json

核心方法： fromObject（Object obj）

导包
在这里插入图片描述

3.1.1 java对象转为json
/**
 *	内容 : json-lib.jar 的使用
 *		将Bean，Map，数组，集合 转成json对象
 */
public class JsonLibTest {
	@Test
	public void test1() {
		// JavaBean --> json
		User user = new User(1,"ZhangSan","aaaaa",new Date());
		// 转 json
		JSONObject jsonObject = JSONObject.fromObject(user);
		System.out.println(jsonObject.toString());
		// 结果
		/*
		 * 注意：date格式的数据 会转换成 json
		 * {
		 * "birth":
		 * {"date":11,"day":2,"hours":18,"minutes":19,"month":1,"seconds":36,"time":1581416376671,"timezoneOffset":-480,"year":120},
		 * "id":1,"password":"aaaaa","username":"ZhangSan"}
		 */
	}
	
	@Test
	public void test2() {
		// Map类型 --> json
		Map<String, String> map = new HashMap<String, String>();
		map.put("username", "ZhangSan");
		map.put("password", "aaaaa");
		map.put("id", "1");
		// 转 json
		JSONObject jsonObject = JSONObject.fromObject(map);
		System.out.println(jsonObject.toString());
		// {"password":"aaaaa","id":"1","username":"ZhangSan"}
	}
	
	@Test
	public void test3() {
		// 数组类型 --> json
		String[] arr = {"孙悟空","猪八戒","唐僧","沙僧"};
		
		JSONArray jsonArray = JSONArray.fromObject(arr);
		System.out.println(jsonArray.toString());
		// 结果：["孙悟空","猪八戒","唐僧","沙僧"]
	}
	
	@Test
	public void test4() {
		// List<Bean> --> json
		List<User> list = new ArrayList<>();
		list.add(new User(1,"zhangsan1","123"));
		list.add(new User(2,"zhangsan2","123"));
		list.add(new User(3,"zhangsan3","123"));
		list.add(new User(4,"zhangsan4","123"));
		JSONArray jsonArray = JSONArray.fromObject(list);
		System.out.println(jsonArray.toString());
		// 结果：
		/*
		 * [{"birth":null,"id":1,"password":"123","username":"zhangsan1"},
		 * {"birth":null,"id":2,"password":"123","username":"zhangsan2"},
		 * {"birth":null,"id":3,"password":"123","username":"zhangsan3"},
		 * {"birth":null,"id":4,"password":"123","username":"zhangsan4"}]
		 */
	}
	
}

3.2 方法2：Jackson

核心类： ObjectMapper
核心方法：

  • String writeValueAsString(Object obj); 将对象 输出为json字符串
  • void writeValue(File f,Object obj); 将对象转为json 并输出到f文件中

核心注解：

  1. @JsonIgnore 。可以在转为JSON对象时忽略该属性。注意：在需要忽略的属性的 属性 或 getter 或 setter上加注解：
  2. 将日期转化成指定格式，默认是时间戳 @JsonFormat(pattern="yyyy-MM-dd")

注意：Jackson底层用的反射，需要JavaBean的get和set方法。

了解：
在springmvc中用的jackson。
@ResponseBody将Java对象转为json（将return的java对象转为json格式并输出到响应体中）
@RequestBody 将json转为java对象 （将前端请求的json格式参数转为java对象封装到方法的参数中）

导包:
在这里插入图片描述

3.2.1 java对象转json
/**
 * 
 *	内容 : 用jackson 将java对象 转为 json类型
 *	核心类： ObjectMapper
 *	核心方法：String writeValueAsString(Object obj); 将对象 输出为json字符串
 *		void writeValue(File f,Object obj); 将对象转为json 并输出到f文件中
 *	
 *	核心注解：
 *		1.  可以在类的 getter方法加注解：@JsonIgnore 。可以在转为JSON对象时忽略该属性
 *		2.  将日期转化成指定格式，默认是时间戳  @JsonFormat(pattern="yyyy-MM-dd") 
 */
public class JacksonTest {
	@Test
	public void test1() throws JsonProcessingException {
		// Bean --> Json
		User user = new User(1,"ZhangSan","aaaaa",new Date());
		ObjectMapper mapper = new ObjectMapper();
		// 将值 转换成json对象 以String方式 输出
		String jsonStr = mapper.writeValueAsString(user);
		System.out.println(jsonStr);
		
		// 结果：{"id":1,"username":"ZhangSan","password":"aaaaa","birth":1581420272416}
		// date类型会被转为 时间戳
	}
	
	@Test
	public void test2() throws Exception {
		// Bean --> Json 输出成文件
		User user = new User(1,"ZhangSan","aaaaa",new Date());
		ObjectMapper mapper = new ObjectMapper();
		// 将值转为json对象， 并输出到 1.txt 中
		mapper.writeValue(new File("1.txt"), user);
	}
	
	@Test
	public void test3() throws Exception {
		// Map --> Json
		Map<String, String> map = new HashMap<String, String>();
		map.put("username", "ZhangSan");
		map.put("password", "aaaaa");
		map.put("id", "1");
		ObjectMapper mapper = new ObjectMapper();
		String jsonStr = mapper.writeValueAsString(map);
		System.out.println(jsonStr);
		// 结果：{"password":"aaaaa","id":"1","username":"ZhangSan"}
	}
	
	@Test
	public void test4() throws Exception {
		// 数组 --> Json
		String[] arr = {"孙悟空","猪八戒","唐僧","沙僧"};
		ObjectMapper mapper = new ObjectMapper();
		String jsonStr = mapper.writeValueAsString(arr);
		System.out.println(jsonStr);
	}
	
	@Test
	public void test5() throws Exception {
		// List<Bean> --> Json
		List<User> list = new ArrayList<>();
		list.add(new User(1,"zhangsan1","123"));
		list.add(new User(2,"zhangsan2","123"));
		list.add(new User(3,"zhangsan3","123"));
		list.add(new User(4,"zhangsan4","123"));
		ObjectMapper mapper = new ObjectMapper();
		String jsonStr = mapper.writeValueAsString(list);
		System.out.println(jsonStr);
	}
}
3.2.2 json转java对象
@Test
	public void test1() throws Exception {
		String json = "{\"id\":101,\"username\":\"baby\",\"password\":\"666\",\"birth\":\"2020-02-11\"}";
		ObjectMapper mapper = new ObjectMapper();
		User user = mapper.readValue(json, User.class);
		System.out.println(user);
		// User [id=101, username=baby, password=666, birth=Tue Feb 11 08:00:00 CST 2020]
	}
3.3.3 注解使用

在这里插入图片描述
图片里的@JsonFormat 打错了

BigDevil_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax&Json学习笔记
08-01
Ajax，Json的学习笔记
Ajax和jQuery学习笔记
03-29
这个笔记是很全面的原生Ajax用法、json解释和jQuery选择器、dom操作、事件的讲解每一部分都有例子搭配，是学习熟悉jQuery的好资料！
Ajax&Json——学习笔记（一）
weixin_39941298的博客
08-07 441
一、Ajax简介 1.Ajax是一种网页开发技术，（Asynchronous Javascript+XML）异步JavaScript和XML； 2.Ajax是异步交互，局部刷新； 3.Ajax能减少服务器压力； 4.Ajax能提高用户体验； 二、Ajax交互与传统交互比较 传统交互：网页整体刷新，服务器压力大，用户体验不好； Ajax交互：局部刷新，服务器压力小，用户体验好； 三、...
ajax(json)学习笔记
Ledis的博客
11-03 249
ajax基于json的学习
AJAX 和 JSON学习笔记
sako_77的博客
05-29 163
Ajax 和 Json (参考遇见狂神说b站视频） Web 1.0 时代 登录，如果失败，需要刷新页面，才能重新登录；不点击提交按钮，就不知道自己密码输错了； 现在搜索时，没有刷新页面，网页只有一部分在变（局部刷新=异步刷新，不刷新整个页面的情况下，实现页面更新）； 注册的时候，发现手机已经注册过了，但是你只是输入了，没有提交，他就提示了。 Web 2.0 时代 最重要的一个因素，就是Ajax。 ———————————————————————————————————— JSON （它和xml一样都是一种数据
AJAX 和JSON学习笔记
weixin_43591127的博客
08-16 103
AJAX 和JSON AJAX概念：ASynchronous javascript and xml 异步的javascript和xml 异步和同步：客户端和服务器端相互通信的基础上 同步：客户端必须等待服务器的响应，在等待的期间客户不能做其他操作 异步：客户端不需要等待服务器的响应，在服务器处理请求的过程中，客户端可以进行其他操作 AJAX:是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实
Ajax和Json学习笔记
killerhz的博客
06-17 181
AJAX： 1. 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML 1. 异步和同步：客户端和服务器端相互通信的基础上 * 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 * 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 [1] 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更
AJAX+JSON学习笔记
weixin_44467904的博客
09-13 310
ajax+json学习笔记
ajax&json学习笔记
weixin_46600354的博客
04-22 152
Ajax学习笔记整理
12-09
Ajax: Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据. Ajax历史…...
json 入门学习笔记 示例代码
12-01
JSON（JavaScript Object Notation）是一种轻便的数据交换格式，它基于JavaScript的一个子集，设计时主要目标是让数据的读写对人类来说既简单又快速，同时也方便机器解析和生成。JSON格式通常用于Web服务之间的数据...
Tomcat的8005、8080、8009、8443端口号
BigDevil_的博客
04-01 3336
Tomcat的8005、8080、8009、8443端口号的作用 8005：关闭tomcat进程所用，远程停服务端口。当执行shutdown.sh关闭tomcat时就是连接8005端口执行“SHUTDOWN”命令–由此，我们直接telnet8005端口执行“SHUTDOWN”（要大写，小写没用；只能telnet 127.0.0.1 8005，其他地址telnet都不能连接）也可以成功关闭tom...
浏览器服务器中文乱码问题
BigDevil_的博客
01-14 2014
文章目录中文乱码问题一、请求乱码（服务器获取请求参数时乱码）post方法请求：1.原因：2.详细解释：3.解决服务器获取请求体中文乱码方式：get方法请求：1.原因：2.详细解释：3.解决get方式服务器获取请求参数中文乱码方式：二、响应乱码（浏览器获取响应体时中文乱码）1.原因：2.详细解释：3.解决浏览器获取响应数据中文乱码：三、URL编码一、POST和GET请求方式的区别：二、tomcat对...
Listener 监听器学习笔记
BigDevil_的博客
02-12 266
文章目录监听器 Listener1. 监听器简述2.监听器创建2.1 方法1：新建Listener2.2 方法2：新建class,实现需要的监听器接口，并实现方法。手动添加@WebListener注解3. 常用监听器3.1 第一类：监听 “域对象” 创建 和 销毁3.1.1 ServletContextListener3.1.2 HttpSessionListener3.1.3 ServletRe...
Filter学习笔记
BigDevil_的博客
02-11 244
文章目录Filter：过滤器1. 创建Filter2. 过滤器的用途3. 生命周期:1. Servlet2. Request/Response3. Session4. ServletContext5. Filter注意：==修改Servlet代码或Filter代码后，会重新加载环境。同时会销毁Filter并重新初始化。==4. Filter的执行流程（单个过滤器）5. Filter的执行流程（过滤...
事务四大特性和隔离级别总结
BigDevil_的博客
01-11 215
文章目录事务四大特性：A:原子性(Atomicity)定义实现C:一致性(Consistency)定义实现I:隔离性(Isolation)定义隔离性可能引发的问题，和隔离级别实现D:持久性(Durability)定义实现隔离性可能引发的问题，和隔离级别问题注意：不可重复读和幻读的区别是：隔离级别：总结 事务四大特性： ACID 原子性(Atomicity)、一致性(Consistency)、隔离性...
NC57供应商管理.pdf
最新发布
07-11
NC57供应商管理
Ajax学习笔记pink老师
07-29
对于学习Ajax，我可以为您提供一些学习笔记。以下是一份简要的Ajax学习笔记，希望对您有所帮助： 1. 什么是Ajax？ - Ajax全称为Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于创建交互式Web...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值