欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AJAX淺析數(shù)據(jù)交換的實(shí)現(xiàn)

 更新時(shí)間：2022年08月22日 11:03:19   作者：少不入川。  
在AJAX中，最常用的就是JSON，XML因?yàn)楸容^冗雜所以用的比較少。所以我們先來(lái)說(shuō)基于JSON的數(shù)據(jù)交換。最后我們還會(huì)提到在數(shù)據(jù)交換中出現(xiàn)亂碼的形式

基于JSON的數(shù)據(jù)交換

前端

前端接收到來(lái)自后端的JSON格式的字符串以后，需要將字符串轉(zhuǎn)換為JSON對(duì)象：

var jsonStr = "{\"username\" : \"zhangsan\", \"password\" : \"1233344\"}"
// 第一種方法
var jsonObj = JSON.parse(jsonStr)
// 第二種方法
var jsonObj =  eval('(' + jsonStr + ')')

第二種方法中加括號(hào)的原因是：

加圓括號(hào)的目的是迫使eval函數(shù)在處理JavaScript代碼的時(shí)候強(qiáng)制將括號(hào)內(nèi)的表達(dá)式（expression）轉(zhuǎn)化為對(duì)象，而不是作為語(yǔ)句（statement）來(lái)執(zhí)行。舉一個(gè)例子，例如對(duì)象字面量{}，如若不加外層的括號(hào)，那么eval會(huì)將大括號(hào)識(shí)別為JavaScript代碼塊的開始和結(jié)束標(biāo)記，那么{}將會(huì)被認(rèn)為是執(zhí)行了一句空語(yǔ)句。

后端

后端需要將需要傳給前端的數(shù)據(jù)拼接成JSON格式的字符串。一個(gè)一個(gè)拼接太麻煩，我們選擇使用阿里巴巴的fastjson組件，它可以將java對(duì)象轉(zhuǎn)換成json格式的字符串

List<Student> studentList = new ArrayList<>();
while (rs.next()) {
    // 取出數(shù)據(jù)
    String name = rs.getString("name");
    int age = rs.getInt("age");
    String addr = rs.getString("addr");
    // 將以上數(shù)據(jù)封裝成Student對(duì)象
    Student s = new Student(name, age, addr);
    // 將Student對(duì)象放到List集合
    studentList.add(s);
}
// 將List集合轉(zhuǎn)換成json字符串
jsonStr = JSON.toJSONString(studentList);
// 響應(yīng)JSON格式的字符串給前端。
 out.print(jsonStr);

基于XML的數(shù)據(jù)交換

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用XML完成數(shù)據(jù)交換</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function(){
        document.getElementById("btn").onclick = function(){
            // 1.創(chuàng)建XMLHTTPRequest對(duì)象
            var xhr = new XMLHttpRequest();
            // 2.注冊(cè)回調(diào)函數(shù)
            xhr.onreadystatechange = function () {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        // 使用XMLHTTPRequest對(duì)象的responseXML屬性，接收返回之后，可以自動(dòng)封裝成document對(duì)象（文檔對(duì)象）
                        var xmlDoc = this.responseXML
                        //console.log(xmlDoc)
                        // 獲取所有的<student>元素，返回了多個(gè)對(duì)象，應(yīng)該是數(shù)組。
                        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.發(fā)送請(qǐng)求
            xhr.send()
        }
    }
</script>
<button id="btn">顯示學(xué)生列表</button>
<table width="500px" border="1px">
    <thead>
    <tr>
        <th>序號(hào)</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數(shù)據(jù)的方式不再是調(diào)用XMLHttpRequest對(duì)象的responseText屬性，而是調(diào)用responseXML屬性。

然后再通過(guò)getElementsByTagName方法獲得標(biāo)簽進(jìn)行遍歷拼接。

后端

如果服務(wù)器響應(yīng)的是XML數(shù)據(jù)的話，那么Servlet中的

response.setContentType("text/html;charset=UTF-8");

需要換成

response.setContentType("text/xml;charset=UTF-8");

至于XML數(shù)據(jù)字符串串的拼接這里不贅述了。

亂碼問(wèn)題

對(duì)于tomcat10來(lái)說(shuō)，關(guān)于字符集，我們程序員不需要干涉，不會(huì)出現(xiàn)亂碼。

對(duì)于tomcat9及以下版本來(lái)說(shuō)呢？

響應(yīng)中文的時(shí)候，會(huì)出現(xiàn)亂碼，怎么解決？

response.setContentType("text/html;charset=UTF-8");

發(fā)送ajax post請(qǐng)求的時(shí)候，發(fā)送給服務(wù)器的數(shù)據(jù)，服務(wù)器接收之后亂碼，怎么解決？

request.setCharacterEncoding("UTF-8");

到此這篇關(guān)于AJAX淺析數(shù)據(jù)交換的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)AJAX數(shù)據(jù)交換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論