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>