对象跟我学JSON相关技术及在项目中的应用示例——应用JSon实现Web客户端和服务器端系统之间交换数据的应用示例

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

1. 1 跟我学JSON相关技术及在项目中的应用示例——应用JSon实现Web客户端和服务器端系统之间交换数据的应用示例

1. 1. 1 JSon格式的对象字符串特别适合于基于AJAX技术的Web应用中的数据传递

1、 JSON就是JavaScript对象最好的序列化形式

由于在Web应用中可以实现JavaScript对象和JSon格式的字符串之间的相互转换从而实现JavaScript对象的序列化和反序列化。

2、在AJAX的应用中采用JSon格式的字符串代替XML格式的字符串

在AJAX应用中将客户端的一个JavaScript对象转换为JSon格式的字符串传递到服务器端的程序中然后在服务器端再将JSon格式的字符串反转换回也就是反序列化为某个服务器端的程序对象。

因为如果能够将JavaScript对象直接转换为文本形式则比采用比如XML格式的方式表达更简洁也更高效。 JavaScript对象可以最终转换为一个JSON形式的字符串在网络客户/服务器之间可以自由传递将JSON形式的字符串从Web客户机传递给服务器端程序和从服务器端传递到客户端和最终实现交换信息。

1. 1.2获得服务器端返回的JSON对象字符串的应用示例

1、转换的基本工作原理

服务器端相关的程序比如J2EE Servlet或者Struts2框架的Action程序类 向浏览器客户端的JavaScript程序返回JSON对象字符串然后在Web页面中的JavaScript代码中应用JSON.parse()函数将服务器端相关的程序返回的JSON对象字符串转换为JavaScript对象然后应用该JavaScript对象获得服务器端的对象数据。

下面通过具体的示例说明如何实现在服务器端相关的程序中发送JSON对象字符串如何在客户端的JavaScript程序解析和提取出相关的对象。

2、构建一个名称为ajaxjson的Web应用项目

杨教授工作室版权所有1 盗版必究 1/17页

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

3、在该We b项目中设计一个JSP页面页面文件名称为inde x.js p

在index.jsp页面中引用json2.js程序文件然后再设计该页面中的HTML超链接和对应的JavaScrip t程序代码。 Index.j sp页面的完整代码示例如下

<%@ page pageEncoding="gb2312" isELIgnored="false" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<script type="text/javascript" language="javascript"src="$ {pageContext.request.contextPath}/javascript/json2. js">

杨教授工作室版权所有2 盗版必究 2/17页

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

引用JSON系统库中的parse函数所在的系统库文件json2. js

*/

</script>

<script type="text/javascript" language="javascript" >var xmlHttpRequest;function sendRequestToServlet(requestURL ,actionType) {xmlHttpRequest=createXMLHttpRequest() ;switch(actionType) {

/**

分别设置获得服务器端返回的不同类型对象的回调函数

*/case 1:xmlHttpRequest.onreadystatechange =getServletResponseResult_SingleObject;break;case 2:xmlHttpRequest.onreadystatechange =getServletResponseResult_ObjectArray;break;case 3:xmlHttpRequest.onreadystatechange =getServletResponseResult_ObjectArray;break;

}

/* 也可以采用如下的get方式的请求xmlHttpRequest.open("get", requestURL, true) ;xmlHttpRequest. send(null) ;

*/xmlHttpRequest.open("post",requestURL, true) ;xmlHttpRequest. setRequestHeader("Content-Type",

杨教授工作室版权所有3 盗版必究 3/17页

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

"application/x-www-form-urlencoded") ;xmlHttpRequest. send(null) ;

}function createXMLHttpRequest() {var localXMLHttpRequest;if(window.XMLHttpRequest) {

/**

表示用户的浏览器为fireFox等非IE系列则应用XMLHttpRequest对象模板创建出对象实例

*/localXMLHttpRequest=new XMLHttpRequest() ;

}else if(window.ActiveXObject) {

/**

*表示用户的浏览器为IE系列则应用ActiveXObject对象模板创建出对象实例

*/try{localXMLHttpRequest=new ActiveXObject("Msxml2.XMLHTTP") ;}catch(e) {try{localXMLHttpRequest=new ActiveXObject("Microsoft.XMLHTTP") ;}catch(e) {window.alert("你的IE浏览器不支持XMLHttpRequest相关的技术实现 ") ;}

}

}return localXMLHttpRequest;

}

杨教授工作室版权所有4 盗版必究 4/17页

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

/**

获得服务器端返回的单一对象的回调函数

*/function getServletResponseResult_SingleObject() {if (xmlHttpRequest.readyState == 4) {if (xmlHttpRequest. status == 200) {var jsonOnePersonsObjectFromServlet=

JSON.parse(xmlHttpRequest.responseText) ;var onePersonString=jsonOnePersonsObjectFromServlet.name+" "+jsonOnePersonsObjectFromServlet. sex+" "+jsonOnePersonsObjectFromServlet.age;document.getElementById("showResultOne") . innerHTML=onePersonString;}else if(xmlHttpRequest. status ==400) {window.alert("你的请求无效 ") ;

}else if(xmlHttpRequest. status ==404) {window.alert("你向服务端程序请求的URL不正确未找到请求的目标文件 ") ;}else if(xmlHttpRequest. status ==500) {window.alert("服务器由于遇到错误而不能完成该请求 ") ;}else if(xmlHttpRequest. status ==505) {window.alert("HTTP版本不受支持 ") ;

}else{window.alert("出现了其它不知名的错误 ") ;

}

}

杨教授工作室版权所有5 盗版必究 5/17页

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

}

/**

获得服务器端返回的对象数组的回调函数

*/function getServletResponseResult_ObjectArray() {if (xmlHttpRequest.readyState == 4) {if (xmlHttpRequest. status == 200) {var jsonAllPersonsObjectFromServlet=

JSON.parse(xmlHttpRequest.responseText ) ;var onePersonString="";for(var loopIndex=0;loopIndex<jsonAllPersonsObjectFromServlet. length;loopIndex++) {var onePersonObject=jsonAllPersonsObjectFromServlet[loopIndex] ;onePersonString=onePersonString+onePersonObject.name+" "+onePersonObject. sex+" "+onePersonObject.age+"<br>";}document.getElementById("showResultOne") . innerHTML=onePersonString;}else if(xmlHttpRequest. status ==400) {window.alert("你的请求无效 ") ;

}else if(xmlHttpRequest. status ==404) {window.alert("你向服务端程序请求的URL不正确未找到请求的目标文件 ") ;}else if(xmlHttpRequest. status ==500) {window.alert("服务器由于遇到错误而不能完成该请求 ") ;

}else if(xmlHttpRequest. status ==505) {window.alert("HTTP版本不受支持 ") ;

杨教授工作室版权所有6 盗版必究 6/17页

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

}else{window.alert("出现了其它不知名的错误 ") ;

}

}

}

</script>

<title>获得服务器端返回的JSON对象字符串</title>

</head>

<body>

<a href="#"onclick="sendRequestToServlet(' ${pageContext.request.contextPath}/ajaxResponseServlet?actionType=1' , 1)">点击获得服务器返回的单个JSON对象字符串</a><br/>

<a href="#"onclick="sendRequestToServlet(' ${pageContext.request.contextPath}/ajaxResponseServlet?actionType=2' ,2)">点击获得服务器返回的单个元素的JSON对象数组字符串</a><br/>

<a href="#"onclick="sendRequestToServlet(' ${pageContext.request.contextPath}/ajaxResponseServlet?actionType=3' ,3)">点击获得服务器返回的JSON对象数组字符串</a>

<div id="showResultOne" >

</div>

</body>

</html>

杨教授工作室版权所有7 盗版必究 7/17页

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

3、在项目的index.jsp页面中引用JSON系统库中的pars e函数所在的系统库文件js on2.js1在项目的WebRoot目录下创建一个目录名称为javascript的子目录

2在javascript子目录中包含有json2.js文件

杨教授工作室版权所有8 盗版必究 8/17页

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

3在index.jsp页面中引用JSON系统库中的parse函数所在的系统库文件json2.js

<script type="text/javascript" language="javascript"src="${pageCo ntext.request.contextPath}/javascript/json2.js">

</script>

4、设计相关的后台J2EE Servlet程序

该Servlet程序类主要响应Web页面中的AJAX方式的请求并将处理的结果返回给Web页面中的JavaScript程序。 Servlet程序类名称为AjaxResponseServlet程序包名称为com.bluedream.ajaxjsondemo.servlet

1如下为创建该Servlet程序类的示图

杨教授工作室版权所有9 盗版必究 9/17页