AJAX浅析数据交换的实现

08-22 211阅读 0评论

基于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");

到此这篇关于AJAX浅析数据交换的实现的文章就介绍到这了,更多相关AJAX数据交换内容请搜索云初冀北以前的文章或继续浏览下面的相关文章希望大家以后多多支持云初冀北!

免责声明
本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:Goliszhou@gmail.com
$

发表评论

表情:
评论列表 (暂无评论,211人围观)

还没有评论,来说两句吧...