AJAX浅析数据交换的实现
目录
- 基于JSON的数据交换
- 前端
- 后端
- 基于XML的数据交换
- 前端
- 后端
- 乱码问题
基于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数据交换内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
AJAX SpringBoot 前后端数据交互的项目实现
目录 1.Ajax概述 2.基于JQuery的AJAX语法 1. Ajax 概述 Ajax 的英文全称是 ”Asynchronous JavaScript and XML“,即 ”异步的 JavaScript 和 XML“.其核心是通过 JavaScript 的 XMLHttpRequest 对象,以一种异步的方式,向服务器发送数据请求,并且通过该对象接收请求返回的数据,从而实现客户端与服务器端的数据交互. 优点:Ajax 能够刷新指定的页面区域(局部刷新),而不是刷新整个页面,从而减少客户端和
-
Ajax与mysql数据交互实现留言板功能
最近自己做了一个小demo,实现了Ajax与MySQL的数据交互,js部分用的是jq,后台用的是PHP,数据库是mysql,过时间再来一个node+MongoDB版的. 关于mysql的使用和安装,就不多讲了,自行百度xampp,Apache服务器和mysql数据库集成,非常好用 首先打开服务器和数据库,我这里先建立了一个"eleven"的数据库,下面建立了一个叫做microblog的表(请注意:我这里使用的是高版本的mysql,里面php链接数据库的方法使用的都是mysqli_ 如
-
Ajax与mysql数据交互制作留言板功能（全）
最近自己做了一个小demo,实现了Ajax与MySQL的数据交互,js部分用的是jq,后台用的是php,数据库是mysql,过时间再来一个node+mongodb版的. 关于mysql的使用和安装,就不多讲了,自行百度xampp,Apache服务器和mysql数据库集成,非常好用. 首先打开服务器和数据库,我这里先建立了一个"eleven"的数据库,下面建立了一个叫做microblog的表(请注意:我这里使用的是高版本的mysql,里面php链接数据库的方法使用的都是mysqli_
-
Ajax+php数据交互并且局部刷新页面的实现详解
什么是Ajax? 国内翻译常为"阿贾克斯"和阿贾克斯足球队同音,AJAX 是一种用于创建快速动态网页的技术,他不是新语言,而是一种使用现有标准的新方法.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,这样就可以在不重新加载整个网页的情况下,对网页的某部分进行更新. XMLHttpRequest 是 AJAX 的基础,用于和服务器交换数据.所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject) 下面这篇文章主
-
Ajax+PHP简单数据交互
PHP是一种创建动态交互性站点的服务器端脚本语言,优势:PHP脚本语言应用广泛,开源免费,最重要的是入门简单,容易掌握. PHP能够生成动态页面内容 PHP能够创建.打开.读取.写入.删除以及关闭服务器上的文件 PHP能够接收表单数据 PHP能够发送并取回cookies PHP能够添加.删除.修改数据库中的数据 PHP能够限制用户访问网站中的某些页面 能够运行于各种平台,几乎兼容所有WEB服务器,支持多种数据库 1.我们想要运行PHP,首先要有个web服务器,一般可以在本地部署一个服务器用来测试
-
AJAX浅析数据交换的实现
目录 基于JSON的数据交换 前端 后端 基于XML的数据交换 前端 后端 乱码问题 基于JSON的数据交换 前端 前端接收到来自后端的JSON格式的字符串以后,需要将字符串转换为JSON对象: var jsonStr = "{\"username\" : \"zhangsan\", \"password\" : \"1233344\"}" // 第一种方法 var jsonObj = JSON.parse
-
AJAX实现JSON与XML数据交换方法详解
目录 1.JS中如何创建和访问JSON对象 2.基于JSON的数据交换 3.基于XML的数据交换 1.JS中如何创建和访问JSON对象 (1)在javascript语言中怎么创建一个json对象,语法是什么? "属性名" : 属性值,"属性名" : 属性值.........的格式! 注意:属性值的数据类型随意:可能是数字,可能是布尔类型,可能是字符串,可能是数组,也可能是一个json对象..... <!DOCTYPE html> <html lan
-
Ajax中数据传递的另一种模式 javascript Object Notation思想（JSON）
Ajax是"异步javascript和XML"的缩写已经众所周知,然而虽然XML是看上去的重要组成部分,它却不是必须的.一位资深的软件工程师Douglas Crock ford 开发了一个内建于 javascript 的数据格式,称为javascript 对象表示(JSON,javascript Object Notation),意思是直接使用Ajax对象来传递信息,可以读作"Jason". 1. 什么是 JSON JSON概念很简单,JSON 是一种轻量级的数据格
-
浅谈JSON的数据交换、缓存问题和同步问题
JSON轻量级的数据交换格式 相对于XML来说,JSON的解析速度更快,文档更小. JSON的格式 {属性名:属性值,属性名:属性值,--} 属性名的类型可以是string,number,boolean,null,object,且属性名必须用双引号引起来,如果属性值是字符串,也必须用双引号括起来. JSON表示数组 格式:[value,value,value],其中value可以是基本的数据类型,也可以是object类型.数组类型 数组类型 [ {"name":"yangjq
-
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
本文实例讲述了PHP结合Redis+MySQL实现冷热数据交换应用案例.分享给大家供大家参考,具体如下: 场景:某网站需要对其项目做一个投票系统,投票项目上线后一小时之内预计有100万用户进行投票,希望用户投票完就能看到实时的投票情况 这个场景可以使用redis+mysql冷热数据交换来解决. 何为冷热数据交换? 冷数据:之前使用的数据,热数据:当前使用的数据. 交换:将Redis中的数据周期的存储到MySQL中 业务流程 用户进行投票后,首先将投票数据保存到Redis中,这些数据就是热数据,然
-
AJAX请求数据及实现跨域的三种方法详解
目录 传统方法的缺点: 什么是ajax? XMLHttpRequest 对象 五步使用法: 同步和异步的区别: 如何将原生ajax进行封装 JS几种跨域方法和原理 附:ajax跨域post请求的java代理实现 总结 传统方法的缺点: 传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互.只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户
-
Django中使用jquery的ajax进行数据交互的实例代码
jquery框架中提供了$.ajax.$.get.$.post方法,用于进行异步交互,由于Django中默认使用CSRF约束,推荐使用$.get 示例:实现省市区的选择 最终实现效果如图: 将jquery文件拷贝到static/js/目录下 打开booktest/views.py文件,定义视图area1,用于显示下拉列表 #提供显示下拉列表的控件,供用户操作 def area1(request): return render(request,'booktest/area1.html') 打开bo
-
Ajax返回数据之前的loading等待效果
首先,我们通过ajax请求,向后台传递参数,然后后台经过一系列的运算之后向前台返还数据,我希望在等待数据成功返还之前可以展示一个loading.gif图 不废话,在页面上执行点击事件(<a sceneid="@scene.ID" href="javascript:void(0)" rel="external nofollow" onclick="build(this)">生成</a>) 调用下面方法:
-
django中使用jquery ajax post数据出现403错误的解决办法(两种方法)
在django中,使用jquery ajax post数据,会出现403的错误 方法一: 如果用jQuery来处理ajax的话,Django直接送了一段解决问题的代码.把它放在一个独立的js文件中,在html页面中都引入即可.注意这个js文件必须在jquery的js文件引入之后,再引入即可 $(document).ajaxSend(function(event, xhr, settings) { function getCookie(name) { var cookieValue = null;