AjaxJava基础——JSON

数组在js中是中括号“[]”括起来的内容,数据结构为
[“java”,”javascript”,”vb”,…],取值方式和享有语言中平等,使用索引获取,字段值的花色能够是
数字、字符串、数组、对象两种。不难地说,JSON 能够将 JavaScript
对象中象征的1组数据转换为字符串,然后就能够在函数之间轻松地传递这么些字符串,可能在异步应用程序少将字符串从
Web
客户机传递给服务器端程序。那几个字符串看起来有个别古怪,不过JavaScript很简单解释它。

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);

2) 使用

commons-logging-1.1.1.jar

同源策略是指阻止代码获得只怕转移从另三个域名下取得的文书大概信息。也正是说大家的请求地址必须和日前网址的地点壹样。同源策略通过切断来贯彻对能源的尊崇。这几个政策的野史丰盛漫长从Netscape
Navigator 二.0一时半刻就起来了。

开头学过的jquery 遍历   Dictionary
风格的数组(其实就是一个javascript对象)

commons-lang-2.5.jar

commons-beanutils-1.8.2.jar

1) 导入 JSON lib的包

3、Ajax联合浮动菜单

消除措施:能够将能源移动到均等的域名上还是启用 CO福特ExplorerS 来化解那么些题材。

一、JSON定义

ezmorph-1.0.6.jar

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);    
        }

JSON-lib-2.4-jdk15.jar

1、对象:

二.已阻止跨源请求:同源策略禁止读取位于
http://169.254.246.250:8080/web1/WebAServlet 的长途财富。(原因:COLANDS
头紧缺 ‘Access-Control-Allow-Origin’)。

因为同源策略,Ajax  的请求是不许跨域访问的,倘使打算访问其余服务器上的url
会出现如下错误

2、数组:

//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  +")" );     
}

commons-collections-3.2.1.jar

二、JSONlib 的使用(两步) 

对象在js中意味为“{}”括起来的始末,数据结构为
{key:value,key:value,…}的键值对的社团,在面向对象的言语中,key为目的的属性,value为对应的属性值,所以很不难通晓,取值方法为
对象.key 获取属性值,那一个属性值的类型能够是
数字、字符串、数组、对象二种。

    //请求发起页面
        $(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);
         }

另1个方法正是应用框架(frames),将第3方站点的财富蕴藏进来,不过包蕴进来的能源1样要受到同源策略的限量。有3个很抢眼的方法就是在页面中央银行使动态代码元素,代码的源指向劳动地点并在祥和的代码中加载数据。当那些代码加载执行的时候,同源策略就不会起到限制。可是假如代码试图下载文件的时候实施只怕会退步,幸运的是,大家能够采纳JSON(JavaScript
Object Notation)来改革这一个应用。

在百度周全中的解释:JSON(JavaScript Object Notation)
是1种轻量级的数据交流格式。它基于JavaScript的二个子集。
JSON选用完全部独用立于言语的文本格式,JSON不难说就是javascript中的对象和数组,所以那二种结构就是指标和数组三种结构,通过那二种结构得以表示各类复杂的结构。

一.已阻止交叉源请求:同源策略分歧意读取
http://10.10.10.15:8080/JSONPDemo/TestServlet 上的中距离财富。

化解措施:消除那些界定的一个相对简便易行的艺术便是在劳动器端发送请求,服务器充当三个到达第一方财富的代理中继。即便是用大规模然而那一个艺术却不够灵活。

4、关于重回数据类型 为 JSONp 的景况

相关文章