AJAX浅析数据交换的实现

基于JSON的数据交换

前端

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

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格式的字符串

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的数据交换

前端

<!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中的

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

需要换成

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

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

乱码问题

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

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

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

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

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

request.setCharacterEncoding("UTF-8");
作者:少不入川。原文地址:https://blog.csdn.net/qq_52002412/article/details/126342795

%s 个评论

要回复文章请先登录注册