javawebday62(json json-lib json工具类 ajaxutils.js

最新推荐文章于 2024-10-03 08:26:58 发布

转载最新推荐文章于 2024-10-03 08:26:58 发布 · 252 阅读

javaweb 专栏收录该内容

80 篇文章

订阅专栏

本文介绍了JSON的基础概念及其与XML的对比，展示了如何在JavaScript中使用JSON，并通过实例讲解了AJAX的应用，包括创建XMLHttpRequest对象及处理服务器响应。

JSON
1、json
    是js提供的一种数据交换格式
2、json的语法
    {}:是对象
        属性名必须使用双引号括起来。单引不行
        属性值：
            null
            数值
            字符串
            数组：使用[]括起来
            boolean值：true和false 
3、应用json
    var person = {"name":"zs","age":11,"sex":"male"}    

4、json和xml比较
    可读性：xml强
    解析难度：JSON本身就是js对象，简单的多
    流行度：XML已经流行多年，但在AJAX领域，JSON更受欢迎
var person={
    "name":"zs"
    "friend":[
        {"name":"ls","friends":[

        ]},
    ]
}

json-lib
1、是什么
    可以把javabean转换成json串
2、jar包

3、核心类
    JSONObject->Map
        toString();
        JSONObject map = JSONObject.fromObject(person);把对象转换成JSONObject对象
    JSONArray-->List
        toString();
        JSONArray jsonArray = JSONObject.fromObject(list);把list转换成JSONArray对象

<script type="text/javascript">
window.onload = function(){
    //var str = "{\"name\":\"zs\",\"age\":11,\"sex\":\"male\"}";//\是用来转义"
    //var person = eval("("+str+")");
    //var person = {"name":"zs","age":11,"sex":"male"};
    //alert(person.name+","+person.age+","+person.sex);
    var str = "1 + 2";
    var sum = eval("("+str+")");//执行 当作js
    alert(sum);

}

AServlet

public class AServlet extends HttpServlet {


    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        /*
         * 向客户端发送json串
         */
        String str="{\"name\":\"zs\",\"age\":11,\"sex\":\"male\"}";
        response.getWriter().print(str);
        System.out.println(str);
    }

}

<script type="text/javascript">
function createXMLHttpRequest(){
    try{
        return new XMLHttpRequest();//大多数浏览器
    }catch(e){
        try{
            return ActiveXObject("Msxml2.XMLHTTP");//IE6.0
        }catch(e){
            try{
                return ActiveXObject("Microsoft.XMLHTTP");//IE5.5及更早
            }catch(e){
                alert("什么浏览器？");
                throw e;
            }
        }
    }
}
window.onload = function(){
    //获取btn元素
    var btn = document.getElementById("btn");
    btn.onclick = function(){//给按钮的点击事件上添加监听
        //使用ajax得到服务器端响应，把结果显示到h3中
        //1、得到request
        var xmlHttp = createXMLHttpRequest();
        /*2、连接
        */
        xmlHttp.open("GET","<c:url value='/AServlet'/>",true);
        /*3、发送
        */
        xmlHttp.send(null); //get请求没有请求体，也要给出null，不然firefox可能不能发送
        //4、给xmlHttp的状态改变事件上添加监听
        xmlHttp.onreadystatechange = function(){
            //双重判断
            if(xmlHttp.readyState ==4 && xmlHttp.status ==200){
                var text = xmlHttp.responseText;//是一个json块
                var person = eval("("+text+")");
                var s = person.name+"," +person.age+","+person.sex;
                document.getElementById("h3").innerHTML = s;
            }
        }
    }

}
</script>
  </head>

  <body>
  <%--点击按钮后把服务器响应的数据显示到h3元素中 --%>
  <button id="btn">点击</button>
 <h1>hell word</h1>
  <h3 id="h3"></h3>
  </body>

/**
 * json-lib小工具 
 */
public class Demo1 {
    /*
     * 当map来用
     */
    @Test
    public void fun1(){
        JSONObject map = new JSONObject();
        map.put("name", "zs");
        map.put("age", 12);
        map.put("sex", "male");

        String s = map.toString();
        System.out.println(s);
    }
    /*
     * 当你已经有了一个Person对象时，可以把Person转换成JSONObject对象
     */
    @Test
    public void fun2(){
        Person p = new Person("ls",11,"female");
        //把对象转换成JSONObject类型
        JSONObject map = JSONObject.fromObject(p);
        System.out.println(map.toString());
    }
    /**
     * JSONArray
     */
    @Test
    public void fun3(){
        Person p1 = new Person("ls",11,"female");
        Person p2 = new Person("zs",16,"male");
        JSONArray list = new JSONArray();
        list.add(p1);
        list.add(p2);
        System.out.println(list.toString());
    }
    /**
     * 原来就有一个List，需要把List转换成JSONArray
     */
    @Test
    public void fun4(){
        Person p1 = new Person("ls",11,"female");
        Person p2 = new Person("zs",16,"male");
        List<Person> list = new ArrayList<Person>();
        list.add(p1);
        list.add(p2);

        System.out.println(JSONArray.fromObject(list).toString());
    }

}

<script type="text/javascript" src="<c:url value='ajax-lib/ajaxutils.js'/> "></script>
<script type= "text/javascript">
window.onload = function(){
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        /*
        1、ajax
        */
        ajax(
            {
                url:"<c:url value='/AServlet'/>",
                type:"json",
                callback:function(data){
                    document.getElementById("h3").innerHTML = data.name+","+data.age+","+data.sex;  
                }
            }
        );

    }
}
</script>
  </head>

  <body>
 <%--点击按钮后把服务器响应的数据显示到h3元素中 --%>
<h1>显示自己封装的</h1> 
 <button id="btn">点击</button>
 <h1>hell word</h1>
  <h3 id="h3"></h3>
  </body>

ajaxutils.js

//创建request对象
function createXMLHttpRequest(){
    try{
        return new XMLHttpRequest();//大多数浏览器
    }catch(e){
        try{
            return ActiveXObject("Msxml2.XMLHTTP");//IE6.0
        }catch(e){
            try{
                return ActiveXObject("Microsoft.XMLHTTP");//IE5.5及更早
            }catch(e){
                alert("什么浏览器？");
                throw e;
            }
        }
    }
}
/*
 *option对象有如下属性
 */

        /*请求方式 method,*/
        /*请求的url url,*/
        /*是否异步 asyn,*/
        /*请求体 params,*/
        /*回调方法 callback,*/
        /*服务器响应数据转换成什么类型 type*/

function ajax(option){
    /*
     * 1、得到xmlHttp
     */
    var xmlHttp = createXMLHttpRequest();
    /*
     * 2、打开连接
     */
    if(!option.method){//默认为GET请求
        option.method = "GET";
    }
    if(option.asyn == undefined){//默认为异步处理
        option.asyn = true;
    }
    xmlHttp.open(option.method,option.url,option.asyn);
    /*
     * 3、判断是否为POST
     */
    if("POST" ==option.method){
        xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    }
    /*
     * 4、发送请求
     */
    xmlHttp.send(option.params);
    /*
     * 5、注册监听
     */
    xmlHttp.onreadystatechange = function(){
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200){//双重判断
            //获取服务器的响应数据，进行转换
            if(!option.type){//如果type没有赋值，那么默认为文本
                data = xmlHttp.responseText;
            } else if(option.type=="xml"){
                data = xmlHttp.responseXML;
            } else if(option.type == "text"){
                data = xmlHttp.responseText;
            } else if(option.type="json"){
                var text = xmlHttp.responseText;
                data = eval("("+text+")");
            }
            //调用回调方法
            option.callback(data);
        }
    }
}