本文详细介绍了Ajax如何处理基于JSON和XML的数据交换，包括后端数据包装及前端解析。同时，针对Ajax的乱码问题，文章探讨了Tomcat不同版本下的解决方案，并提供了设置响应头和请求编码的方法来避免乱码。
Ajax知识点总结目录
- 说明：
本篇文章总结的是Ajax对于来自服务器传递过来的JSON数据和XML两种数据格式的数据处理的方式，以及简单说明Ajax的乱码问题。
1. Ajax基于JSON的数据交换
-
基于JSON的数据交换：就是说对于服务器将往前端发送的数据包装成JSON类型，那么前端该如何从JSON类型的数据中调取自己需要的信息呢？这就是需要关注的两点
-
服务器将返回的数据包装成json类型的数据：
- 第一种方式：原始方式包装，使用拼接的方式，将数据以json的形式放到String类型的字符串中
- 第二种方式：使用阿里巴巴的fastjson组件，它可以将java对象转换成json格式的字符串（所以这里需要新建一个Java类将用户信息封装到里面然后调用JSON.toJSONString(),将Java类传进去自动转化）
-
第一种方式后端代码编写：【由于发文限制，所以将所有的密码改为pd】
@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//设置响应格式
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
StringBuilder json = new StringBuilder();
String jsonstr = "";
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
// String str = "{\"username\":\"zhngsan\", \"pd\":\"123456\"}";
try {
conn = DBUtil.getConnection();
String sql = "select * from t_user";
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
json.append("[");
while (rs.next()){
String username = rs.getString("username");
String pd = rs.getString("pd");
//{"username":" zhangsan ", "pd":" 123456 "},
json.append("{\"username\":\"");
json.append(username);
json.append("\", \"pd\":\"");
json.append(pd);
json.append("\"},");
}
jsonstr = json.substring(0,json.length()-1)+"]";
} catch (SQLException e) {
e.printStackTrace();
}finally {
DBUtil.close(conn,ps,rs);
}
out.print(jsonstr);
}
- 第二种方式后端代码编写：(由于含有多个用户所以需要建立一个List数组存储)
@Override
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
List<Student> studentList = new ArrayList<>();
try {
conn = DBUtil.getConnection();
String sql = "select * from t_user";
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
while (rs.next()) {
String username = rs.getString("username");
String password = rs.getString("password");
Student student = new Student(username,password);
studentList.add(student);
}
} catch (SQLException e) {
e.printStackTrace();
}finally {
DBUtil.close(conn,ps,rs);
}
String jsonString = JSON.toJSONString(studentList);
out.print(jsonString);
}
- 前端代码：（需要先取出json对象数组，人后遍历每一个对象，取出需要展示的属性）
window.onload = function () {
document.getElementById("btn").onclick = function (){
//1.创建核心对象
var xhr = new XMLHttpRequest();
//2.获取服务器数据
xhr.onreadystatechange = function () {
var html = ""
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var json = JSON.parse(this.responseText);
for (var i = 0; i < json.length; i++){
var stuJson = json[i];
html += "<tr><td>"
html +=stuJson.username
html +="</td><td>"
html +=stuJson.password
html +="</td></tr>"
}
document.getElementById("tbody").innerHTML = html
}else{
alert(this.status)
}
}
}
//3.打开通道
// xhr.open("GET","/ajax/request5",true);
xhr.open("GET","/ajax/request6",true);
//4.发送数据
xhr.send();
}
}
2. Ajax基于XML的数据交换
- 基于XML的数据交换格式的封装数据太大，一般都是选择使用JSON,但是偶尔也会使用，所以这种方式也需要知道。
- 同样的问题，需要解决的就是后端封装，和前端解封装的问题
- 后端实现：【在获取到数据之后，直接按照xml的数据方式进行拼接要发送到前端的数据即可】
如：
- 后端实现：【在获取到数据之后，直接按照xml的数据方式进行拼接要发送到前端的数据即可】
@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();
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
try {
conn = DBUtil.getConnection();
String sql = "select * from t_user";
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
xml.append("<students>");
while (rs.next()) {
String username = rs.getString("username");
String password = rs.getString("password");
xml.append("<student>");
xml.append("<username>");
xml.append(username);
xml.append("</username>");
xml.append("<password>");
xml.append(password);
xml.append("</password>");
xml.append("</student>");
}
xml.append("</students>");
} catch (SQLException e) {
e.printStackTrace();
}finally {
DBUtil.close(conn,ps,rs);
}
out.print(xml);
}
-
前端对接受到的数据解封装：
- 首先获取xml文件
- 按找标签名找到每一个对象students
- 遍历每一个对象student，获取需要的节点信息
window.onload = function () {
document.getElementById("btn").onclick = function (){
//1.创建JSON核心对象
var xhr = new XMLHttpRequest();
//2.
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) {
//
var xmlDoc = this.responseXML;
// console.log(xmlDoc)
var html = "";
var students = xmlDoc.getElementsByTagName("student");
//遍历所有的student
for (var i = 0; i < students.length; i++){
//获取单个student
var student = students[i]
//获取student下的所有子节点
html += "<tr>"
var childNodes = student.childNodes;
for (var j = 0; j < childNodes.length; j++){
var node = childNodes[j];
if (node.nodeName == "username"){
// console.log("name="+node.textContent)
html += "<td>"+node.textContent+"</td>"
}else {
html += "<td>"+node.textContent+"</td>"
}
}
html += "</tr>"
}
document.getElementById("tbody").innerHTML = html
}else{
alert(this.status)
}
}
}
//3.打开通道
xhr.open("GET","/ajax/ajaxrequest7",true)
//4.发送数据
xhr.send();
}
}
3. 对于Ajax乱码问题
-
通过对一下问题的测试得出结论：tomcat10版本解决了乱码问题，后端程序不需要理会这个问题，Tomcat10之前的版本还没有解决，需要程序员设置编码方式
-
发送ajax get请求
- 发送数据到服务器，服务器获取的数据是否乱码？
- 服务器响应给前端的中文，会不会乱码？
-
发送ajax post请求
- 发送数据到服务器，服务器获取的数据是否乱码？
- 服务器响应给前端的中文，会不会乱码？
-
-
对于Tomcfat9以及之前版本响应中文的时候，出现乱码解决？
response.setContentType("text/html;charset=UTF-8"); -
发送ajax post请求的时候，发送给服务器的数据，服务器接收之后乱码，怎么解决？
request.setCharacterEncoding("UTF-8");
1553
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
