前言
- 相信学过一段AJAX发送异步请求的同学，一定会非常对数据交换感到痛苦，放心，W3C为我们制定了两种常用的数据交换格式
- JSON
- XML
- AJAX乱码问题，我在这篇文章中也探索了一下
JSON简介
百度百科介绍：
JSON（JavaScript Object Notation, JS对象简谱）是一种轻量级的数据交换格式。它基于 ECMAScript（European Computer Manufacturers Association, 欧洲计算机协会制定的js规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
JSON基于两种结构
- “名称/值”对的集合（A collection of name/value pairs）。不同的编程语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表（hash table），有键列表（keyed list），或者关联数组 （associative array）。
- 值的有序列表（An ordered list of values）。在大部分语言中，它被实现为数组（array），矢量（vector），列表（list），序列（sequence）。
这些都是常见的数据结构。目前，绝大部分编程语言都以某种形式支持它们。这使得在各种编程语言之间交换同样格式的数据成为可能。
JSON具有以下这些形式：
对象（*object*） 是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。
数组（*array*） 是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。
值（*value*） 可以是双引号括起来的字符串（string）、数值(number)、true、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。
字符串（*string*） 是由双引号包围的任意数量Unicode字符的集合，使用反斜线转义。一个字符（character）即一个单独的字符串（character string）。
JSON的字符串（string）与C或者Java的字符串非常相似。
数值（*number*） 也与C或者Java的数值非常相似。只是JSON的数值没有使用八进制与十六进制格式。
同时，可以在任意标记之间添加空白
XML简介
百度百科介绍
可扩展标记语言 (Extensible Markup Language, XML) ，标准通用标记语言的子集，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。 XML是标准通用标记语言 可扩展性良好,内容与形式分离,遵循严格的语法要求,保值性良好等优点, [1] [7] 。
在电子计算机中，标记指计算机所能理解的信息符号，通过此种标记，计算机之间可以处理包含各种的信息比如文章等。它可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。 它非常适合万维网传输，提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。是Internet环境中跨平台的、依赖于内容的技术，也是当今处理分布式结构信息的有效工具。早在1998年，W3C就发布了XML1.0规范，使用它来简化Internet的文档信息传输。
XML文档格式
标签)文本内容＜／标签＞
元素是由起始标签、元素内容和结束标签组成的。用户把要描述的数据对象放在起始标签和结束标签之间。例如：＜姓名＞王平＜／姓名＞。无论文本内容有多长或者多么复杂，XML元素中可以再嵌套别的元素，这样使相关信息构成等级结构。用这样韵方法定义XML文档数据和数据结构。
除了元素，XML文档中出现的有效对象是：声明、注释、根元素、子元素和属性。
1.声明：声明给XML解析器提供信息，使其能够正确解释文档内容，它的起始标识是“＜?”，结束标识是“?＞”。例如XML声明：＜?xml version="1．0" encoding="GB2312"?＞，该声明指明使用的XML版本号和文档使用的字符集是中文字符集“GB2312”。又如显示样式表文件声明：＜?xml-stylesheet type="text／xsl" href="e12_2_1．xsl"?＞，指明按e12_2_1．xsl样式表文件指定格式显示本XML文档。
2.注释：注释是XML文件中用作解释的字符数据，XML处理器不对它们进行任何处理。注释文本被“＜!”和“＞”标记，注释可以出现在XML元素问的任何地方，但是不可以嵌套。下边是一个注释的例子：＜!这是一个注释＞。
3.根元素和子元素：如果一个元素从文件头的序言部分之后开始，一直到文件尾，包含了文件中所有的数据信息，我们称之为根元素。XML元素是可以嵌套的，那么被嵌套在内的元素称为子元素。在前面的例子中，＜学生＞就是根元素，＜编号＞就是＜学生＞的子元素。一个XML文档中有且仅有一个根元素，其他所有的元素都是它的子元素。
4.属性：属性给元素提供进一步的说明信息，它必须出现在起始标签中。属性以名称／值成对出现，属性名不能重复，名称与取值之间用等号分隔，取值用引号括起来。例如：＜工资 currency="US$"＞25000＜／工资＞，其属性说明了薪水的货币单位是美元。
5.XML文档的基本结构：XML文档的基本结构由序言部分和一个根元素组成。序言包括了XML声明和DTD或XSD声明，DTD(Document Type Define，文档类型定义)和XSD(XML Schema，XML架构)都是用来描述XML文档的数据结构的。
6.格式良好的(Well-Formed)XML文档：一个XML文档首先应当是格式良好的，格式良好XML文档的正式定义位于：http：／／www．w3．org／TR／REC-xml。格式良好的XML文档除了要满足根元素唯一的特性之外，还包括：
①起始标签和结束标签应当匹配，结束标签是必不可少的；
②大小写应一致，XML对字母的大小写是敏感的，＜employee＞和＜Employee＞是完全不同的两个标签，所以结束标签在匹配时一定要注意大小写一致；
③元素应当正确嵌套，子元素应当完全包括在父辈元素中，下面例子就是错误嵌套：＜A＞＜B＞＜／A＞＜／B＞，正确的嵌套方式为＜A＞＜B＞＜／B＞＜／A＞；
④属性值必须包括在引号中，元素中的属性名是不允许重复的。
基于JSON的数据交换
-
在WEB前端中，如何将一个json格式的字符串转换成json对象
var jsonStr = "{\"username\" : \"zhangsan\", \"password\" : \"1233344\"}" var jsonObj = JSON.parse(jsonStr) console.log(jsonObj.username) console.log(jsonObj.password) -
在后端拼接JSON格式的字符串，响应给前端的浏览器
json.append("["); while (rs.next()) { // 获取每个学生的信息 String name = rs.getString("name"); String age = rs.getString("age"); String addr = rs.getString("addr"); // 拼接json格式的字符串 // {"name":" 王五 ","age": 20 ,"addr":" 北京大兴区 "}, json.append("{\"name\":\""); json.append(name); json.append("\",\"age\":"); json.append(age); json.append(",\"addr\":\""); json.append(addr); json.append("\"},"); } jsonStr = json.substring(0, json.length() - 1) + "]";
FastJson
fastjson是阿里巴巴的公司内技术大牛开发出来的，之后被捐献给apache软件基金会，可以在apache官网上下载
拼接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);
注意：使用fastjson需要引入fastjson-xxx.jar
基于XML的数据交换
注意：如果服务器端响应XML的话，响应的内容类型需要写成：
-
尤其注意：
text后面是xmlresponse.setContentType("text/xml;charset=UTF-8"); -
xml和JSON都是常用的数据交换格式
- XML体积大，解析麻烦。较少用。
- JSON体积小，解析简单，较常用。
-
基于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) { // 服务器端响应了一个XML字符串，这里怎么接收呢？ // 使用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的数据交换，后端java程序：
@WebServlet("/ajaxrequest6") public class AjaxRequest6Servlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 注意：响应的内容类型是XML。 response.setContentType("text/xml;charset=UTF-8"); PrintWriter out = response.getWriter(); StringBuilder xml = new StringBuilder(); xml.append("<students>"); xml.append("<student>"); xml.append("<name>zhangsan</name>"); xml.append("<age>20</age>"); xml.append("</student>"); xml.append("<student>"); xml.append("<name>lisi</name>"); xml.append("<age>22</age>"); xml.append("</student>"); xml.append("</students>"); out.print(xml); } }
AJAX乱码问题
-
测试内容：
- 发送ajax get请求
- 发送数据到服务器，服务器获取的数据是否乱码？
- 服务器响应给前端的中文，会不会乱码？
- 发送ajax post请求
- 发送数据到服务器，服务器获取的数据是否乱码？
- 服务器响应给前端的中文，会不会乱码？
- 发送ajax get请求
-
包括还要测试tomcat服务器的版本：
- tomcat10和tomcat9都要进行测试。
-
测试结果：
对于tomcat10来说，关于字符集，我们程序员不需要干涉，不会出现乱码。
-
对于tomcat9来说呢？
-
响应中文的时候，会出现乱码，怎么解决？
response.setContentType("text/html;charset=UTF-8"); -
发送ajax post请求的时候，发送给服务器的数据，服务器接收之后乱码，怎么解决？
request.setCharacterEncoding("UTF-8");
-
