AJAX淺析資料交換的實現

2022-08-22 14:02:10

基於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資料交換內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

AJAX淺析資料交換的實現

目錄

基於JSON的資料交換

前端

後端

基於XML的資料交換

前端

後端

亂碼問題

熱門文章