AJAX

2022-10-25 15:46:43 浏览数 (1)

AJAX

  • 一、AJAX
  • 二、 XMLHttpRequest的概述
  • 三、Ajax数据格式
  • 四、JQuery中使用Ajax
  • 五、Ajax使用Jackson
    • 1. 代码
    • 2. 注解

一、AJAX

Asynchronous（异步的，不等待的） JavaScript And XML，多个技术联合实现的前端技术产物。 在服务器端，Ajax是一门与语言无关的技术。服务器端接受数据必须以浏览器能理解的格式发送，返回数据只能为XML、JSON或HTML。 案例：自动补全、地图

ajax请求就是一个线程，主要解决页面的局部刷新问题。

不刷新整个页面就可与服务器通讯： Flash、Java applet、框架、隐藏的iframe、XMLHttpRequest（ajax）

缺点：后退功能不好实现、对流媒体支持没有Flash和Java applet好、手持设备支持差。

二、 XMLHttpRequest的概述

代码语言：javascript复制
<script type="text/javascript">
	window.onload = function(){
		//1.获取a节点，并为其添加onclick响应函数
		document.getElementsByTagName("a")[0].onclick = function(){
			//3.创建一个XMLHttpRequest对象
			var request = new XMLHttpRequest();
			//4.准备发送请求的数据：url
			//可以添加“?time=” new Date()，来起到禁用缓存的效果
			var url = this.href;
			var method = "GET";
			//5.调用XMLHttpRequest对象的open方法，准备请求
			request.open(method, url);
			//6.调用send方法，发送请求
			request.send(null);
			//7.为对象添加onreadystatechange响应函数，由服务器触发事件，标志是readyState属性变化
			request.onreadystatechange = function(){
				//8.判断响应是否完成：对象的readyState属性值为4的时候
				//readyState：0表示未初始化，没有调用open方法；1表示正在加载，没有调用send方法；2表示已加载完毕，请求已经开始；3表示交互中，服务器正在发送响应；4表示完成，响应发送完毕。每次值的改变都要触发onreadystatechange事件。
				if(request.readyState == 4){
					//9.再判断响应是否可用：对象的status属性值为200
					//status是服务器发送的状态码，1/2/3/4/5开头
					if(request.status == 200 || request.status == 304){
						//10.打印响应结果：responseText
						//包含了从服务器端发送的数据，是一个html/xml/txt
						alert(request.responseText);
					}
			}	
		}
		//2.若是超链接，取消a节点的默认行为
		return false;
	}
}
</script>

<body>
	<a href="helloAjax.txt">Hello</a>
</body>

三、Ajax数据格式

  1. HTML 普通文本组成，文本存储在responseText属性中，HTML已经是希望的格式可以直接插入页面中。 方法：更新这个元素的innerHTML属性。
代码语言：javascript复制
//放到id为details的div标签中
document.getElementById("details").innerHTML = request.responseText;

优点：HTML不需要JS解析、可读性好、与innerHTML属性搭配效率高； 缺点：HTML不合适更新一篇文档的多个部分、非DOM标准。

  1. XML
代码语言：javascript复制
//1.结果为XML格式，需要使用responseXML来获取
var result = request.responseXML;
//2.结果不能直接使用，需要先建立对应的节点，再将节点加入到#detail中
var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;
var email = result.getElementsByTagName("email")[0].firstChild.nodeValue;

var aNode = document.createElement("a");
aNode.appendChild(document.creatTextNode(name));
aNode.href = "mailto:" email;
var h2Node = document.createElement("h2");
h2Node.appendChild(aNode);
var aNode2 = document.createElement("a");
aNode.appendChild(document.creatTextNode(website));
aNode.href = website;
var detailsNode = document.getElementById("details");
detailsNode.innerHTML = "";
detailsNode.appendChild(h2Node);
detailsNode.appendChild(aNode2);

优点：XML为数据自定义合适的标记、利用DOM可以完全掌控文档； 缺点：文档手部信息/类型不正确，responseXML值为空、DOM解析复杂。

  1. JSON JSON（JavaScript Object Notation）是JavaScript原生格式，处理时不需要任何特殊的API或工具包。对象是无序的键值对集合，Json的值还可以是一个方法。
代码语言：javascript复制
//把字符串转成json对象，使用eval方法
var jsonStr = "{'name':'huang'}";
eval("(" jsonStr")");

var result = request.responseText;
var object = eval("(" result ")");
var name = object.person.name;

优点：JSON不需要从服务器端发送含有特定内容类型的首部信息。 缺点：过于严谨、不易读、eval函数存在风险（死循环）。

  • 总结 不需要与其他应用程序共享数据时，用HTML片段返回数据； 数据需要重用，用JSON； 远程应用程序未知时，用XML（web服务领域的世界语）。

四、JQuery中使用Ajax

JQuery对Ajax进行了封装，最底层方法.ajax()，第二层是load()，.get()和.post()，第三层是.getScript()和

代码语言：javascript复制
//load方法，加载后的数据是HTML
<script type="text/javascript">
	$(document).ready(function () {
       $("#testAjax").click(function () {
            var url = this.href; //添加：  “ h2 a div”
            //load可以添加callback函数，或者添加Date来去除缓存
            //只返回部分信息：可以添加选择器，url后加空格加位置
            $("#details").load(url);
            return false;
        });
    });
</script>

//get方法，自己填充data。post方法类似，args为JSON格式变量
$.get(url, args, function(data){
	var name = $(data).find("name").text();
	...
	$("#details").empty().append("${JS语句，加上面的name}");
})

//getJSON方法
var name = data.person.name;
//或者使用get方法，在最后加上type属性为"JSON"

//找name为username的input节点
$(":input[name='username']")

//解决乱码
response.setContentType("text/html";charset=UTF-8);
response.setCharacterEncoding("UTF-8");

五、Ajax使用Jackson

1. 代码

代码语言：javascript复制
//1.创建ObjectMapper对象
//2.调用writeValueAsString方法把一个对象转成Json字符串
//Jackson使用getter方法来定位JSON对象的属性
//可以添加JsonIgnore注解来忽略某个geeter定义的属性

/**
 * 序列化
 * ObjectMapper是JSON操作的核心，Jackson的所有JSON操作都是在ObjectMapper中实现。
 * ObjectMapper有多个JSON序列化的方法，可以把JSON字符串保存File、OutputStream等不同的介质中。
 * writeValue(File arg0, Object arg1)把arg1转成json序列，并保存到arg0文件中。
 * writeValue(OutputStream arg0, Object arg1)把arg1转成json序列，并保存到arg0输出流中。
 * writeValueAsBytes(Object arg0)把arg0转成json序列，并把结果输出成字节数组。
 * writeValueAsString(Object arg0)把arg0转成json序列，并把结果输出成字符串。
 */
ObjectMapper mapper = new ObjectMapper();
String json = mapper.writeValueAsString(user);

/**
 * 反序列化
 * ObjectMapper支持从byte[]、File、InputStream、字符串等数据的JSON反序列化。
 */
ObjectMapper mapper = new ObjectMapper();
User user = mapper.readValue(json, User.class);

2. 注解

（1）@JsonAutoDetect 自动检测，（作用在类上）来开启/禁止自动检测。

（2）@JsonIgnore 作用在字段或方法上，用来完全忽略被注解的字段和方法对应的属性。 @JsonIgnoreProperties更高级。

（3）@JsonProperty 作用在字段或方法上，用来对属性的序列化/反序列化，可以用来避免遗漏属性，同时提供对属性名称重命名。

（4）@JsonUnwrapped 作用在属性字段或方法上，用来将子JSON对象的属性添加到封闭的JSON对象。

（5）@JsonIdentityInfo 2.0 版本新注解，作用于类或属性上，被用来在序列化/反序列化时为该对象或字段添加一个对象识别码，通常是用来解决循环嵌套的问题。 用法：@JsonIdentityInfo(generator = ObjectIdGenerators.PropertyGenerator.class, property = “id”) // 可加参数resolver = 类名.class 解释：被注解的实体类每次被序列化时，Jackson都会被为它生成一个标识id，若遇到id相同的对象（即同一个对象），则不会再次对其序列化，直接忽略，可以断绝循环引用。

（6）@JsonPropertyOrder 作用在类上，被用来指明当序列化时需要对属性做排序，它有2个属性。

（7）@JsonView 视图模板，作用于方法和属性上，用来指定哪些属性可以被包含在JSON视图中。

更多的注解可以参考这篇博客。

javascript xml html json ajax

0 人点赞