AjaxJava基础——JSON

一、JSON定义

于百度百科中之分解:JSON(JavaScript Object Notation)
是一模一样种轻量级的数据交换格式。它基于JavaScript的一个子集。
JSON采用了独立为言语的文本格式,JSON简单说就算是javascript中之目标同反复组,所以这有限栽结构就是目标及数组两种植结构,通过就点儿种结构得以代表各种繁复的构造。

1、对象:

对象在js中意味着为“{}”括起来的情,数据结构为
{key:value,key:value,…}的键值对的结构,在面向对象的言语中,key为目标的特性,value为对应的属于性值,所以格外轻掌握,取值方法吗
对象.key 获取属性值,这个属于性值的种类可以是
数字、字符串、数组、对象几种植。

2、数组:

数组在js中凡中括号“[]”括起来的内容,数据结构为
[“java”,”javascript”,”vb”,…],取值方式同拥有语言中同,使用索引获取,字段值的类可以是
数字、字符串、数组、对象几种。简单地游说,JSON 可以用 JavaScript
对象中意味着的均等组数易为字符串,然后就是足以以函数之间轻松地传递者字符串,或者以异步应用程序中将字符串从
Web
客户机传递给劳务器端程序。这个字符串看起有少古怪,但是JavaScript很轻解释其。

先前学了之jquery 遍历   Dictionary
风格的数组(其实就是一个javascript对象)

var stu={ "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" }
    $.each(stu,function(key,value){
        alert(key+"---"+value);
    })


    var people = 
      {
          "演员": 
          [ 
              { "firstName": "Brett", "lastName":"要被取值的", "email": "aaaa" },
                { "firstName": "Jason", "lastName":"Hunter", "email": "bbbb" },
                { "firstName": "Elliotte", "lastName":"Harold", "email": "cccc" }
            ],

            "作者": [
            { "firstName": "Isaac", "lastName": "Asimov", "genre": "science fiction" },
            { "firstName": "Tad", "lastName": "Williams", "genre": "fantasy" },
            { "firstName": "Frank", "lastName": "Peretti", "genre": "christian fiction" }
            ],

            "配乐": [
            { "firstName": "Eric", "lastName": "Clapton", "instrument": "guitar" },
            { "firstName": "Sergei", "lastName": "Rachmaninoff", "instrument": "piano" }
            ] 

        }

        //这里有3 个key,每个key对应的value 又是一个数组,数组中的每个元素,又是一个对象(对象由键值对组成)
        //alert(people.演员[0].lastName) ; 可以取出 "要被取值的" 这个数组

//例子 用JSON 传输数据

        //客户端
        $(function(){
            $("button").click(function(){
                $.ajax({
                    url:"JSONTestServlet",  
                    type:"post",
                    data:{userName:$("#userName").val()},
                    dataType:"JSON",   //千万不要忘了指定返回数据的格式
                    success:function(user){
                        $("#divresult").append("用户id:"+user.id +"<br />");
                        $("#divresult").append("用户名:"+user.userName +"<br />");
                        $("#divresult").append("用户密码:"+user.password +"<br />");
                        $("#divresult").append("用户备注:"+user.note +"<br />");
                    }
                });
            });
        });



        //服务端
     public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

            //这里,要把 user转JSON格式的字符串返回
            String str=" {\"id\":\"1\",\"userName\":\"张三\",\"password\":\"admin\" ,\"note\":\"这是备注\"} ";
            response.setContentType("text/html;charset=utf-8");
            response.getWriter().print(str);    
        }

二、JSONlib 的使用(两步) 

1) 导入 JSON lib的包

commons-beanutils-1.8.2.jar

commons-collections-3.2.1.jar

commons-lang-2.5.jar

commons-logging-1.1.1.jar

ezmorph-1.0.6.jar

JSON-lib-2.4-jdk15.jar

2) 使用

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
            String userName=request.getParameter("userName");
            UserInfo user= UserDao.getUserByName(userName);
            //使用JSONlib提供的功能,将一个类对象转成JSON格式的字符串
            JSONObject JSONObj=JSONObject.fromObject(user);
            System.out.println(JSONObj);

            response.setContentType("text/html;charset=utf-8");
            response.getWriter().print(JSONObj.toString());    
        }
    }

//例子,如何使用 JSONlib 返回一组数组
     //服务端
         public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
            List<UserInfo> userList=UserDao.getAllUser();

            //如果要转一个对象, 用JSONObject,转多个对象(List),用 JSONArray 
            JSONArray JSONObj= JSONArray.fromObject(userList);

            response.setContentType("text/html;charset=utf-8" );
            response.getWriter().print(JSONObj);
     }

     //客户端
         $(function(){
            $("button").click(function(){
                $.ajax({
                    url:"JSONArrayTestServlet",  
                    type:"post",
                    dataType:"JSON",  
                    success:function(userList){

                    //取出数据的第一种方式
                    /*     for(var i=0;i<userList.length;i++){
                            alert(userList[i].id);
                            var trStr="<tr><td>"+userList[i].id+"</td><td>"+userList[i].userName+
                            "</td><td>"+userList[i].password+"</td><td>"+userList[i].note+"</td></tr>"; 
                            $("#table1").append(trStr);
                        } */


                        //使用 $.each() 的方式
                        $.each(userList,function(key,user){
                             var trStr="<tr><td>"+user.id+"</td><td>"+user.userName+
                            "</td><td>"+user.password+"</td><td>"+user.note+"</td></tr>"; 
                            $("#table1").append(trStr); 
                        });
                    }
                });
            });
        });

//例子 将JSON字符串反序列化为 java对象
  String JSONStr= "{\"id\":99,\"userName\":\"张三\",\"password\":\"admin\",\"note\":\"备注\",\"aihao\":\"球类\"}" ;
  JSONObject JSONObj=JSONObject.fromObject(JSONStr);

//注意,UserInfo 类,一定要有一个无参的构造函数
  UserInfo user=(UserInfo)JSONObject.toBean(JSONObj,UserInfo.class);

其三、Ajax联动菜单

    //请求发起页面
        $(function(){
            $("#bigCate").change(function(){
                //取出自己的被选中的option 的 value (它应该是小分类对应的parentId)
                var parentId=this.value ;

                //根据这个parentId去数据库查询,
                $.ajax({
                    url:"CateAjaxServlet",
                    cache:false,
                    data:{parentId:parentId},
                    dataType:"JSON",
                    success:function(cateList){
                        //把取务端返回的小分类的列表,拼到小分类对应的下拉框中,但要先清空一下
                        $("#smallCate").empty();
                        $.each(cateList,function(key,cateInfo){
                            var optionStr="<option value='"+cateInfo.id+"'>"+cateInfo.cateName+"</option>";
                            $("#smallCate").append(optionStr);
                        });

                    }
                });    
            });
        });

        <body>
      <%
          List<CateInfo> bigCateList=new CateDao().getCateList(0);
          request.setAttribute("bigCateList", bigCateList);
       %>
       <form action="xxx" method="post">
           大分类:
           <select id="bigCate" name="bigCate" >
               <c:forEach var="cateInfo" items="${ bigCateList}" >
                   <option value="${cateInfo.id }">${cateInfo.cateName }</option>
               </c:forEach>
           </select>

           小分类:
           <select id="smallCate" name="smallCate" >
           </select>

            打酱油的:
           <input type="text" />
       </form>
   </body>

   //服务端
   public void doPost(HttpServletRequest request, HttpServletResponse response)
         throws ServletException, IOException {
   //根据传上来的parentID 查询子分类
         int parentId = Integer.parseInt(request.getParameter("parentId"));
         List<CateInfo> cateList=new  CateDao().getCateList(parentId);

         JSONArray JSONObj=JSONArray.fromObject(cateList);

         response.setContentType("text/html;charset=utf-8" );
         response.getWriter().print(JSONObj);
         }

季、关于返回数据类型 为 JSONp 的动静

因为同源策略,Ajax  的请求是不许跨域访问的,如果准备访问其他服务器上的url
会出现如下错误

1.已经挡交叉源请求:同源策略不同意读取
http://10.10.10.15:8080/JSONPDemo/TestServlet 上之长距离资源。

釜底抽薪方式:可以用资源移动至同一的域名及还是启用 CORS 来解决是题材。

2.就挡跨源请求:同源策略禁止读取位于
http://169.254.246.250:8080/web1/WebAServlet 的远距离资源。(原因:CORS
头缺少 ‘Access-Control-Allow-Origin’)。

同源策略是依靠阻止代码获得或转从其它一个域名下取的文件或者信息。也就是说我们的求地址必须同当下网站的地方一样。同源策略通过隔断来落实对资源的维护。这个策略的历史特别漫长从Netscape
Navigator 2.0时代就开始了。

解决措施:解决此界定的一个相对简便易行的道尽管是当服务器端发送请求,服务器充当一个到第三正值资源的代办中就。虽然是因此大规模而这艺术也不够利索。

别一个道尽管是行使框架(frames),将第三在站点的资源蕴藏进来,但是包含进来的资源同如果面临同源策略的范围。有一个分外抢眼的法就是在页面被运用动态代码元素,代码的源指向服务地方并当大团结的代码中加载数据。当这些代码加载执行之上,同源策略就是不见面起及限制。但是若代码试图下载文件的时候实施或者会砸,幸运的是,我们得以以JSON(JavaScript
Object Notation)来改进之动用。

//JSONp的使用
<script type="text/javascript">
    $(function(){
    $("button").click(function(){
        $.ajax({
            url:"http://169.254.246.250:8080/web1/WebAServlet",
            dataType:"JSONp",       //这里使用 JSONp这个格式
            JSONp:"JSONpcallback",  //这个名字是给别人用的
            success:function(data){
                $("#div1").append(data.id+"<br />");
                $("#div1").append(data.userName+"<br />");
                $("#div1").append(data.password+"<br />");
                $("#div1").append(data.note+"<br />");
                        }
                    });
                });
            });
</script>


//被访问者的服务端
public void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {

        String JSONp=request.getParameter("JSONpcallback");
        String JSONStr= "{\"id\":99,\"userName\":\"张三\",\"password\":\"admin\",\"note\":\"备注\",\"aihao\":\"球类\"}" ;
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().print( JSONp+"("+   JSONStr  +")" );     
}

相关文章