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

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

今天看到了一个好东东，就是通过JSON(JavaScript Object Notation)向服务器发送数据。它是一种轻量级的数据交换格式，使用了类似于C语言家族的习惯。

JSON具有以下这些形式：

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

b: 数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。

c: 值（value）可以是双引号括起来的字符串（string）、数值(number)、 ture、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。

d: 字符串（string）是由双引号包围的任意数量Unicode字符的集合，使用反斜线转义。一个字符（character）即一个单独的字符串（character string）。

不多说了，关于JSON其实在 www.json.org 上讲得太好了！上面不但有每个JAVA的源文件，而且每个文件都有与之对应的JAVA DOC！还有不少实例！

我就选了json in java and json in javascript 二个链接 ,从这二个地方可以下到JSON的javascript包和Java包。

Javascript 包的应用如下：

首先创建一个符合json的对象，并通过XHP发送到sever


< script type = " text/javascript " src = " json.js " ></ script >


< script type = " text/javascript " >




var xmlHttp;






function createXMLHttpRequest()

{




if (window.ActiveXObject)

{


xmlHttp = new ActiveXObject( " Microsoft.XMLHTTP " );


}




else if (window.XMLHttpRequest)

{


xmlHttp = new XMLHttpRequest();


}


}






function doJSON()

{


var car = getCarObject();




// Use the JSON JavaScript library to stringify the Car object


var carAsJSON = JSON.stringify(car);


alert( " Car object as JSON:/n " + carAsJSON);




var url = " JSONExample?timeStamp= " + new Date().getTime();




createXMLHttpRequest();


xmlHttp.open( " POST " , url, true );


xmlHttp.onreadystatechange = handleStateChange;


xmlHttp.setRequestHeader( " Content-Type " , " application/x-www-form-urlencoded " );


xmlHttp.send(carAsJSON);


}






function handleStateChange()

{




if (xmlHttp.readyState == 4 )

{




if (xmlHttp.status == 200 )

{


parseResults();


}


}


}






function parseResults()

{


var responseDiv = document.getElementById( " serverResponse " );




if (responseDiv.hasChildNodes())

{


responseDiv.removeChild(responseDiv.childNodes[ 0 ]);


}




var responseText = document.createTextNode(xmlHttp.responseText);


responseDiv.appendChild(responseText);


}






function getCarObject()

{


return new Car( " Dodge " , " Coronet R/T " , 1968 , " yellow " );


}






function Car(make, model, year, color)

{


this .make = make;


this .model = model;


this .year = year;


this .color = color;


}




</ script >



那个json.js就是我们下下来的包啦！

我们再看看在server端的处理


package ajaxbook.chap3;




import java.io. * ;


import java.net. * ;


import java.text.ParseException;


import javax.servlet. * ;


import javax.servlet.http. * ;


import org.json.JSONObject;






public class JSONExample extends HttpServlet

{




protected void doPost(HttpServletRequest request, HttpServletResponse response)




throws ServletException, IOException

{


String json = readJSONStringFromRequestBody(request);




// Use the JSON-Java binding library to create a JSON object in Java


JSONObject jsonObject = null ;




try

{


jsonObject = new JSONObject(json);


}




catch (ParseException pe)

{


System.out.println( " ParseException: " + pe.toString());


}




String responseText = " You have a " + jsonObject.getInt( " year " ) + " "


+ jsonObject.getString( " make " ) + " " + jsonObject.getString( " model " )


+ " " + " that is " + jsonObject.getString( " color " ) + " in color. " ;




response.setContentType( " text/xml " );


response.getWriter().print(responseText);


}






private String readJSONStringFromRequestBody(HttpServletRequest request)

{


StringBuffer json = new StringBuffer();


String line = null ;




try

{


BufferedReader reader = request.getReader();




while ((line = reader.readLine()) != null )

{


json.append(line);


}


}




catch (Exception e)

{


System.out.println( " Error reading JSON string: " + e.toString());


}


return json.toString();


}


}



那个不起眼的org.json.JSONObject就是我们从JSON.ORG上下下来的JAVA包！它上面也有JSONObject的JAVA DOC所以不用担心不知道用啦！

OK到此全部搞定啦！

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

参考资料： foundations-of-ajax
www.json.org