Ajax Lesson 3

导读：
　　摘要：  Ajax Lesson3 与服务器交互 使用JSON封装传递数据. ——点击此处阅读全文

本文转自
http://blog.csdn.net/booby_fly

一.客户段主要代码

<script type="text/javascript" src=json2.js></script> 
<script type="text/javascript" language=JavaScript >
 var xmlhttp;
 function createHttpRequest() {
  alert("call create");
  if(window.ActiveObject)
  {
   xmlhttp=new ActiveObject("MicroSoft.XMLHTTP");
  }else if(window.XMLHttpRequest)
  {
   xmlhttp=new XMLHttpRequest(); 
  }
  try
  {
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }catch(ex)
  {
   alert("Error Create HttpRequest");
  } 
 }

 

 //Start JSon Request...
 function startJSonRequest()
 {
  createHttpRequest();
  var car=getCarObject();
  var carjson=JSON.stringify(car); 
   
  var url="JsonService?timeStamp="+new Date().getTime();
  xmlhttp.open("POST",url,true);
  xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
  xmlhttp.onreadystatechange=handleChange;
  xmlhttp.send(carjson); //传送car对象,使用json封装好了
  
 }
 //使用该函数创建一个Car类对象.
 function getCarObject()
 {
  return new Car("Dodge","Cornet R/T ",1968,"Yellow");
 
 }

//Car类

 function Car(make,model,year,color)
 {
  this.make=make;
  this.model=model;
  this.year=year;
  this.color=color;
 }
  function handleChange()
 {  
  if(xmlhttp.readystate==4)
  if(xmlhttp.status ==200)
  {
   parseResult();
  } 
 }
 function parseResult()
 {
  var div=document.getElementById("serverResponse");
  if(div.hasChildNodes())
  {
   div.removeChild(div.childNodes[0]);    
  }
  var responsetxt=document.createTextNode(xmlhttp.responseText);
  div.appendChild(responsetxt);
 }
</script>

二.服务器端主要代码

protected void doProcess(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  
  String json=readXMLFromRequestBody(request);
  JSONObject jsobObject=null;
  String responseText="";
  try
  {  
   jsobObject=new JSONObject(json);//通过字串生成对象后可
//使用Get Set设置值.
    responseText="You Hava a "+jsobObject.getInt("year")+"  "+jsobObject.getString("make")+" "+jsobObject.getString("model")+" "+
   jsobObject.getString("color");
  }catch(Exception ex)
  {
   ex.printStackTrace();
  }
  
  response.setContentType("text/xml");
  response.getWriter().println(responseText);
    
 }
 //从请求对象里读出提交过来的字串.命名不规范因为之前使用过
 private String readXMLFromRequestBody(HttpServletRequest request)
 {
  StringBuffer xml=new StringBuffer();
  String line=null;
  
  try
  {
   BufferedReader reader=request.getReader();
   while((line=reader.readLine())!=null)
   {
    xml.append(line);
   }    
  }catch(Exception ex)
  {
   ex.printStackTrace();
  }
    
  return xml.toString();
 }

三.实现步骤:

1.到JSON上(www.json.org)下载程序所用的到包.一个jar一个js文件 .放到工程中供调用.

2,注意js中创建一个对象的方法是用 new function实现的.

3.使用fiddler 查看网页传输数据可以看处详细的数据.JSON只是做了个2端的封装达到数据比XML少.实现方便的效果.其传输的实质不变.