java web ajax json_Java Web ajax与json

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

2

3

4

5

Insert title here

6

7

8

9 functionfn1(){10 //get方法

11 //1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象

12 varxmlHttp= newXMLHttpRequest();13 //2、绑定监听 ---- 监听服务器是否已经返回相应数据

14 xmlHttp.onreadystatechange= function(){15 if(xmlHttp.readyState==4&&xmlHttp.status==200){16 //5、接受相应数据

17 varres=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 functionfn2(){28 //post 方法

29 //1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象

30 varxmlHttp= newXMLHttpRequest();31 //2、绑定监听 ---- 监听服务器是否已经返回相应数据

32 xmlHttp.onreadystatechange= function(){33 if(xmlHttp.readyState==4&&xmlHttp.status==200){34 //5、接受相应数据

35 varres=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

49

50

51

52

53

54

55

56

57

58

post 和 get 方法测试

1 packagecom;2

3 importjava.io.IOException;4 importjavax.servlet.ServletException;5 importjavax.servlet.annotation.WebServlet;6 importjavax.servlet.http.HttpServlet;7 importjavax.servlet.http.HttpServletRequest;8 importjavax.servlet.http.HttpServletResponse;9

10 /**

11 * Servlet implementation class AjaxServlet12 */

13 @WebServlet("/ajaxServlet")14 public class AjaxServlet extendsHttpServlet {15 private static final long serialVersionUID = 1L;16

17 /**

18 *@seeHttpServlet#HttpServlet()19 */

20 publicAjaxServlet() {21 super();22 //TODO Auto-generated constructor stub

23 }24

25 /**

26 *@seeHttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)27 */

28 protected void doGet(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {29 //TODO Auto-generated method stub30

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 *@seeHttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)48 */

49 protected void doPost(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {50 //TODO Auto-generated method stub

51 doGet(request, response);52 }53

54 }

ajaxServlet

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

2

3

4

5

Insert title here

6

7

8

9

10 functionfn1(){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 functionfn2(){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 functionfn3(){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

58

59

60

61

62

63

64

65

66

67

68

jquery 的ajax 方法

1 packagecom;2

3 importjava.io.IOException;4 importjavax.servlet.ServletException;5 importjavax.servlet.annotation.WebServlet;6 importjavax.servlet.http.HttpServlet;7 importjavax.servlet.http.HttpServletRequest;8 importjavax.servlet.http.HttpServletResponse;9

10 /**

11 * Servlet implementation class AjaxServlet0112 */

13 @WebServlet("/ajaxServlet01")14 public class AjaxServlet01 extendsHttpServlet {15 private static final long serialVersionUID = 1L;16

17 /**

18 *@seeHttpServlet#HttpServlet()19 */

20 publicAjaxServlet01() {21 super();22 //TODO Auto-generated constructor stub

23 }24

25 /**

26 *@seeHttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)27 */

28 protected void doGet(HttpServletRequest request, HttpServletResponse response) throwsServletException, 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 *@seeHttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)48 */

49 protected void doPost(HttpServletRequest request, HttpServletResponse response) throwsServletException, IOException {50 //TODO Auto-generated method stub

51 doGet(request, response);52 }53

54 }

ajaxServlet

json 格式：

1.对象格式： {"key":obj,"key2":obj,....}

2.数组格式：[obj,obj,obj....]

1 1.2

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

27

28

29

30 2.31

32

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

51

52 3.53

54

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

80

81 4.82

83

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

110

111

112 5.113

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

View Code

json 插件的转换

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

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

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

1)jsonlib

2)Gson：google

3)fastjson：阿里巴巴