Js原生Ajax、Jquery的Ajax和Json数据格式

最新推荐文章于 2024-03-05 08:15:48 发布

WinnerBear

最新推荐文章于 2024-03-05 08:15:48 发布

阅读量636

点赞数

本文链接：https://blog.csdn.net/WinnerBear/article/details/87882963

版权

ajax概述

1.同步和异步的概念

同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态。

异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死。

通俗的讲我们在网页执行一步操作时，如果是同步的话我们在执行这步操作的过程中就不能进行网页中其他内容的操作，必须等到网页返回响应时才能执行下一步操作，而一步就是我们可以同时进行多步操作。

因此，异步现象也被称为局部刷新。

2.Ajax的运行原理

页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。

js原生的Ajax技术（了解）

js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的，要使用js原生的Ajax完成异步操作，有如下几个步骤：

创建Ajax引擎对象
为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
绑定提交地址
发送请求
接受响应数据

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

	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、绑定地址
		xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true);
		//4、发送请求
		xmlHttp.send();
		
	}
	function fn2(){
		//1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
		var xmlHttp = new XMLHttpRequest();
		//2、绑定监听 ---- 监听服务器是否已经返回相应数据
		xmlHttp.onreadystatechange = function(){
			if(xmlHttp.readyState==4&&xmlHttp.status==200){
				//5、接受相应数据
				var res = xmlHttp.responseText;
				document.getElementById("span2").innerHTML = res;
			}
		}
		//3、绑定地址
		xmlHttp.open("POST","/WEB22/ajaxServlet",false);
		//4、发送请求
		xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		xmlHttp.send("name=wangwu");
		
	}

	
</script>

</head>
<body>
	<input type="button" value="异步访问服务器端" onclick="fn1()"><span id="span1"></span>
	<br>
	<input type="button" value="同步访问服务器端" onclick="fn2()"><span id="span2"></span>
	<br>
	<input type="button" value="测试按钮" onclick="alert()">
</body>
</html>

注意：如果是post提交

在发送请求之前设置一个头

并且post如果需要带参数传给serlvet，参数是写在send（）里面的

如果是get提交的话就写在open（）中间的访问地址后面，和之前传参数一样，上面的代码中有例子。

所用异步访问都是ajax引擎。

XMLHttpRequest 对象的三个重要的属性：

Json数据格式

json有两种格式：

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

例如：user对象用json数据格式表示

{"username":"zhangsan","age":28,"password":"123","addr":"北京"}

List<Product> 用json数据格式表示

[{"pid":"10","pname":"小米4C"},{},{}]

这里的话双引号里面是不能用单引号的，只能使用转义字符。

注意：对象格式和数组格式可以互相嵌套

注意：json的key是字符串 json的value是Object

json的解析：

json是js的原生内容，也就意味着js可以直接取出json对象中的数据

Json的转换插件

将java的对象或集合转成json形式字符串

json的转换插件是通过java的一些工具，直接将java对象或集合转换成json字符串。

常用的json转换工具有如下几种：

jsonlib
Gson：google
fastjson：阿里巴巴

jsonlib需要jar包

GSON完整包

Jquery的Ajax技术（重点）

jquery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的ajax的操作方法更简洁，功能更强大，与ajax操作相关的jquery方法有如下几种，但开发中经常使用的有三种

这里的$.post和$.get的区别主要是在于中文符号的区别，post的中文编译时自动编译好的，但是get的是没有编译好的，需要我们手动编译

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">


	function fn1(){
		//get异步访问
		$.get(
			"/WEB22/ajaxServlet2", //url地址
			{"name":"张三","age":25}, //请求参数
			function(data){ //执行成功后的回调函数
				//{\"name\":\"tom\",\"age\":21}
				alert(data.name);
			},
			"json"
		);
	}
	function fn2(){
		//post异步访问
		$.post(
			"/WEB22/ajaxServlet2", //url地址
			{"name":"李四","age":25}, //请求参数
			function(data){ //执行成功后的回调函数
				alert(data.name);
			},
			"json"
		);
	}
	function fn3(){
		$.ajax({
			url:"/WEB22/ajaxServlet2",
			async:true,
			type:"POST",
			data:{"name":"lucy","age":18},
			success:function(data){
				alert(data.name);
			},
			error:function(){
				alert("请求失败");
			},
			dataType:"json"
		});
	}
</script>

</head>
<body>
	<input type="button" value="get访问服务器端" onclick="fn1()"><span id="span1"></span>
	<br>
	<input type="button" value="post访问服务器端" onclick="fn2()"><span id="span2"></span>
	<br>
	<input type="button" value="ajax访问服务器端" onclick="fn3()"><span id="span2"></span>
	<br>
</body>
</html>

使用时可以参考一下两个API

访问jaon字符串的key值的两种方式

WinnerBear

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Js原生Ajax、Jquery的Ajax和Json数据格式

ajax概述1.同步和异步的概念同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态。异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死。通俗的讲我们在网页执行一步操作时，如果是同步的话我们在执行这步操作的过程中就不能进行网页中其他内容的操作，必须等到网页返回响应时才能执行下一步操作，而一步就是我们可以同...
复制链接

扫一扫