基于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代碼塊的開(kāi)始和結(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.開(kāi)啟通道
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)文章希望大家以后多多支持碩編程！
學(xué)習(xí)AJAX