初识JSON(二)

rel="File-List" href="file:///C:%5CDOCUME%7E1%5CtuxWang%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_filelist.xml">

JSON很方便，而且JavaScript很容易解析这种数据格式。可以用JSON 替换xml 与服务器端进行数据交换，或者说传输数据！相比xml 来说，JSON就比较简单而且容易生成。

当然，最主要的就是如何发送请求与处理请求了，还有就是如何将各种数据类型转换成JSON格式串。上网查了些与服务器端交互的资料，在这里做一个总结吧-_-

      肯定得得到一个XMLHttpRequest对象，顺便加上我们下载下来的json.js

1. <script language=”text/javascript” src=”js/json.js”></script>
2. <script language=”text/javascript”>
3. var  xmlHttp;
4. 
   
5. function  createXMLHttpRequest(){
6.               if (window.ActiveXObject){
7.                     xmlHttpRequest =new ActiveXObject( " Microsoft.XMLHTTP " );
8.               }else if (window.XMLHttpRequest) {
9.                     xmlHttpRequest = new XMLHttpRequest();
10.              }
11.  }
12. 
    
13. function doPost(){   // 有一个发出请求的JavaScript 函数
14.             var stu = getStudent();
15.             var stuJsonString = JSON.stringify(stu); // Or stu.toJSONString();          
16.             alert(stuJsonString);
17.             var requestUrl = "JsonTest?timeStamp=" + new Date().getTime();   // 加上timeStamp确保不会在第一次发出请求后
18.                                                                                                                           // 缓存，每次被调用后都会重新创建和重发
19.             alert(requestUrl); 
20.             
21.             createXMLHttpRequest();
22.             xmlHttpRequest.open("post" , requestUrl , true);
23.             xmlHttpRequest.onreadystatechange = handleStateChange;
24.             xmlHttpRequest.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");
25.             xmlHttpRequest.send(stuJsonString);
26. }
27. 
    
28. function handleStateChange(){ 
29.             if(xmlHttpRequest.readyState == 4){
30.                 if(xmlHttpRequest.status == 200){
31.                     parseResult();
32.                 }
33.             }
34. }
35. 
    
36. function parseResult(){
37.             var responsediv = document.getElementById("resultdiv");
38.             if(responsediv.hasChildNodes()){
39.                 responsediv.removeChild(responsediv.childNodes[0]);
40.             }
41.             var responseText = document.createTextNode(xmlHttpRequest.responseText);
42.             responsediv.appendChild(responseText);       // 就让简单显示下响应的内容
43.         }
44.         
45.         
46.         function Student(name,stuclass,age){
47.             this.name = name;
48.             this.stuclass = stuclass;
49.             this.age = age;
50.         }
51.         
52.         function getStudent(){
53.             return new Student("Xiao Wang", "Class One",23);
54.         }
55. </script>
56. 
    

rel="File-List" href="file:///C:%5CDOCUME%7E1%5CtuxWang%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C04%5Cclip_filelist.xml">

    客户端的JavaScript脚本差不多就这么多了，然后页面中有一个显示结果的层：              

1. <div id=”resultdiv”></div>

    服务器端代码：这里只测试了Java(我这会儿也只会Java)，JSON本身是支持很多语言的。

    以下是Servlet中doPost()方法的代码:   

1. public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
2.         String jsonString = null;
3. StringBuffer json = new StringBuffer();
4.         String line = null;
5.         try{
6.             BufferedReader reader = request.getReader();
7.             while((line = reader.readLine()) != null){
8.                 json.append(line);
9.             }
10.         }catch(Exception e){
11.             System.out.println("Error reading JSON string : " + e.toString());
12.         }
13.         jsonString = json.toString();
14.             JSONObject jsonObject = null;
15.             try{
16.                 jsonObject = new JSONObject(json);              
17.             }catch (JSONException e) {
18.                 // TODO Auto-generated catch block
19.                 e.printStackTrace();
20.             }
21.             String responseText = jsonObject.getString();;
22.             response.setContentType("text/xml");
23.             response.getWriter().print(responseText);
24.     }