AJAX浅析数据交换的实现

最新推荐文章于 2024-08-14 19:24:14 发布

jh035512

最新推荐文章于 2024-08-14 19:24:14 发布

阅读量103

点赞数

文章标签： ajax

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/jh035512/article/details/127837558

版权

基于JSON的数据交换

前端

前端接收到来自后端的JSON格式的字符串以后，需要将字符串转换为JSON对象：

1

2

3

4

5

var jsonStr = "{\"username\" : \"zhangsan\", \"password\" : \"1233344\"}"

// 第一种方法

var jsonObj = JSON.parse(jsonStr)

// 第二种方法

var jsonObj = eval('(' + jsonStr + ')')

第二种方法中加括号的原因是：

加圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。

后端

后端需要将需要传给前端的数据拼接成JSON格式的字符串。一个一个拼接太麻烦，我们选择使用阿里巴巴的fastjson组件，它可以将java对象转换成json格式的字符串

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

List<Student> studentList = new ArrayList<>();

while (rs.next()) {

// 取出数据

String name = rs.getString("name");

int age = rs.getInt("age");

String addr = rs.getString("addr");

// 将以上数据封装成Student对象

Student s = new Student(name, age, addr);

// 将Student对象放到List集合

studentList.add(s);

}

// 将List集合转换成json字符串

jsonStr = JSON.toJSONString(studentList);

// 响应JSON格式的字符串给前端。

out.print(jsonStr);

基于XML的数据交换

前端

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>使用XML完成数据交换</title>

</head>

<body>

<script type="text/javascript">

window.onload = function(){

document.getElementById("btn").onclick = function(){

// 1.创建XMLHTTPRequest对象

var xhr = new XMLHttpRequest();

// 2.注册回调函数

xhr.onreadystatechange = function () {

if (this.readyState == 4) {

if (this.status == 200) {

// 使用XMLHTTPRequest对象的responseXML属性，接收返回之后，可以自动封装成document对象（文档对象）

var xmlDoc = this.responseXML

//console.log(xmlDoc)

// 获取所有的<student>元素，返回了多个对象，应该是数组。

var students = xmlDoc.getElementsByTagName("student")

//console.log(students[0].nodeName)

var html = "";

for (var i = 0; i < students.length; i++) {

var student = students[i]

// 获取<student>元素下的所有子元素

html += "<tr>"

html += "<td>"+(i+1)+"</td>"

var nameOrAge = student.childNodes

for (var j = 0; j < nameOrAge.length; j++) {

var node = nameOrAge[j]

if (node.nodeName == "name") {

//console.log("name = " + node.textContent)

html += "<td>"+node.textContent+"</td>"

}

if (node.nodeName == "age") {

//console.log("age = " + node.textContent)

html += "<td>"+node.textContent+"</td>"

}

}

html += "</tr>"

}

document.getElementById("stutbody").innerHTML = html

}else{

alert(this.status)

}

}

}

// 3.开启通道

xhr.open("GET", "/ajax/ajaxrequest6?t=" + new Date().getTime(), true)

// 4.发送请求

xhr.send()

}

}

</script>

<button id="btn">显示学生列表</button>

<table width="500px" border="1px">

<thead>

<tr>

<th>序号</th>

<th>姓名</th>

<th>年龄</th>

</tr>

</thead>

<tbody id="stutbody">

<!--<tr>

<td>1</td>

<td>zhangsan</td>

<td>20</td>

</tr>

<tr>

<td>2</td>

<td>lisi</td>

<td>22</td>

</tr>-->

</tbody>

</table>

</body>

</html>

这里要注意，我们接受XML数据的方式不再是调用XMLHttpRequest对象的responseText属性，而是调用responseXML属性。

然后再通过getElementsByTagName方法获得标签进行遍历拼接。

后端

如果服务器响应的是XML数据的话，那么Servlet中的

1	`response.setContentType("text/html;charset=UTF-8");`

需要换成

1	`response.setContentType("text/xml;charset=UTF-8");`

至于XML数据字符串串的拼接这里不赘述了。

乱码问题

对于tomcat10来说，关于字符集，我们程序员不需要干涉，不会出现乱码。

对于tomcat9及以下版本来说呢？

响应中文的时候，会出现乱码，怎么解决？

1	`response.setContentType("text/html;charset=UTF-8");`

发送ajax post请求的时候，发送给服务器的数据，服务器接收之后乱码，怎么解决？

1	`request.setCharacterEncoding("UTF-8");`

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
AJAX浅析数据交换的实现

加圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。后端需要将需要传给前端的数据拼接成JSON格式的字符串。发送ajax post请求的时候，发送给服务器的数据，服务器接收之后乱码，怎么解决？响应中文的时候，会出现乱码，怎么解决？
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

jh035512 你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。