好久没有做过关于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
相关链接:
Ajax---与服务器通信(请求参数作为XML发送)