Ajax篇
Ajax即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式,快速动态应用网页开发技术,无序重新加载整个网页的情况下,能够更新页面局部数据的技术,通过在后台与服务器进行少量数据交换,Ajax可以使页面实现异步更新。这意味着可以在不重新加载整个页面的情况下,对页面的某部分数据进行更新
Ajax使用
- Ajax的运行原理
-
XMLHttpResquest对象
XMLHttpRequest是浏览器接口对象,该对象的API可被JavaScript、VBScript以及其他web浏览器内嵌的脚本语言调用,通过HTTP协议在浏览器和web服务器之间收发XML或者其他数据。XMLHttpRequest可以与服务器实现异步交互,而无需让整个页面刷新,因此成为Ajax编程的核心对象
-
Ajax的使用步骤
创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
给定请求方式以及请求地址
xhr.open("get","http://www.baidu.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对象起重要的作用
- 用户从UI发送数据,JavaScript中调用XMLHttpRequest对象
- HTTP请求由XMLHttpRequest对象发送到服务器端
- 服务器使用JSP、PHP、Servlet、ASP.net等与数据交互。
- 检索数据
- 服务器将XML数据或者JSON数据发送到XMLHttpRequest回调函数
- HTML和CSS数据显示在浏览器上
方法 | 描述 |
---|---|
open(method,url,async) | 规定请求的类型、URL以及是否异步化处理请求。method:请求的类型;get或者postTurl:文件在服务器上的位置async:true(异步)或者false(同步)、 |
send(string) | 将请求发送到服务器,string:仅用于post请求 |
get/post请求
get和post请求是http协议中的两种请求方式
- get请求一般用来获取请求数据,post请求一般作为发送数据到后台,传递数据,创建数据;
- get请求也可以传参到后台,但是传递的参数显示在地址栏中,安全性较低,且参数的长度也有限制 ,post请求则是将传递的参数requeat body中,不会在地址栏显示,安全性比get要高,参数没有长度限制;
- get请求刷新浏览器或者回退没有影响,post请求则会再请求一遍;
- get请求可以被缓存,也会被保留在浏览器的历史记录中,post不会被缓存也不会保留在浏览器的历史记录中
- get请求通常是通过url地址请求,post常见的则是form表单请求
get请求示例
xhr.open("GET",
"http://localhost:8080/get.txt?t=" +
Math.random(), true);
xhr.open("GET",
"http://localhost:8080/get.txt?
fname=zhang&lname=san", true);
post请求示例
xhr.open("POST",
"http://localhost:8080/post.txt", true);
xhr.setRequestHeader("Contenttype","application/x-www-form-urlencoded");
xhr.send("fname=zhang&lname=san");
同步或者异步
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 = flase
不推荐使用async=flase,但是对一些小型的要求,是可以使用的,JavaScript会等到我服务器响应就绪后才继续执行,如果服务器频繁或者缓慢,应用程序会挂起或者停止
xmlhttp.open("GET","get.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
Ajax服务器响应
状态码,如200、304、 404
响应主体
xhr.responseText与xhr.responseXML都表示响应主体
如果需要获得来自服务器的响应,要使用XMLHttpRequest对象的resqonesText或者responseXML属性
属性 | 描述 |
---|---|
responseText | 获得字符串形式的响应数据 |
resonseXML | 获得XML形式的相应数据 |
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详解
JSON(JavaScript Object Notation)是一种基于字符串的轻量级,数据交换格式,易阅读和编写,同时也便于及其的解析和生成。JSON是JavaScript类型的子集
在JSON未出现之前Ajax中数据传输的方式,会使用XML作为主要的数据来传输,直到JSON出现后逐渐放弃使用XML作为数据传输格式。JSON比XML更小,更快,更容易解析
JSON是按照特定的语法规则所产生的的字符串结构
大括号表示JSON的字符串对象。{}
属性和属性值用冒号分隔。{“属性”:“value”}
属性和属性值之间用冒号分割。{“属性”:“value”,“属性”:“value”,…}
中括号表示数组。[{“属性”:“value”…},{“属性”:“value”…}]
JSON字符串对象:
{"userid":1,"username":"admin","sex":"male"}
数组
[{"userid":1,"username":"admin"},
{"userid":2,"username":"zhangsan"}]
JSON的数组类型
string:字符串,必须要用双引号引起来。
number:数值,与JavaScript的number一致
object:JavaScript的对象形式,{key:value}表示方式,可嵌套
array:数组,JavaScript的Array表示方式[value],可嵌套。
true/false:布尔类型,JavaScript的boolean类型。
null:空值,JavaScript的null。
JACKSON的使用
在JDK中并没有内置操作JSON格式数据的API,因此使用处理JSON格式的数据需要借助第三方类型。几个常见的JSON解析类库:
Gson:谷歌开发的JSON解析类库,功能十分全面。
FantJson:阿里巴巴开发的JSON库,性能十分优秀。
Jackson:社区十分活跃,且更新很快。被称为“最好的JSON解析器”
-
Jackosn简介
jackson是一种解析JSON数据API,也是最流行,速度最快JSON API,最新版本是2.13.3,有三个jar包需要下载:
jackson-core-2.13.3.jar(核心jar包)
jackson-annotations-2.13.3.jar(提供Json注解支持)
jackson-databind-2.13.3.jar(数据绑定,依赖于前两个包)
-
在项目中引入Jacson
-
序列化
使用Jacson把java对象转换成Json数据。首先创建TestBean.java
public class TestBean { //id private 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("itbaizhan"); ObjectMapper objectMapper = new ObjectMapper(); String elementStr =objectMapper.writeValueAsString(element); System.out.println(elementStr);
输出结果如下
{"age":23,"elName":"itbaizhan"}
-
反序列化
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)])
-
常用注解
将这个注解加载到类上,不存在字段被忽略
@JsonIgnoreProperties(ignoreUnknown = true)
指定忽略字段
@JsonIgnoreProperties({ “password”,“secretKey” })
标在注解上,将忽略此字段
@JsonIgnore
标在时间字段上使用指定规则格式化(默认转化成时间戳)
@JsonFormat(timezone = "GMT+8", pattern = "yyyy-MM-dd")
是否参与序列化
@JsonInclude(参数)
JsonInclude.Include.NON_EMPTY:属性为空或者null都不参与
序列化 JsonInclude.Include.NON_NULL:属性为null不参与序
列化
标在字段上,指定序列化后的字段名
@JsonProperty("firstName")
自定义某些类型字段的序列化与反序列化规则
@JsonDeserialize(using= T extendsJsonDeserializer.class) @JsonSerialize(using= T extendsJsonSerializer.class)
jQuery的 Ajaxde使用
在jQuery中提供了Ajax的封装,在使用Ajax技术时变得更加容易,在jQuery中提供了很多基于Ajax发送异步请求的方法,如: . a j a x ( ) 、 .ajax()、 .ajax()、.(get)、 . p o s t ( ) 、 .post()、 .post()、.getJSON()
-
$.ajax()在异步请求中提交数据
在$.ajax()方法中通过data属性来存放提交的数据,支持JSON格式的数据
提交的普通格式数据在data属性中我们可以通过两种方式来指定需要提交的数据,一种是通过name = value&name = value的结构,另一种是通过JavaScript对象来指定提交数据,无论使用那种方式在Servlet中都是通过request.getParameter方法根据name获取value的
通过JavaScript对象指定提交数据
data:{ userid:100, username:"zhangsan" }
提交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()的使用
. g e t ( ) 方法是 .get()方法是 .get()方法是.ajax()方法基于get方式发送异步请求的简化版。
$.get(url,"name=value&name=value",function(result))
$.get(url,data,function(result))
$.get(url,{userid:1,username:"zhangsan",...},function(result))
-
$.post()的使用
. p o s t ( ) 方法是 .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()的使用
. g e t J S O N ( ) 方法是 .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