教授跟我学JSON相关技术及在项目中的应用示例——在JavaScript程序中向Web服务器端程序发送JSON对象字符串的应用示例

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

1. 1 跟我学JSON相关技术及在项目中的应用示例——在JavaScript程序中向Web服务器端程序发送JSON对象字符串的应用示例

1. 1. 1在客户端JS程序中向服务器端程序发送JSON对象字符串

下面的示例实现在Web客户端的JavaScript程序中向Web服务器端相关的程序发送JSON对象字符串然后在服务器端的相关程序中将JSON对象字符串转换为Java中的对象从而获得客户端程序发送的对象数据。

1、设计示例中的页面sendJSo nStringToServlet.jsp

 1在项目的WebRoot目录下新建一个文件名称为s endJSonStringToServlet.jsp页面

2 sendJSonStringToServlet.jsp页面的代码示例

<%@page pageEncoding="gb2312"%>

<!DOCTYPE HTMLPUBLIC"-//W3C//DTD HTML4.01 Transitional//EN">

<ht ml>

<head>

<script type="text/javascript" language="javascript"

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

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

src="${pageCo ntext.request.contextPath}/javascript/json2.js">

/**

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

*/

</script>

<script type="text/javascript" language="javascript">var xmlHttpRequest;function sendRequestToServlet(requestURL,actionType){xmlHttpRequest=createXMLHttpRequest();switc h(ac tio nTyp e){case 4:xmlHttp Req ue s t.o nread ysta tec ha nge=getServletResponseResult_ReturnObjectArray;var js onAllPers ons Object={"AllPers ons":[

{"name":"张三","sex":"m","age":"40"},{},{"na me":" 王 五","sex":"m","age":"27"} ]

};var allPersonsArray=jsonAllPersonsObject.AllPersons;var o neJSonObje cString=JSON.s tringify(allPe rs onsArray);requestURL=requestURL+"&oneJS onObjecStringN ame="+o neJSonObjecString;b re ak;case 5:xmlHttp Req ue s t.o nread ysta tec ha nge=getServletResponseResult_StringArray;b re ak;

}xmlHttpReque st.open("GET",requestURL, true);xmlHttp Reque st.se nd(null);

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

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

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

/**

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

*/localXMLHttpRequest=new XMLHttpRequest();

}else if(window.ActiveXObject){

/**

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

*/try{lo calXMLHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");

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

}

}return localXMLHttpRequest;

}function getServletResponseRe sult_StringArray(){

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

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

if(xmlH ttp Re q ue st.r e ad yS tate==4){if(xmlHttp Reque st.s tatus==200){var jsonAllS tringArrayFromServlet=

JS ON.parse(xmlHttpRequest.respo nse Te xt);var oneStringElement="";for(var loopIndex=0;loop Index<j sonAllStringArrayFromServlet.length;loop Index++){oneStringElement=oneS tringElement +jsonAllStringArrayF romServlet[loopIndex];

}document.getElementById("sho wRe sultOne").innerHTML=oneStringElement;}e lse if(xmlHttp Reque st.status==400){window.alert("你的请求无效 ");

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

}e lse if(xmlHttp Request.status==505){window.alert("HTTP版本不受支持 ");

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

}

}

}function getServletResponseResult_ReturnObjectArray(){

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

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

if(xmlH ttp Re q ue st.r e ad yS tate==4){if(xmlHttp Reque st.s tatus==200){var jsonAllP ersonsObj ectFromServlet=

JS ON.parse(xmlHttpRequest.respo nse Te xt);var onePersonString="";for(var loopIndex=0;loopIndex<j sonAllPersonsObjectFromServlet.length;loopIndex++){var onePersonObject=j sonAllPersonsObjectFromServlet[loopIndex];onePersonString=onePersonString+onePersonObject.name+" "+onePersonObject.sex+" "+onePersonObject.age+"<br>";}document.ge tEle mentById("sho wRe sultOne").innerHTML=o nePerso nString;}e lse if(xmlHttp Reque st.status==400){window.alert("你的请求无效 ");

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

}e lse if(xmlHttp Request.status==505){window.alert("HTTP版本不受支持 ");

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

}

}

}

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

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

</script>

<title>应用JSON实现在AJAX应用中客户/服务器之间交换数据</title>

</head>

<body>

<a href="#"onclick="sendRequestToServlet('${pageContext.request.contextPath}/doajaxResponseServlet?actionType=4',4)">

点击向服务器传送JavaScript对象的JSON对象字符串

</a><br/>

<a href="#"onclick="sendRequestToServlet('${pageContext.request.contextPath}/doajaxResponseServlet?actionType=5',5)">

点击获得服务器返回的JSON字符串数组字符串

</a><br/>

<div id="showResultO ne">

</d iv>

</body>

</ht ml>

3 sendJSonStringToServlet.jsp页面的最终结果

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

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

2、在sendJSo nStringToServlet.jsp页面中引用json2.js文件

1在项目的WebRoot目录下的javascript子目录中包含有json2.js文件

2在sendJSonStringToServlet.jsp页面中引用json2.js文件

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

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

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

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

</script>

3、在Web项目中添加处理客户端请求的服务器端后台的DoAjaxRespons e Se rvlet程序代码

 1 添加一个类名称为DoAjaxResponseServlet的J2EE Servlet程序程序包名称为com.bluedream.ajaxjsondemo.servlet

2设置向DoAjaxResponseServlet程序请求的URL-pattern为doajaxResponseServlet

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

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

3编程DoAjaxResponseServlet程序的各个功能方法package com.bluedream.ajaxjsondemo.servlet;import java.io.IOException;import j ava.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class DoAjaxResponseServletextends HttpServlet {public DoAjaxResponseServlet () {supe r();

}public void doGet(HttpServletRequest request,HttpServletResponse response)throws ServletException, IOException{re spo nse.se tC onte ntTyp e("te xt/html;c harse t=GBK");

PrintWriter o ut=respo nse.getWriter();

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