【精选】Ajax技术知识点合集

Ajax技术详解

Ajax简介

Ajax 的使用

• Ajax 的运行原理

• XMLHttpRequest 对象

​ XMLHttpRequest 是浏览器接口对象，该对象的 API 可被 JavaScript、VBScript 以及其它web 浏览器内嵌的脚本语言调用，通过 HTTP 协议在浏览器和 web 服务器之间收发 XML 或其它数据。XMLHttpRequest 可以与服务器实现异步交互，而无需让整个页面刷新，因此成为 Ajax 编程的核心对象。

• Ajax 的使用步骤

创建 XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

给定请求方式以及请求地址

xhr.open("get","http://www.example.com");

发送请求

xhr.send()

获取服务器端给客户端的响应数据

xhr.onreadystatechange = function(){//0:请求未初始化//1:服务器连接已建立//2:请求已接收//3:请求处理中//4:请求已完成，且响应已就绪if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById("span").innerHTML=xhr.responseText;alert(xhr.responseText);}
}

Ajax请求

请求的步骤：

正如您在上面的示例中所看到的，XMLHttpRequest对象起着重要作用

1. 用户从 UI 发送请求，JavaScript 中调用 XMLHttpRequest对象。
2. HTTP请求由XMLHttpRequest 对象发送到服务器。
3. 服务器使用 JSP，PHP，Servlet，ASP.net 等与数据库交互。
4. 检索数据。
5. 服务器将 XML 数据或 JSON数据发送到 XMLHttpRequest 回调函数。
6. HTML和 CSS 数据显示在浏览器上。

Ajax同步或异步

Async=true

当使用 async=true时，请规定在响应处于onreadystatechange事件中的就绪状态时执行的函数

xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {document.getElementById("view").innerHTML = xhr.responseText;}        
}
xmlhttp.open("GET","get.txt",true);
xmlhttp.send();

Async = false

我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

xmlhttp.open("GET","get.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Ajax服务器响应

状态行 xhr.status状态码，如200，304，404等；

响应主体 xhr.responseText与xhr.responseXML都表示响应主体。

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的responseText或responseXML属性。

var xhr = new XMLHttpRequest();xhr.open("GET", "http://localhost:8080/xmlTest.xml", true);
xhr.send();xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {//解析返回的xml文件xmlDoc = xhr.responseXML;txt = "";x = xmlDoc.getElementsByTagName("ARTIST");for (i=0;i<x.length;i++) {txt = txt + x[i].childNodes[0].nodeValue + "<br>";}document.getElementById("view").innerHTML = txt;}
}

JSON详解

{"userid":1,"username":"admin","sex":"male"}

[{"userid":1,"username":"admin"},{"userid":2,"username":"zhangsan"}]

JACKSON 的使用

​ 在 JDK 中并没有内置操作 JSON 格式数据的 API，因此使用处理 JSON 格式的数据需要借 助第三方类库。几个常用的 JSON 解析类库：

1. Gson: 谷歌开发的 JSON 库，功能十分全面。
2. FastJson: 阿里巴巴开发的 JSON 库，性能十分优秀。
3. Jackson: 社区十分活跃且更新速度很快。被称为“最好的 Json 解析器”

Jackson 简介

Jackson 是一种解析 JSON 格式数据的 API，也是最流行，速度最快的 JSON API，最新版本是2.13.3，有3个jar包需要下载：

1. jackson-core-2.13.3.jar（核心jar包）
2. jackson-annotations-2.13.3.jar（提供Json注解支持）
3. jackson-databind-2.13.3.jar（数据绑定，依赖于前两个包）

在项目中引入Jackson

序列化

**使用Jackson把java对象转换成Json数据。**首先，创建TestBean.java

public class TestBean {//idprivate String id;//姓名private String name;//嵌套对象private List<Element> elements;public String getId() {return id;}public void setId(String id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public Elements getElements() {return elements;}public void setElements(Elements elements) {this.elements = elements;}
}}

再创建Element.java

public class Element {//年龄private Integer age;//呢称private String ename;public Integer getAge() {return age;}public void setAge(Integer age) {this.age = age;}public String getEname() {return ename;}public void setEname(String ename) {this.ename = ename;}
}

把Java对象转成Json

Element element = new Element();
element.setAge(23);
element.setEName("java");
ObjectMapper objectMapper = new ObjectMapper();
String elementStr = objectMapper.writeValueAsString(element);
System.out.println(elementStr);

输出结果如下

{"age":23,"elName":"java"}

反序列化

把Json转成Java对象

String str = "{\"id\":1,\"name\":\"zhangsan\",\"elements\":[{\"age\":22,\"elName\":\"xiaozhang\"},{\"age\":26,\"elName\":\"xiaosan\"}]}";
ObjectMapper objectMapper = new ObjectMapper();
TestBean testBean = objectMapper.readValue(str, TestBean.class);
System.out.println(testBean.toString());

输出结果如下：

TestBean(id=1, name=haha, elements=[Element(age=22, elName=xiaozhang), Element(age=26, elName=xiaosan)])

常用注解

1. 将这个注解加载类上，不存在的字段将被忽略。

   @JsonIgnoreProperties(ignoreUnknown = true)
   

2. 指定忽略字段

   @JsonIgnoreProperties({ “password”, “secretKey” })
   

3. 标在字段上，将忽略此字段

   @JsonIgnore
   

4. 标在时间字段上使用指定规则格式化（默认转化成时间戳）

   @JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd")
   

5. 是否参与序列化

   JsonInclude.Include.NON_EMPTY：属性为空或者null都不参与序列化

   JsonInclude.Include.NON_NULL：属性为null不参与序列化

   @JsonInclude(参数)
   

6. 标在字段上，指定序列化后的字段名

   @JsonProperty("firstName")
   

7. 自定义某些类型字段的序列化与反序列化规则

   @JsonDeserialize(using= T extends JsonDeserializer.class)
   @JsonSerialize(using= T extends JsonSerializer.class)
   

Jquery 的 Ajax 使用

在 JQuery 中提供了对 Ajax 的封装，让我们在使用 Ajax 技术时变得更加容易。在 JQuery 中提供了很多的基于 Ajax 发送异步请求的方法，如：$.ajax()、$.get()、$.post()、$.getJSON()。

• $.ajax()在异步请求中提交数据

在$.ajax()方法中通过 data 属性来存放提交的数据，支持 JSON 格式的数据

1，提交普通格式数据

在 data 属性中我们可以通过两种方式来指定需要提交的数据。一种是通过 name=value&name=value 的结构。另一种是通过 JavaScript 对象来指定提交数据。无论使用哪种方式在Servlet中都是通过request.getParameter方法根据name获取value的。

通过 JavaScript 对象指定提交数据

data:{userid:100,username:"zhangsan"
}

2，提交 JSON 格式数据

在$.ajax()中提交 JSON 格式的数据需要使用 post 方式提交，通过 JSON.stringify()函数将 JavaScript 对象转换成 JSON 格式的字符串。在 Servlet 中通过字符输入获取提交的 JSON 格式的数据。

data:JSON.stringify({name:value,name:value......})

在 Servlet 中通过 req.getReader().readLine()来获取提交的数据。

• $.ajax()处理响应中的 JSON 格式数据

$.ajax()方法会根据 dataType 属性中的值自动对响应的数据做类型处理。如果响应的是 一个 JSON 格式的数据，那么 dataType 的值为“JSON”,在回调函数中我们得到的直接就是 JSON 字符串转换完的 JavaScript 对象。不需要在使用 JSON.parse()做格式的转换处理。

• $.get()的使用

$.get()方法是$.ajax()方法基于 get 方式发送异步请求的简化版。

语法

$.get(url,function(result))

$.get(url,"name=value&name=value",function(result))

$.get(url,data,function(result))

$.get(url,{userid:1,username:"zhangsan",...},function(result))

• $.post()的使用

$.post()方法是$.ajax()方法基于 post 方式发送异步请求的简化版。

语法

$.post(url,function(result))

$.post(url,"name=value&name=value",function(result))

$.post(url,data,function(result))

$.post(url,{userid:1,username:"zhangsan",...},function(result))

• $.getJSON()的使用

$.getJSON()方法是$.ajax()方法基于get方式发送异步请求，并将响应结果中JSON格式 的字符串对象自动转换为 JavaScript 对象。在使用该方法时要求返回的数据必须是 JSON 格 式类型。$.getJSON()方法和 resp.setContentType("application/json")是一起使用的。

语法

$.getJSON(url,function(result))

$.getJSON(url,"name=value&name=value",function(result))

$.getJSON(url,data,function(result))

$.getJSON(url,{userid:1,username:"zhangsan",...},function(result))

serialize()方法的使用

将form 表单中的数据自动拼接成 name=value&name=value 结构。

语法

var param = $("form").serialize();

param 的值为：name=value&name=value