Ajax---通过JSON与服务器通信（发送请求和处理响应）

  好久没有做过关于AJAX的东西了，平时做的也无非就是通过XHP要么用GET（请求部分是追加到URL中的并且浏览器对其长度有会有限制）方法要么通过POST（请求参数内容可以放到请求体中并且无量的限制）方法。传递的无非是些参数值（以名=值的方式出现as : name=jkallen）要么就是DOM对象了。再发到到服务端后做些处理再返回到客户端显示对应结果。<wbr style="LINE-HEIGHT: 1.3em">

</wbr> 今天看到了一个好东东，就是通过<wbr style="LINE-HEIGHT: 1.3em">JSON</wbr><wbr style="LINE-HEIGHT: 1.3em"> (JavaScript Object Notation)向服务器发送数据。它是一种轻量级的数据交换格式，使用了类似于C语言家族的习惯。</wbr><wbr style="LINE-HEIGHT: 1.3em">


JSON具有以下这些形式：<wbr style="LINE-HEIGHT: 1.3em"> </wbr></wbr><wbr style="LINE-HEIGHT: 1.3em">

a :  对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。 </wbr><wbr style="LINE-HEIGHT: 1.3em">

b:   数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。 </wbr><wbr style="LINE-HEIGHT: 1.3em">

c:   值（<wbr>value</wbr><wbr>）可以是双引号括起来的字符串（<wbr>string</wbr></wbr><wbr>）、数值(number)、 ture、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。 </wbr></wbr><wbr style="LINE-HEIGHT: 1.3em">

d:   字符串（<wbr>string</wbr><wbr>）是由双引号包围的任意数量Unicode字符的集合，使用反斜线转义。一个字符（character）即一个单独的字符串（character string）。</wbr><wbr style="LINE-HEIGHT: 1.3em"> </wbr></wbr><wbr style="LINE-HEIGHT: 1.3em">

不多说了，关于JSON其实在</wbr><wbr style="LINE-HEIGHT: 1.3em"> www.json.org<wbr style="LINE-HEIGHT: 1.3em"></wbr></wbr><wbr> 上讲得太好了！上面不但有每个JAVA的源文件，而且每个文件都有与之对应的JAVA DOC！还有不少实例！</wbr><wbr style="LINE-HEIGHT: 1.3em">

我就选了json in java  and  json in javascript 二个链接 ,从这二个地方可以下到JSON的javascript包和Java包。</wbr><wbr style="LINE-HEIGHT: 1.3em">

Javascript 包的应用如下：</wbr><wbr style="LINE-HEIGHT: 1.3em">

<wbr>首先创建一个符合json的对象，并通过XHP发送到sever</wbr><wbr></wbr></wbr><wbr style="LINE-HEIGHT: 1.3em">

</wbr><wbr> </wbr><wbr> < script type = " text/javascript "  src = " json.js " ></ script >
</wbr><wbr> </wbr><wbr> < script type = " text/javascript " >
</wbr><wbr> </wbr><wbr>
</wbr><wbr> </wbr><wbr> var  xmlHttp;
</wbr><wbr> </wbr><wbr>
</wbr><wbr> </wbr><wbr></wbr><wbr> </wbr><wbr> function  createXMLHttpRequest()  </wbr><wbr> </wbr><wbr> {
</wbr><wbr> </wbr><wbr></wbr><wbr> </wbr><wbr>     if  (window.ActiveXObject)  </wbr><wbr> </wbr><wbr> {
</wbr><wbr> </wbr><wbr>        xmlHttp  =   new  ActiveXObject( " Microsoft.XMLHTTP " );
</wbr><wbr> </wbr><wbr>    }  
</wbr><wbr> </wbr><wbr></wbr><wbr> </wbr><wbr>     else   if  (window.XMLHttpRequest)  </wbr><wbr> </wbr><wbr> {
</wbr><wbr> </wbr><wbr>        xmlHttp  =   new  XMLHttpRequest();
</wbr><wbr> </wbr><wbr>    }
</wbr><wbr> </wbr><wbr>}
</wbr><wbr> </wbr><wbr>    
</wbr><wbr> </wbr><wbr></wbr><wbr> </wbr><wbr> function  doJSON()  </wbr><wbr> </wbr><wbr> {
</wbr><wbr> </wbr><wbr>     var  car  =  getCarObject();
</wbr><wbr> </wbr><wbr>    
</wbr><wbr> </wbr><wbr>     // Use the JSON JavaScript library to stringify the Car object
</wbr><wbr> </wbr><wbr>      var  carAsJSON  =  JSON.stringify(car);
</wbr><wbr> </wbr><wbr>    alert( " Car object as JSON:\n  "   +  carAsJSON);
</wbr><wbr> </wbr><wbr>    
</wbr><wbr> </wbr><wbr>     var  url  =   " JSONExample?timeStamp= "   +   new  Date().getTime();
</wbr><wbr> </wbr><wbr>    
</wbr><wbr> </wbr><wbr>    createXMLHttpRequest();
</wbr><wbr> </wbr><wbr>    xmlHttp.open( " POST " , url,  true );
</wbr><wbr> </wbr><wbr>    xmlHttp.onreadystatechange  =  handleStateChange;
</wbr><wbr> </wbr><wbr>    xmlHttp.setRequestHeader( " Content-Type " ,  " application/x-www-form-urlencoded " );    
</wbr><wbr> </wbr><wbr>    xmlHttp.send(carAsJSON);
</wbr><wbr> </wbr><wbr>}
</wbr><wbr> </wbr><wbr>    
</wbr><wbr> </wbr><wbr></wbr><wbr> </wbr><wbr> function  handleStateChange()  </wbr><wbr> </wbr><wbr> {
</wbr><wbr> </wbr><wbr></wbr><wbr> </wbr><wbr>     if (xmlHttp.readyState  ==   4 )  </wbr><wbr> </wbr><wbr> {
</wbr><wbr> </wbr><wbr></wbr><wbr> </wbr><wbr>         if (xmlHttp.status  ==   200 )  </wbr><wbr> </wbr><wbr> {
</wbr><wbr> </wbr><wbr>            parseResults();
</wbr><wbr> </wbr><wbr>        }
</wbr><wbr> </wbr><wbr>    }
</wbr><wbr> </wbr><wbr>}
</wbr><wbr> </wbr><wbr>
</wbr><wbr> </wbr><wbr> </wbr><wbr> </wbr><wbr> function  parseResults()  </wbr><wbr> </wbr><wbr> {
</wbr><wbr> </wbr><wbr>     var  responseDiv  =  document.getElementById( " serverResponse " );
</wbr><wbr> </wbr><wbr></wbr><wbr> </wbr><wbr>     if (responseDiv.hasChildNodes())  </wbr><wbr> </wbr><wbr> {
</wbr><wbr> </wbr><wbr>        responseDiv.removeChild(responseDiv.childNodes[ 0 ]);
</wbr><wbr> </wbr><wbr>    }
</wbr><wbr> </wbr><wbr>    
</wbr><wbr> </wbr><wbr>     var  responseText  =  document.createTextNode(xmlHttp.responseText);
</wbr><wbr> </wbr><wbr>    responseDiv.appendChild(responseText);
</wbr><wbr> </wbr><wbr>}
</wbr><wbr> </wbr><wbr>
</wbr><wbr> </wbr><wbr> </wbr><wbr> </wbr><wbr> function  getCarObject()  </wbr><wbr> </wbr><wbr> {
</wbr><wbr> </wbr><wbr>     return   new  Car( " Dodge " ,  " Coronet R/T " ,  1968 ,  " yellow " );
</wbr><wbr> </wbr><wbr>}
</wbr><wbr> </wbr><wbr>
</wbr><wbr> </wbr><wbr> </wbr><wbr> </wbr><wbr> function  Car(make, model, year, color)  </wbr><wbr> </wbr><wbr> {
</wbr><wbr> </wbr><wbr>     this .make  =  make;
</wbr><wbr> </wbr><wbr>     this .model  =  model;
</wbr><wbr> </wbr><wbr>     this .year  =  year;
</wbr><wbr> </wbr><wbr>     this .color  =  color;
</wbr><wbr> </wbr><wbr>}
</wbr><wbr> </wbr><wbr>
</wbr><wbr> </wbr><wbr> </ script >
</wbr><wbr> </wbr><wbr>

那个json.js就是我们下下来的包啦！<wbr style="LINE-HEIGHT: 1.3em"></wbr><wbr style="LINE-HEIGHT: 1.3em">
</wbr><wbr style="LINE-HEIGHT: 1.3em">
</wbr>我们再看看在<wbr>server端的处理</wbr><wbr></wbr><wbr style="LINE-HEIGHT: 1.3em"> </wbr><wbr style="LINE-HEIGHT: 1.3em">
</wbr></wbr><wbr style="LINE-HEIGHT: 1.3em"></wbr><wbr> </wbr><wbr> package  ajaxbook.chap3;
</wbr><wbr> </wbr><wbr>
</wbr><wbr> </wbr><wbr> import  java.io. * ;
</wbr><wbr> </wbr><wbr> import  java.net. * ;
</wbr><wbr> </wbr><wbr> import  java.text.ParseException;
</wbr><wbr> </wbr><wbr> import  javax.servlet. * ;
</wbr><wbr> </wbr><wbr> import  javax.servlet.http. * ;
</wbr><wbr> </wbr><wbr> import  org.json.JSONObject;
</wbr><wbr> </wbr><wbr>
</wbr><wbr> </wbr><wbr></wbr><wbr> </wbr><wbr> public   class  JSONExample  extends  HttpServlet  </wbr><wbr> </wbr><wbr> {
</wbr><wbr> </wbr><wbr>    
</wbr><wbr> </wbr><wbr>     protected   void  doPost(HttpServletRequest request, HttpServletResponse response)
</wbr><wbr> </wbr><wbr></wbr><wbr> </wbr><wbr>     throws  ServletException, IOException  </wbr><wbr> </wbr><wbr> {
</wbr><wbr> </wbr><wbr>        String json  =  readJSONStringFromRequestBody(request);
</wbr><wbr> </wbr><wbr>        
</wbr><wbr> </wbr><wbr>         // Use the JSON-Java binding library to create a JSON object in Java
</wbr><wbr> </wbr><wbr>         JSONObject jsonObject  =   null ;
</wbr><wbr> </wbr><wbr></wbr><wbr> </wbr><wbr>         try   </wbr><wbr> </wbr><wbr> {
</wbr><wbr> </wbr><wbr>            jsonObject  =   new  JSONObject(json);
</wbr><wbr> </wbr><wbr>        }
</wbr><wbr> </wbr><wbr> </wbr><wbr> </wbr><wbr>         catch (ParseException pe)  </wbr><wbr> </wbr><wbr> {
</wbr><wbr> </wbr><wbr>            System.out.println( " ParseException:  "   +  pe.toString());
</wbr><wbr> </wbr><wbr>        }
</wbr><wbr> </wbr><wbr>        
</wbr><wbr> </wbr><wbr>        String responseText  =   " You have a  "   +  jsonObject.getInt( " year " )  +   "   "
</wbr><wbr> </wbr><wbr>             +  jsonObject.getString( " make " )  +   "   "   +  jsonObject.getString( " model " )
</wbr><wbr> </wbr><wbr>             +   "   "   +   "  that is  "   +  jsonObject.getString( " color " )  +   "  in color. " ;
</wbr><wbr> </wbr><wbr>        
</wbr><wbr> </wbr><wbr>        response.setContentType( " text/xml " );
</wbr><wbr> </wbr><wbr>        response.getWriter().print(responseText);
</wbr><wbr> </wbr><wbr>    }
</wbr><wbr> </wbr><wbr>
</wbr><wbr> </wbr><wbr> </wbr><wbr> </wbr><wbr>     private  String readJSONStringFromRequestBody(HttpServletRequest request) </wbr><wbr> </wbr><wbr> {
</wbr><wbr> </wbr><wbr>        StringBuffer json  =   new  StringBuffer();
</wbr><wbr> </wbr><wbr>        String line  =   null ;
</wbr><wbr> </wbr><wbr></wbr><wbr> </wbr><wbr>         try   </wbr><wbr> </wbr><wbr> {
</wbr><wbr> </wbr><wbr>            BufferedReader reader  =  request.getReader();
</wbr><wbr> </wbr><wbr></wbr><wbr> </wbr><wbr>             while ((line  =  reader.readLine())  !=   null )  </wbr><wbr> </wbr><wbr> {
</wbr><wbr> </wbr><wbr>                json.append(line);
</wbr><wbr> </wbr><wbr>            }
</wbr><wbr> </wbr><wbr>        }
</wbr><wbr> </wbr><wbr> </wbr><wbr> </wbr><wbr>         catch (Exception e)  </wbr><wbr> </wbr><wbr> {
</wbr><wbr> </wbr><wbr>            System.out.println( " Error reading JSON string:  "   +  e.toString());
</wbr><wbr> </wbr><wbr>        }
</wbr><wbr> </wbr><wbr>         return  json.toString();
</wbr><wbr> </wbr><wbr>    }
</wbr><wbr> </wbr><wbr>}
</wbr><wbr> </wbr><wbr>

那个不起眼的org.json.JSONObject就是我们从JSON.ORG上下下来的JAVA包！它上面也有JSONObject的JAVA DOC所以不用担心不知道用啦！<wbr style="LINE-HEIGHT: 1.3em">

</wbr>OK到此全部搞定啦！<wbr style="LINE-HEIGHT: 1.3em">

可以看到这样比我们平时通过XHP传递一个DOM对象（通过连接串来创建XML串）要方便些！再说通过连接串来处理也不是生成XML数据结构的健壮技术！</wbr><wbr style="LINE-HEIGHT: 1.3em">

参考资料</wbr><wbr style="LINE-HEIGHT: 1.3em">：</wbr></wbr><wbr style="LINE-HEIGHT: 1.3em"> foundations-of-ajax<wbr style="LINE-HEIGHT: 1.3em">
                    </wbr></wbr><wbr style="LINE-HEIGHT: 1.3em"> www.json.org<wbr style="LINE-HEIGHT: 1.3em"> </wbr><wbr style="LINE-HEIGHT: 1.3em"></wbr></wbr><wbr>