Ajax和Json

最新推荐文章于 2024-07-21 22:36:34 发布

langao_

最新推荐文章于 2024-07-21 22:36:34 发布

阅读量186

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/langao_q/article/details/81333145

版权

java 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

1.ajax简介

同步现象：客户端发送请求到服务端，当服务端返回响应之前，客户端都处在等待“卡死”状态（不能做其他操作）

异步现象：客户端发送请求到服务端，无论服务端是否返回响应，客户端都能进行随意操作，不会被“卡死”

原理：页面发送请求，会将请求发送给浏览器内核中的Ajax引擎（ajax引擎存在于浏览器内核中），由Ajax引擎提交请求到服务端，在这段时间里，客户端可以进行任何操作，直到服务端将数据返回给Ajax引擎后会触发设置的事件，从而完成一些js逻辑的页面操作。

2.JS原生Ajax技术（了解）

Ajax可以通过JavaScript原生代码进行异步操作，步骤：

1）创建ajax引擎对象

2）为ajax引擎对象绑定监听事件（得到响应数据）

3）绑定提交请求的地址

4）发送请求

5）接收响应数据

点击按钮，通过ajax异步发送请求，所用异步访问都是ajax引擎

function fn1(){
		//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
		var xmlHttp = new XMLHttpRequest();
		//2、绑定监听 ---- 监听服务器是否已经返回相应数据
		xmlHttp.onreadystatechange = function(){
			if(xmlHttp.readyState==4&&xmlHttp.status==200){
				//5、接受相应数据
				var res = xmlHttp.responseText;
				document.getElementById("span1").innerHTML = res;
			}
		}
		//3、绑定地址，true是代表异步，false表示同步（ajax一般都为true异步）
		xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true);
		//4、发送请求
		xmlHttp.send();
		
	}

3.jQuery的ajax技术（划重点）

jquery的ajax即是对js的原生ajax进行了封装，封装后的ajax操作更加简洁、功能更强大。一般开发我们都是使用jquery的ajax技术。

后台得到ajax请求的数据直接request.getParameter("");即可，而后台响应数据则通过response.getWriter().write("此处一般返回json格式数据")；

String name = request.getParameter("name");
//java代码只能返回一个json格式的字符串
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write("{\"name\":\"汤姆\",\"age\":21}");

3.1）$.get(url, [data], [callback], [type]);

3.2）$.post(url, [data], [callback], [type]);

url代表请求的服务器端地址[必选，其他三个为可选]

data：代表请求服务器端的数据（可以是key=value形式也可以是json格式，一般都为json格式）

callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行，用来接收响应数据和响应的js操作）

type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换），常用的返回类型：text、json、html等

ge或post请求方式，get不能接收中文字符串，而post内置了解析中文的方法可以用来接收中文。其他方面无区别

function fn2(){
		//post异步访问
		$.post(
			"/WEB22/ajaxServlet2", //url地址
			{"name":"李四","age":25}, //请求参数
			function(data){ //执行成功后的回调函数，data即是响应数据
				alert(data.name);
			},
			"json"
		);
	}

3.3）$.ajax( { option1:value1,option2:value2... } );

常用的option有如下：

async：是否异步，默认是true代表异步

data：发送到服务器的参数，建议使用json格式

dataType：服务器端返回的数据类型，常用text和json

success：成功响应执行的函数，对应的类型是function类型

type：请求方式，POST/GETurl：请求服务器端地址

function fn3(){
		$.ajax({
			url:"/WEB22/ajaxServlet2",
			async:true,
			type:"POST",
			data:{"name":"lucy","age":18},//此处是请求数据
			success:function(data){//此处的data是响应数据
				alert(data.name);
			},
			error:function(){//请求失败执行方法
				alert("请求失败");
			},
			dataType:"json"
		});
	}

4.Json（重点）

json是一种和语言无关的数据交换格式，一般用来使用ajax进行前后台的数据交互，移动端与服务端的数据交换

json有两种数格式

a.对象格式：{"key1":obj,"key2":obj,"key3":obj...}

b.数组/集合格式：[obj,obj,obj...]

注意：两种格式可以相互嵌套，json的key是字符串value是object（int时无需引号），json是js的原生内容js可以直接取出json中的数据（jq也可以）

取值参照表：

<script>
	 var json = {
			"key1":"value1",//简单json
			"key2":{"firstname":"张","lastname":"三丰","age":100},//user对象
			"key3":[
 		          	{"name":"小双","age":28,"addr":"扬州"},//List<user对象>
 		          	{"name":"建宁","age":18,"addr":"紫禁城"},
 		          	{"name":"阿珂","age":10,"addr":"山西"},
 		          ]
	 };
	 alert(json.key1);
	 alert(json.key2.lastname);
	 alert(json.key3[2].name);
</script>

4.2）json的转换插件

作用是将java的集合或者对象转换成json形式的字符串

常用的json转换工具有如下几种：（需要导入jar包）

1）jsonlib：json自家（用得情况少）

2）Gson：google（常用）

3）fastjson：阿里巴巴（经常用）

                //使用json的转换工具将对象或集合转成json格式的字符串
		/*jsonlib方式
		JSONArray fromObject = JSONArray.fromObject(productList);
		String string = fromObject.toString();
		System.out.println(string);*/
		
		//geson方式
		Gson gson = new Gson();
		String json = gson.toJson(productList);
		System.out.println(json);
		
		response.setContentType("text/html;charset=UTF-8");
		response.getWriter().write(json);

总结

1.原生js的ajax
	1）创建ajax引擎对象
	2）为ajax引擎对象绑定监听事件（得到响应数据）
	3）绑定提交请求的地址
	4）发送请求
	5）接收响应数据

2.jquery的ajax
	1）$.get(url, [data], [callback], [type]);
	2）$.post(url, [data], [callback], [type]);
	3）$.ajax( { option1:value1,option2:value2... } );

3.json
	a.对象格式：{"key1":obj,"key2":obj,"key3":obj...}
	b.数组/集合格式：[obj,obj,obj...]