JSON： json.js需要到www.json.org網站上去下 json爲一種文本格式 是名/值對的集合 和xml差不多
但編碼比xml要簡短。如：var temp={"name":"tangjun","age",20} 要獲得數據可以temp.name
下面示例:(tomcat)
Java文件：PostData.java
package ajax;
import java.io.*;
import javax.servlet.ServletException;
import javax.servlet.http.*;
import net.sf.json.JSONObject;
public class PostData extends HttpServlet
{
private static final String CONTENT_TYPE = "text/html; charset=GBK";
public PostData()
{
}
public void init()
throws ServletException
{
}
public void doGet(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException
{
res.setContentType("text/html; charset=GBK");
StringBuffer data = new StringBuffer();
String temp = null;
try
{
req.setCharacterEncoding("UTF-8");
res.setCharacterEncoding("UTF-8");
BufferedReader reade = req.getReader();
while((temp = reade.readLine()) != null)
data.append(temp);
JSONObject jsonobj = new JSONObject(data.toString());
res.setContentType("text/xml");
res.getWriter().print((new StringBuilder()).append("你的註冊信息:姓名:").append(jsonobj.getString("name")).append(",年齡:").append(jsonobj.getInt("age")).append(",性別:").append(jsonobj.getString("sex")).append(",你喜歡的顏色:").append(jsonobj.getString("loveColor")).append(".").toString());
}
catch(Exception e)
{
System.out.println(e.toString());
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException
{
doGet(request, response);
}
public void destroy()
{
}
}
html文件：test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>動態查詢顯示結果</title>
<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()
{
createXMLHTTPRequest();
var url="postdata?timeStamp="+(new Date()).getTime();
var name=document.getElementById("name").value;
var age=document.getElementById("age").value;
var sex=document.getElementById("sex").value;
var loveColor=document.getElementById("loveColor").value;
if(name=="" || name==null)
{
name="唐俊";
}
if(age=="" || age==null)
{
age="20";
}
if(sex=="" || sex==null)
{
sex="男";
}
if(loveColor=="" || loveColor==null)
{
loveColor="藍色";
}
var carAsJson=JSON.stringify(new People(name,age,sex,loveColor));
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)
{
//alert(xmlHttp.responseText);
document.getElementById("selectdata").innerHTML=xmlHttp.responseText;
}
}
}
function People(name,age,sex,loveColor)
{
this.name=name;
this.age=age;
this.sex=sex;
this.loveColor=loveColor;
}
</script>
</head>
<body>
<form action="#">
<table>
<tr>
<td>姓名:</td>
<td>
<input type="text" name="name">
</td>
</tr>
<tr>
<td>年齡:</td>
<td>
<input type="text" name="age">
</td>
</tr>
<tr>
<td>性別:</td>
<td>
<input type="text" name="sex">
</td>
</tr>
<tr>
<td>你喜歡的顏色:</td>
<td>
<input type="text" name="loveColor">
</td>
</tr>
</table>
<input type="button" value="GetData" οnclick="doJson();"/>
<br>
<br>
<div id="selectdata"></div>
</form>
</body>
</html>