1、杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料杨教授工作室，版权所有，盗版必究 ， 1/17 页11.1 跟我学 JSON相关技术及在项目中的应用示例应用 JSon实现Web客户端和服务器端系统之间交换数据的应用示例1.1.1 JSon格式的对象字符串特别适合于基于 AJAX技术的 Web应用中的数据传递1、JSON 就是 JavaScript 对象最好的序列化形式由于在 Web 应用中可以实现 JavaScript 对象和 JSon 格式的字符串之间的相互转换，从而实现 JavaScript 对象的序列化和反序列化。2、在 AJAX 的应用中采用 JSon 格式的字符串代替 XML
2、 格式的字符串在 AJAX 应用中将客户端的一个 JavaScript 对象转换为 JSon 格式的字符串传递到服务器端的程序中，然后在服务器端再将 JSon 格式的字符串反转换回（也就是反序列化）为某个服务器端的程序对象。因为如果能够将 JavaScript 对象直接转换为文本形式，则比采用比如 XML 格式的方式表达更简洁也更高效。JavaScript 对象可以最终转换为一个 JSON 形式的字符串，在网络客户/ 服务器之间可以自由传递（将 JSON 形式的字符串从 Web 客户机传递给服务器端程序和从服务器端传递到客户端）和最终实现交换信息。1.1.2 获得服务器端返回的 JSON对象字
3、符串的应用示例1、转换的基本工作原理服务器端相关的程序（比如 J2EE Servlet或者 Struts2框架的 Action程序类）向浏览器客户端的 JavaScript程序返回 JSON对象字符串，然后在 Web页面中的 JavaScript代码中应用 JSON.parse()函数将服务器端相关的程序返回的 JSON对象字符串转换为JavaScript对象，然后应用该 JavaScript对象获得服务器端的对象数据。下面通过具体的示例说明如何实现在服务器端相关的程序中发送 JSON对象字符串，如何在客户端的 JavaScript程序解析和提取出相关的对象。2、构建一个名称为 ajaxjso
4、n的 Web应用项目杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料杨教授工作室，版权所有，盗版必究 ， 2/17 页23、在该 Web 项目中设计一个 JSP 页面，页面文件名称为 index.jsp在 index.jsp 页面中引用 json2.js 程序文件，然后再设计该页面中的 HTML 超链接和对应的 JavaScript 程序代码。 Index.jsp 页面的完整代码示例如下：/*杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料杨教授工作室，版权所有，盗版必究 ， 3/17 页3引用 JSON系统库中的 parse函数所在的系统库文件 json2.js*/var x
5、mlHttpRequest;function sendRequestToServlet(requestURL ,actionType)xmlHttpRequest=createXMLHttpRequest();switch(actionType)/*分别设置获得服务器端返回的不同类型对象的回调函数*/case 1:xmlHttpRequest.onreadystatechange = getServletResponseResult_SingleObject;break;case 2:xmlHttpRequest.onreadystatechange = getServletResponseR
6、esult_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“,杨教授
7、工作室 精心创作的优秀程序员 职业提升必读系列资料杨教授工作室，版权所有，盗版必究 ， 4/17 页4“application/x-www-form-urlencoded“);xmlHttpRequest.send(null);function createXMLHttpRequest()var localXMLHttpRequest;if(window.XMLHttpRequest)/*表示用户的浏览器为 fireFox等非 IE系列，则应用 XMLHttpRequest对象模板创建出对象实例*/localXMLHttpRequest=new XMLHttpRequest();else if
8、(window.ActiveXObject)/* 表示用户的浏览器为 IE系列，则应用 ActiveXObject对象模板创建出对象实例*/trylocalXMLHttpRequest=new ActiveXObject(“Msxml2.XMLHTTP“);catch(e)trylocalXMLHttpRequest=new ActiveXObject(“Microsoft.XMLHTTP“);catch(e)window.alert(“你的 IE浏览器不支持 XMLHttpRequest相关的技术实现！“);return localXMLHttpRequest;杨教授工作室 精心创作的优秀程
9、序员 职业提升必读系列资料杨教授工作室，版权所有，盗版必究 ， 5/17 页5/*获得服务器端返回的单一对象的回调函数*/function getServletResponseResult_SingleObject()if (xmlHttpRequest.readyState = 4)if (xmlHttpRequest.status = 200)var jsonOnePersonsObjectFromServlet= JSON.parse(xmlHttpRequest.responseText); var onePersonString=jsonOnePersonsObjectFromSer
10、vlet.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不正确，未找到请求的目标文件！“);el
11、se if(xmlHttpRequest.status =500)window.alert(“服务器由于遇到错误而不能完成该请求！“);else if(xmlHttpRequest.status =505)window.alert(“HTTP版本不受支持！“);elsewindow.alert(“出现了其它不知名的错误！“);杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料杨教授工作室，版权所有，盗版必究 ， 6/17 页6/*获得服务器端返回的对象数组的回调函数*/function getServletResponseResult_ObjectArray()if (xmlHttpRe
12、quest.readyState = 4)if (xmlHttpRequest.status = 200)var jsonAllPersonsObjectFromServlet= JSON.parse(xmlHttpRequest.responseText );var onePersonString=“;for(var loopIndex=0;loopIndex“; document.getElementById(“showResultOne“).innerHTML=onePersonString;else if(xmlHttpRequest.status =400)window.alert(
13、“你的请求无效！“);else if(xmlHttpRequest.status =404)window.alert(“你向服务端程序请求的 URL不正确，未找到请求的目标文件！“);else if(xmlHttpRequest.status =500)window.alert(“服务器由于遇到错误而不能完成该请求！“);杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料杨教授工作室，版权所有，盗版必究 ， 7/17 页7else if(xmlHttpRequest.status =505)window.alert(“HTTP版本不受支持！“);elsewindow.alert(“出现了
14、其它不知名的错误！“);获得服务器端返回的 JSON对象字符串 点击获得服务器返回的单个 JSON对象字符串点击获得服务器返回的单个元素的 JSON对象数组字符串点击获得服务器返回的 JSON对象数组字符串杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料杨教授工作室，版权所有，盗版必究 ， 8/17 页83、在项目的 index.jsp 页面中引用 JSON 系统库中的 parse 函数所在的系统库文件json2.js（1）在项目的 WebRoot 目录下创建一个目录名称为 javascript 的子目录（2）在 javascript 子目录中包含有 json2.js 文件杨教授工作室
15、 精心创作的优秀程序员 职业提升必读系列资料杨教授工作室，版权所有，盗版必究 ， 9/17 页9（3）在 index.jsp 页面中引用 JSON 系统库中的 parse 函数所在的系统库文件 json2.js4、设计相关的后台 J2EE Servlet 程序该 Servlet 程序类主要响应 Web 页面中的 AJAX 方式的请求，并将处理的结果返回给Web 页面中的 JavaScript 程序。Servlet 程序类名称为 AjaxResponseServlet，程序包名称为com.bluedream.ajaxjsondemo.servlet（1）如下为创建该 Servlet 程序类的示图
16、杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料杨教授工作室，版权所有，盗版必究， 10/17 页10（2）设置该 Servlet 程序类的 URL-Pattern 为/ajaxResponseServlet杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料杨教授工作室，版权所有，盗版必究， 11/17 页11在下面的 Servlet 程序中向客户端的 JavaScript 程序返送 JSon 格式的对象字符串。（3）完整的程序代码示例package com.bluedream.ajaxjsondemo.servlet;import java.io.IOException;imp
17、ort java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class AjaxResponseServlet extends HttpServlet public AjaxResponseServlet() super();public void doPost(
18、HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException 杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料杨教授工作室，版权所有，盗版必究， 12/17 页12doGet(request, response);public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException response.setCo
19、ntentType(“text/html; charset=GBK“);PrintWriter out = response.getWriter();String actionType=request.getParameter(“actionType“);switch(Integer.parseInt(actionType)case 1:out.print(buildOneObjectJSONString();break;case 2:out.print(buildOneElementObjectArrayJSONString();break;case 3:out.print(buildOne
20、ObjectArrayJSONString();break;out.flush();out.close();/*注意在 JSon 格式的字符串中的“属性名”和对应的“属性值”都应该要用双引号。*/public String buildOneObjectJSONString()String jsonOneObjectString=“name“:“张三“,“sex“:“m“,“age“:“40“;return jsonOneObjectString;public String buildOneElementObjectArrayJSONString()String jsonAllObjectArr
21、ayString=杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料杨教授工作室，版权所有，盗版必究， 13/17 页13“name“:“张三“,“sex“:“m“,“age“:“40“;return jsonAllObjectArrayString;public String buildOneObjectArrayJSONString()String jsonAllObjectArrayString=“name“:“张三“,“sex“:“m“,“age“:“40“,“ +“name“:“李四“,“sex“:“f“,“age“:“37“,“ +“name“:“王五“,“sex“:“m“,
22、“age“:“30“;return jsonAllObjectArrayString;在项目的实现中，为了达到程序的通用性，在服务器端都统一返回对象集，即使只有一个对象也包装到对象集中返回到客户端，在客户端按照对象集的形式迭代出目标对象。5、部署本 Web 应用系统（1）以文件目录方式部署本 Web 应用示例项目杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料杨教授工作室，版权所有，盗版必究， 14/17 页14（2）最终部署的结果杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料杨教授工作室，版权所有，盗版必究， 15/17 页156、启动 Tomcat 服务器7、测试本示例程
23、序的实现效果（1）启动测试 Web 页面在浏览器的 URL 地址栏中输入 http:/127.0.0.1:8080/ajaxjson/index.jsp，将程序如下的Web 页面，在该 Web 页面中提供有三个不同形式的超链接：杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料杨教授工作室，版权所有，盗版必究， 16/17 页16（2）点击页面中的“点击获得服务器返回的单个 JSON 对象字符串”超链接，将出现如下的执行结果：（3）点击页面中的“点击获得服务器返回的单个元素的 JSON 对象数组字符串”超链接，将出现如下的执行结果：（4）点击页面中的“点击获得服务器返回的 JSON 对象数组字符串”超链接，将出现如下的执行结果：杨教授工作室 精心创作的优秀程序员 职业提升必读系列资料杨教授工作室，版权所有，盗版必究， 17/17 页17
