第AJAX實(shí)現(xiàn)JSON與XML數(shù)據(jù)交換方法詳解目錄1、JS中如何創(chuàng)建和訪問(wèn)JSON對(duì)象2、基于JSON的數(shù)據(jù)交換3、基于XML的數(shù)據(jù)交換

1、JS中如何創(chuàng)建和訪問(wèn)JSON對(duì)象

（1）在javascript語(yǔ)言中怎么創(chuàng)建一個(gè)json對(duì)象，語(yǔ)法是什么？

屬性名:屬性值,屬性名:屬性值.........的格式！

注意：屬性值的數(shù)據(jù)類型隨意；可能是數(shù)字，可能是布爾類型，可能是字符串，可能是數(shù)組，也可能是一個(gè)json對(duì)象.....

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

titleTitle/title

/head

body

scripttype="text/javascript"

//先創(chuàng)建一個(gè)JSON對(duì)象

varaddress={

"city":"安徽",

"street":"城關(guān)鎮(zhèn)",

"zipcode":"123"

//另一個(gè)JSON對(duì)象

varuser={

"usercode":111,

"username":"zhangsan",

"sex":true,

"age":20,

"aihao":["抽煙","喝酒","燙頭"],

"addr":address

//上面就等價(jià)于

varuser={

"usercode":111,

"username":"zhangsan",

"sex":true,

"age":20,

"aihao":["抽煙","喝酒","燙頭"],

"addr":{

"usercode":111,

"username":"zhangsan",

"sex":true,

"age":20,

"aihao":["抽煙","喝酒","燙頭"],

"addr":address}

/script

/body

/html

（2）如何去訪問(wèn)json對(duì)象？主要有兩種方式：

第一種方式：使用.屬性名的方式

第二種方式：使用[屬性名]的方式

//第一種方式

console.log(address.city);

console.log(user.addr.street);

for(vari=0;iuser.aihao.length;i++){

console.log(user.aihao[i]);

//第二種方式

console.log(address["city"]);

console.log(user["sex"]"男":"女");

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

（1）將JSON格式字符串轉(zhuǎn)換為JSON對(duì)象

我們知道從后端java程序中響應(yīng)回來(lái)的是字符串（json格式的字符串），那么你怎么把json格式的字符串轉(zhuǎn)換成json對(duì)象呢？主要有兩種方式：

JSON格式的字符串

varfromJavaServerJsonStr="{"usercode":111,"age":20}";

//\是轉(zhuǎn)義字符的作用，防止與外面的雙引號(hào)沖突

varfromJavaServerJsonStr="{\"usercode\":111,\"age\":20}";

第一種方式：使用eval函數(shù)

window.eval("varjsonobj1="+fromJavaServerJsonStr);

//進(jìn)行訪問(wèn)

alert(jsonobj1.usercode);//111

第二種方式：調(diào)用javascript語(yǔ)言中的內(nèi)置對(duì)象JSON的一個(gè)方法parse。

varjsonobj2=JSON.parse(fromJavaServerJsonStr);

alert(jsonobj2.age);//20

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

①對(duì)于后端，不在寫(xiě)html的代碼，只負(fù)責(zé)把數(shù)據(jù)以JSON格式的字符串返回；后端變輕松了。

②對(duì)于前端，負(fù)責(zé)把接收到的JSON格式的字符串轉(zhuǎn)換成JSON對(duì)象，并完成拼串的操作；前端變復(fù)雜了。

③整體上，后端只會(huì)出現(xiàn)后端的代碼，前端只會(huì)出現(xiàn)前端的代碼，便于維護(hù)！

第一種方式：對(duì)于靜態(tài)的字符串

后端得到靜態(tài)的數(shù)據(jù)，不在拼接HTML程序（寫(xiě)前端代碼），只負(fù)責(zé)把數(shù)據(jù)響應(yīng)回去，拼接成JSON格式的字符串

StringBuilderhtml=newStringBuilder();

html.append("tr

html.append("td1/td

html.append("td王五/td

html.append("td20/td

html.append("td北京大興區(qū)/td

html.append("/tr

html.append("tr

html.append("td2/td

html.append("td李四/td

html.append("td22/td

html.append("td北京海淀區(qū)/td

html.append("/tr

//--------------------------------------------修改為

//將以上程序拼接HTML，換成拼接JSON格式的字符串。

StringjsonStr="[{\"name\":\"王五\",\"age\":20,\"addr\":\"北京大興區(qū)\"},{\"name\":\"李四\",\"age\":22,\"addr\":\"北京海淀區(qū)\"}]";

//響應(yīng)JSON格式的字符串給前端。

out.print(jsonStr);

前端不在直接拿后端拼好的字符串格式，而是拿到JSON格式的字符串進(jìn)行處理，在前端進(jìn)行拼串

document.getElementById("stutbody").innerHTML=this.responseText

//-----------------------------------修改為

//將json格式的字符串轉(zhuǎn)換成json對(duì)象

varstuList=JSON.parse(this.responseText);

//是一個(gè)數(shù)組，并且數(shù)組中有多個(gè)學(xué)生數(shù)據(jù)

varhtml=""

for(vari=0;istuList.length;i++){

varstu=stuList[i]

html+="tr"

html+="td"+(i+1)+"/td"

html+="td"++"/td"

html+="td"+stu.age+"/td"

html+="td"+stu.addr+"/td"

html+="/tr"

document.getElementById("stutbody").innerHTML=html

第二種方式：連接數(shù)據(jù)庫(kù)動(dòng)態(tài)拼接JSON字符串

①創(chuàng)建數(shù)據(jù)庫(kù)表

②后端連接數(shù)據(jù)庫(kù)，拼接成JSON格式的字符串

packagecom.bjpowernode.javaweb.ajax;

importjavax.servlet.ServletException;

importjavax.servlet.annotation.WebServlet;

importjavax.servlet.http.HttpServlet;

importjavax.servlet.http.HttpServletRequest;

importjavax.servlet.http.HttpServletResponse;

importjava.io.IOException;

importjava.io.PrintWriter;

importjava.sql.*;

*@Author：朗朗乾坤

*@Package：com.bjpowernode.javaweb.ajax

*@Project：ajax

*@name：AjaxRequest5Servlet

*@Date：2025/12/617:13

@WebServlet("/ajaxrequest5")

publicclassAjaxRequest5ServletextendsHttpServlet{

@Override

protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)

throwsServletException,IOException{

//響應(yīng)到瀏覽器

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

PrintWriterout=response.getWriter();

//用于拼接成JSON的字符串

StringBufferjson=newStringBuffer();

Stringjsonobj="";

//連接數(shù)據(jù)庫(kù)

Connectionconn=null;

PreparedStatementps=null;

ResultSetrs=null;

try{

//注冊(cè)驅(qū)動(dòng)

Class.forName("com.mysql.jdbc.Driver");

//獲取連接

conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/bjpowernodeuseUnicode=truecharacterEncoding=utf8serverTimezone=UTC","root","123");

//獲取預(yù)編譯的數(shù)據(jù)庫(kù)操作對(duì)象

Stringsql="selectname,age,addrfromt_student";

ps=conn.prepareStatement(sql);

//執(zhí)行sql

rs=ps.executeQuery();

//處理查詢結(jié)果集

json.append("[");

while(rs.next()){//每循環(huán)一次，就拼接一次

Stringname=rs.getString("name");

Stringage=rs.getString("age");

Stringaddr=rs.getString("addr");

//拼成JSON格式的字符串對(duì)象，每次循環(huán)拼接的格式如下

//{"name":"王五","age":20,"addr":"北京大興區(qū)"},

json.append("{\"name\":\"");

json.append(name);

json.append("\",\"age\":");

json.append(age);

json.append(",\"addr\":\"");

json.append(addr);

json.append("\"},");

//上面這樣拼接，最后一個(gè)JSON格式的對(duì)象會(huì)多一個(gè)逗號(hào)，所以進(jìn)行截串

jsonobj=json.substring(0,json.length()-1)+"]";

}catch(ClassNotFoundExceptione){

e.printStackTrace();

}catch(SQLExceptione){

e.printStackTrace();

}finally{

//釋放資源

if(rs!=null){

try{

rs.close();

}catch(SQLExceptione){

e.printStackTrace();

if(ps!=null){

try{

ps.close();

}catch(SQLExceptione){

e.printStackTrace();

if(conn!=null){

try{

conn.close();

}catch(SQLExceptione){

e.printStackTrace();

//響應(yīng)JSON格式的字符串給前端

out.print(jsonobj);

}

③前端對(duì)JSON格式的字符串進(jìn)行處理，然后拼串

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

title發(fā)送AJAX請(qǐng)求，顯示學(xué)生列表/title

/head

body

scripttype="text/javascript"

window.onload=function(){

document.getElementById("btn").onclick=function(){

//1.創(chuàng)建核心對(duì)象

varxhr=newXMLHttpRequest();

//2.注冊(cè)回調(diào)函數(shù)

xhr.onreadystatechange=function(){

if(this.readyState==4){

if(this.status==200){

//document.getElementById("mybody").innerHTML=this.responseText

//將json格式的字符串轉(zhuǎn)換成json對(duì)象

varstuList=JSON.parse(this.responseText)

//是一個(gè)數(shù)組，并且數(shù)組中有多個(gè)學(xué)生數(shù)據(jù)

varhtml=""

for(vari=0;istuList.length;i++){

varstu=stuList[i]

html+="tr"

html+="td