ajax异步传输json格式的例子

●简介
Asynchronous Javascript And Xml
异步的javascript和xml
·使用XHTML和CSS的基于标准的表示技术
·使用DOM进行动态显示和交互
·使用XML和XSLT进行数据交换和处理
·使用XMLHTTPREQUEST进行异步数据检索：页面端javascript的浏览器内置对象
·使用Javascript将以上技术融合

与传统模式的对比
//1.取参数
//2.看参数是否有问题
//3.校验操作
//4.和传统应用不同之处，这一步需要将用户感兴趣的数据返回给页面端，而不是将新页面发送给用户。
/*
 * 如何实现简单的ajax应用
    1 创建XMLHttpRequest对象 
    2 打开和服务器的连接
    3 向服务器发送数据
    4 服务器发送响应到客户端
 */

●ajax   get方式提交数据
function ajaxFunction(){
   var xmlHttp;
   try{ // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e){
    try{// Internet Explorer
          xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
       }
     catch (e){
       try{
          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
       }
       catch (e){}
       }
    }

 return xmlHttp;
 }

 

window.οnlοad=function(){
  document.getElementById("ok").οnclick=function(){
   
   
   /*
    * 1 创建XMLHttpRequest对象
    */ 
       var xmlHttp=ajaxFunction();
   
   
   
   /*
    * 4 服务器发送响应到客户端
    *    * 在 Ajax 执行过程中，服务器会通知客户端当前的通信状态,这依靠更新 XMLHttpRequest 对象的 readyState 来实现
    *    * 每次 readyState 属性的改变都会触发 readystatechange事件
    *       readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
      * 0 代表未初始化。 还没有调用 open 方法
      * 1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
      * 2 代表已加载完毕。send 已被调用。请求已经开始
      * 3 代表交互中。服务器正在发送响应
      * 4 代表完成。响应发送完毕
    *   
    *    * 如果把readystatechange事件执行一个函数,每次readyState属性值的改变,都会引起该函数的执行
    *
    */
   xmlHttp.onreadystatechange=function(){
    alert(xmlHttp.readyState);
    alert(xmlHttp.status)
    if(xmlHttp.readyState==4){//响应发送完毕     
     if(xmlHttp.status==200||xmlHttp.status==304){  //服务器的状态
       //接收服务器发送过来的数据
        var data=xmlHttp.responseText;
        alert(data);
     }
    }
   }   
   
   /*
    * 2 打开和服务器的连接
    *  xmlHttp.open("get","../testServlet",true);
    *    * 参数1 :请求方法 get post
    *    * 参数2 :路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。
    *    * 参数1 :asynch：表示请求是否要异步传输，默认值为true(异步)
    */
    xmlHttp.open("get","../testServlet?timeStamp="+new Date().getTime()+"&a=8",true);
   
   
   /*
    * 3 向服务器发送数据
    *   xmlHttp.send(null)
    *    * 发送数据库
    *    * 若选用的是 GET 请求，则不会发送任何数据， 给 send 方法传递 null 即可：
    *       既是传递了参数,也获取不到
    */
   xmlHttp.send("b=9&c=10")
     
   
     }  
}
●ajax post方式提交数据
function ajaxFunction(){
   var xmlHttp;
   try{ // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e){
    try{// Internet Explorer
          xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
       }
     catch (e){
       try{
          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
       }
       catch (e){}
       }
    }

 return xmlHttp;
 }
 
 window.οnlοad=function(){
   document.getElementById("ok").οnclick=function(){
   
  //1
  var xmlHttp=ajaxFunction();
  
  //2
  xmlHttp.onreadystatechange=function(){
   if(xmlHttp.readyState==4){
    if(xmlHttp.status==200||xmlHttp.status==304){
      var data=xmlHttp.responseText;
      alert(data);
    }
   }
  }
  
  //3
  xmlHttp.open("post","../testServlet?timeStamp="+new Date().getTime()+"&a=9",true)
  
  /*
   * 如果请求方法是post:
   *  * 如果用 POST 请求向服务器发送数据，需要将 “Content-type” 的首部设置为
   *         “application/x-www-form-urlencoded”.它会告知服务器正在发送数据，并且数据已经符合URL编码了。
         *  *  该方法必须在open()之后才能调用
   */
  xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  
  //4如果请求方法是post,此时可以使用send方法发送数据
  xmlHttp.send("b=6&c=10");
  }
 
 
 
 }

●ajax的readyState属性和onreadystatechange方法
function ajaxFunction(){
   var xmlHttp;
   try{ // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e){
    try{// Internet Explorer
          xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
       }
     catch (e){
       try{
          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
       }
       catch (e){}
       }
    }
 return xmlHttp;
 }

 window.οnlοad=function(){
    //<input type="button" name="ok" id="ok" value="测试加载">
   document.getElementById("ok").οnclick=function(){
  var xmlHttp=ajaxFunction();
  xmlHttp.onreadystatechange=function(){
          if(xmlHttp.readyState==1){
     //<div id="divcheck"></div>
    document.getElementById("divcheck").innerHTML="<img src=loading33.gif width=80 height=80> 正在打开服务器的连接";
    alert("xxx");
    }else if(xmlHttp.readyState==2){
     document.getElementById("divcheck").innerHTML="<img src=loading33.gif width=80 height=80> 正在向服务器发送数据";
    alert("xxx");
    }else if(xmlHttp.readyState==3){
     document.getElementById("divcheck").innerHTML="<img src=loading33.gif width=80 height=80> 服务器正在处理数据";
    alert("xxx");
    }else if(xmlHttp.readyState==4){
     document.getElementById("divcheck").innerHTML="";
    }else{
        document.getElementById("divcheck").innerHTML="服务器连接失败,请检查网络重试";
    } 
   
  }
  xmlHttp.open("post","../testServlet?timeStamp="+new Date().getTime(),true)
  xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  xmlHttp.send();
   } 
 }

●几种json格式
  后台：servlet中用out.print("")返回符合json格式的内容
  使用工具可以将普通的list或者对象转换为json格式的字符串
  a.导包
    * json-lib-2.3-jdk15.jar   json类库的核心包
    * ezmorph-1.0.6.jar   能完成bean的复制等功能
    * morph-1.1.1.jar
    * morph-sandbox-1.1.1.jar  也是完成bean与bean之间的复制
    * commons-beanutils-1.8.3.jar(复制)
    * commons-collections-3.2.1.jar(对java.util的增强)
    * commons-lang-2.5.jar(对java.lang的增强)
    * commons-logging-1.1.1.jar(日志 )
  b.使用
    将list转为json格式 并去掉一些list中对象中的属性
      //设置生成的json格式不包含哪些属性
      JsonConfig config=new JsonConfig();
      config.setExcludes(new String[]{"pid"});
      //[{"pid":1,"pname":"吉林省"},{"pid":2,"pname":"辽宁省"},{"pid":3,"pname":"山东省"}]
      JSONArray jsonArray=JSONArray.fromObject(list,config);
      System.out.println(jsonArray.toString());
    将对象转为json格式 并去掉一些属性
      Province p=new Province(3,"山东省");
      JSONObject jsonObject=JSONObject.fromObject(p, config);
   System.out.println(jsonObject.toString());
  
 
  前台：用xmlHttp.responseText只能接受服务器返回的普通文本
        把符合json格式的字符串转换为json格式 var dataObj = eval("("+data+")");
●第一种
   /*
    * class Person{
    *   Integer id;
    *   String name;
    * }
    *
    * Person p=new Person();
    * p.id
    * p.name
    */
  
   /*
    * 表示一个对象:
    * 格式 {key1:value1,key2:value2......}
    */
   var people={"firstname":"zhang","lastname":"sanfeng","email":"sss@kenin.com"};  
●第二种
   /*
    * 表示多个对象:
    * 格式 [
    *        {key1:value1,key2:value2......},
    *        {key1:value1,key2:value2......}
    *      ]
    *    
    */
    var people=[
                {"firstname":"zhang1","lastname":"sanfeng1","email":"sss@kenin1.com"}, 
  {"firstname":"zhang2","lastname":"sanfeng2","email":"sss@kenin2.com"}
  ];
●第三种
   /*
    * 表示多个对象:
    * 格式{key:[
    *          {key1:value1,key2:value2......},
    *          {key1:value1,key2:value2......}
    *          ]
    *     }
    *    
    */
    var people={"programs":
              [
                {"firstname":"zhang1","lastname":"sanfeng1","email":"sss@kenin1.com"}, 
       {"firstname":"zhang2","lastname":"sanfeng2","email":"sss@kenin2.com"}
        ]
  };
●第四种
   /*
    * 表示多个对象:
    * 格式{key1:[
    *        {key1:value1,key2:value2......},
    *        {key1:value1,key2:value2......}
    *       ],
    *       key2:[
    *        {key1:value1,key2:value2......},
    *        {key1:value1,key2:value2......}
    *       ],
    *       key3:[
    *        {key1:value1,key2:value2......},
    *        {key1:value1,key2:value2......}
    *       ],
    *     }
    *    
    */
    var people={"programs1":
              [
                {"firstname":"zhang11","lastname":"sanfeng11","email":"sss@kenin11.com"}, 
       {"firstname":"zhang12","lastname":"sanfeng12","email":"sss@kenin12.com"}
        ],
     "programs2":
              [
                {"firstname":"zhang21","lastname":"sanfeng21","email":"sss@kenin21.com"}, 
       {"firstname":"zhang22","lastname":"sanfeng22","email":"sss@kenin22.com"}
        ],
     "programs3":
              [
                {"firstname":"zhang31","lastname":"sanfeng31","email":"sss@kenin31.com"}, 
       {"firstname":"zhang32","lastname":"sanfeng32","email":"sss@kenin32.com"}
        ]
     };
●第五种
    var people={"username":"黎明",
                 "sex":"male",
     "tel":{"call":"13455","phone":"110"},
     "address":[
                 {"city":"beijing","street":"一街"},
                 {"city":"changchun","street":"金川街"}
         ]
               };

●对象转json
List<Province> list=new ArrayList<Province>();
  list.add(p1);
  list.add(p2);
  list.add(p3);

  //设置生成的json格式不包含哪些属性
  JsonConfig config=new JsonConfig();
  config.setExcludes(new String[]{"pid"});
  
  
  //[{"pid":1,"pname":"吉林省"},{"pid":2,"pname":"辽宁省"},{"pid":3,"pname":"山东省"}]
  JSONArray jsonArray=JSONArray.fromObject(list,config);