ajax的概念：
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
ajax运行原理：
页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到 服务器端，在这段时间里，客户端可以任意进行任意操作，直到服务器端将数据返回 给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。
主要分为js原生的ajax 技术：
js原生的Ajax其实就是围绕浏览器内内置的Ajax引擎对象进行学习的，要使用js原生的Ajax完成异步操作，有如下几个步骤：
1）创建Ajax引擎对象
2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
3）绑定提交地址
4）发送请求
5）接受响应数据
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6
7 <script type="text/javascript">
8
9 function fn1(){
10 //get方法
11 //1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
12 var xmlHttp = new XMLHttpRequest();
13 //2、绑定监听 ---- 监听服务器是否已经返回相应数据
14 xmlHttp.onreadystatechange = function(){
15 if(xmlHttp.readyState==4&&xmlHttp.status==200){
16 //5、接受相应数据
17 var res = xmlHttp.responseText;
18 document.getElementById("span1").innerHTML = res;
19 }
20 }
21 //3、绑定地址
22 xmlHttp.open("GET","ajaxServlet?name=lisi",true);
23 //4、发送请求
24 xmlHttp.send();
25
26 }
27 function fn2(){
28 //post 方法
29 //1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象
30 var xmlHttp = new XMLHttpRequest();
31 //2、绑定监听 ---- 监听服务器是否已经返回相应数据
32 xmlHttp.onreadystatechange = function(){
33 if(xmlHttp.readyState==4&&xmlHttp.status==200){
34 //5、接受相应数据
35 var res = xmlHttp.responseText;
36 document.getElementById("span2").innerHTML = res;
37 }
38 }
39 //3、绑定地址
40 xmlHttp.open("POST","ajaxServlet",false);
41 //4、发送请求 post方法传递参数 必须调用下面的代码才能传递成功
42 xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
43 xmlHttp.send("name=wangwu");
44
45 }
46
47
48 </script>
49
50 </head>
51 <body>
52 <input type="button" value="异步访问服务器端" onclick="fn1()"><span id="span1"></span>
53 <br>
54 <input type="button" value="同步访问服务器端" onclick="fn2()"><span id="span2"></span>
55 <br>
56 <input type="button" value="测试按钮" onclick="alert()">
57 </body>
58 </html>
1 package com;
2
3 import java.io.IOException;
4 import javax.servlet.ServletException;
5 import javax.servlet.annotation.WebServlet;
6 import javax.servlet.http.HttpServlet;
7 import javax.servlet.http.HttpServletRequest;
8 import javax.servlet.http.HttpServletResponse;
9
10 /**
11 * Servlet implementation class AjaxServlet
12 */
13 @WebServlet("/ajaxServlet")
14 public class AjaxServlet extends HttpServlet {
15 private static final long serialVersionUID = 1L;
16
17 /**
18 * @see HttpServlet#HttpServlet()
19 */
20 public AjaxServlet() {
21 super();
22 // TODO Auto-generated constructor stub
23 }
24
25 /**
26 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
27 */
28 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
29 // TODO Auto-generated method stub
30
31 //response.getWriter().write("zhangsan");
32
33 try {
34 //睡眠5秒 可以看出异步与同步的区别
35 Thread.sleep(5000);
36 } catch (InterruptedException e) {
37 e.printStackTrace();
38 }
39
40 String parameter = request.getParameter("name");
41
42 response.getWriter().write(Math.random()+parameter);
43
44 }
45
46 /**
47 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
48 */
49 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
50 // TODO Auto-generated method stub
51 doGet(request, response);
52 }
53
54 }
Jquery 的Ajax 技术:
jquery 是一个js框架，自然对js原生的ajax 进行了封装，封装后的ajax 操作方法更简洁，功能更强大，
常用的有三种方式：
1.$.get(url,[data],[callback],[type])
2$.post(url,[data],[callback],[type])
其中：
url：代表请求的服务器端地址
data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）
callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）
type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）
常用的返回类型：text、json、html等
3. $.ajax({option1:value,opiton2:value2...})
常用的option有如下：
async：是否异步，默认是true代表异步
data：发送到服务器的参数，建议使用json格式
dataType：服务器端返回的数据类型，常用text和json
success：成功响应执行的函数，对应的类型是function类型
type：请求方式，POST/GET
url：请求服务器端地址
示例代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>Insert title here</title>
6 <script type="text/javascript" src="js/jquery.min.js"></script>
7 <script type="text/javascript">
8
9
10 function fn1(){
11 //get异步访问
12 $.get(
13 "ajaxServlet01", //url地址
14 {"name":"张三","age":25}, //请求参数
15 function(data){ //执行成功后的回调函数
16 //{\"name\":\"tom\",\"age\":21}
17 alert(data.name);
18 },
19 "json"
20 );
21 }
22 function fn2(){
23 //post异步访问
24 $.post(
25 "ajaxServlet01", //url地址
26 {"name":"李四","age":25}, //请求参数
27 function(data){ //执行成功后的回调函数
28 alert(data.name);
29 },
30 "json"
31 );
32 }
33
34
35 function fn3(){
36 $.ajax({
37 //url 地址
38 url:"ajaxServlet01",
39 //是否异步 默认为异步
40 async:true,
41 //请求方式，POST/GET
42 type:"POST",
43 //发送到服务器的参数，建议使用json格式
44 data:{"name":"lucy","age":18},
45 //成功响应执行的函数，对应的类型是function类型
46 success:function(data){
47 alert(data.name);
48 },
49 //错误响应执行的函数，对应的类型是function类型
50 error:function(){
51 alert("请求失败");
52 },
53 //服务器端返回的数据类型，常用text和json
54 dataType:"json"
55 });
56 }
57 </script>
58
59 </head>
60 <body>
61 <input type="button" value="get访问服务器端" onclick="fn1()"><span id="span1"></span>
62 <br>
63 <input type="button" value="post访问服务器端" onclick="fn2()"><span id="span2"></span>
64 <br>
65 <input type="button" value="ajax访问服务器端" onclick="fn3()"><span id="span2"></span>
66 <br>
67 </body>
68 </html>
1 package com;
2
3 import java.io.IOException;
4 import javax.servlet.ServletException;
5 import javax.servlet.annotation.WebServlet;
6 import javax.servlet.http.HttpServlet;
7 import javax.servlet.http.HttpServletRequest;
8 import javax.servlet.http.HttpServletResponse;
9
10 /**
11 * Servlet implementation class AjaxServlet01
12 */
13 @WebServlet("/ajaxServlet01")
14 public class AjaxServlet01 extends HttpServlet {
15 private static final long serialVersionUID = 1L;
16
17 /**
18 * @see HttpServlet#HttpServlet()
19 */
20 public AjaxServlet01() {
21 super();
22 // TODO Auto-generated constructor stub
23 }
24
25 /**
26 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
27 */
28 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
29 // TODO Auto-generated method stub
30 request.setCharacterEncoding("UTF-8");
31
32 String name = request.getParameter("name");
33 String age = request.getParameter("age");
34
35 System.out.println(name+" "+age);
36
37
38 //java代码只能返回一个json格式的字符串 编码格式 避免乱码
39 response.setContentType("text/html;charset=UTF-8");
40 //传递json的方式要特别记录一下 要添加下划线
41 //传递成功返回的json 类型数据
42 response.getWriter().write("{\"name\":\"汤姆\",\"age\":21}");
43
44 }
45
46 /**
47 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
48 */
49 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
50 // TODO Auto-generated method stub
51 doGet(request, response);
52 }
53
54 }
json 格式：
1.对象格式： {"key":obj,"key2":obj,....}
2.数组格式：[obj,obj,obj....]
1 1.
2 <script language="JavaScript">
3 /**
4 * 案例一
5 * {key:value,key:value}
6 *
7 * class Person{
8 * String firstname = "张";
9 * String lastname = "三丰";
10 * Integer age = 100;
11 * }
12 *
13 * Person p = new Person();
14 * System.out.println(p.firstname);
15 */
16
17 var person = {"firstname":"张","lastname":"三丰","age":100};
18
19 //取出lastname
20 alert(person.lastname);
21 //取出age
22 alert(person.age);
23
24
25
26 </script>
27
28
29
30 2.
31
32 <script language="JavaScript">
33 /**
34 * 案例二
35 * [{key:value,key:value},{key:value,key:value}]
36 *
37 */
38
39 var persons = [
40 {"firstname":"张","lastname":"三丰","age":100},
41 {"firstname":"李","lastname":"四","age":25}
42 ];
43
44 //取出 firstname=李
45 alert(persons[1].firstname);
46 //取100
47 alert(persons[0].age);
48
49
50 </script>
51
52 3.
53
54 <script language="JavaScript">
55 /**
56 * 案例三
57 * {
58 * "param":[{key:value,key:value},{key:value,key:value}]
59 * }
60 *
61 *
62 */
63
64 var json = {
65 "baobao":[
66 {"name":"小双","age":28,"addr":"扬州"},
67 {"name":"建宁","age":18,"addr":"紫禁城"},
68 {"name":"阿珂","age":10,"addr":"山西"},
69 ]
70 };
71
72 //娶name = 建宁
73 alert(json.baobao[1].name);
74
75 //取addr 山西
76 alert(json.baobao[2].addr);
77
78
79 </script>
80
81 4.
82
83 <script language="JavaScript">
84 /**
85 * 案例四
86 * {
87 * "param1":[{key:value,key:value},{key:value,key:value}],
88 * "param2":[{key:value,key:value},{key:value,key:value}],
89 * "param3":[{key:value,key:value},{key:value,key:value}]
90 * }
91 *
92 *
93 */
94 var json = {
95 "baobao":[
96 {"name":"小双","age":28,"addr":"扬州"},
97 {"name":"建宁","age":18,"addr":"紫禁城"},
98 {"name":"阿珂","age":10,"addr":"山西"},
99 ],
100 "haohao":[
101 {"name":"张爽","age":25,"addr":"吉林"},
102 {"name":"舒洁","age":23,"addr":"赤峰"}
103 ]
104 };
105
106 alert(json.haohao[1].name);
107
108
109 </script>
110
111
112 5.
113 <script language="JavaScript">
114 /**
115 * 案例五
116 * {
117 * "param1":"value1",
118 * "param2":{},
119 * "param3":[{key:value,key:value},{key:value,key:value}]
120 * }
121 *
122 *
123 */
124
125 var json = {
126 "key1":"value1",
127 "key2":{"firstname":"张","lastname":"三丰","age":100},
128 "key3":[
129 {"name":"小双","age":28,"addr":"扬州"},
130 {"name":"建宁","age":18,"addr":"紫禁城"},
131 {"name":"阿珂","age":10,"addr":"山西"},
132 ]
133 };
134
135 alert(json.key2.lastname);
136
137 alert(json.key3[2].name);
138
139
140 </script>
json 插件的转换
将java的对象或集合转成json形式字符串
json的转换插件是通过java的一些工具，直接将java对象或集合转换成json字符串。
常用的json转换工具有如下几种：
1）jsonlib
2）Gson：google
3）fastjson：阿里巴巴
来源：https://www.cnblogs.com/cxy0210/p/12444414.html