溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“AJAX數據交換如何實現”，在日常操作中，相信很多人在AJAX數據交換如何實現問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”AJAX數據交換如何實現”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
前端接收到來自后端的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);<!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數據交換如何實現”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
