Ajax原生请求和java对象转成json

\黑马程序员_超全面的JavaWeb视频教程vedio\黑马程序员_超全面的JavaWeb教程-源码笔记\JavaWeb视频教程_day23-资料源码\ajax_code\day23_3

本代码中有模拟 jquery里面的对Ajax的简化封装：

json2.jsp  Ajax原生请求

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'json2.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
<script type="text/javascript">
function createXMLHttpRequest() {
    try {
        return new XMLHttpRequest();//大多数浏览器
    } catch (e) {
        try {
            return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
        } catch (e) {
            try {
                return ActvieXObject("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);
        //4. 给xmlHttp的状态改变事件上添加监听
        xmlHttp.onreadystatechange = function() {
            //双重判断
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                var text = xmlHttp.responseText;//它是一个json串
                // 执行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>JSON之Hello World</h1>
<h3 id="h3"></h3>

  </body>
</html>

package cn.itcast.demo1;

import java.util.ArrayList;
import java.util.List;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import org.junit.Test;

/**
 * 演示JSON-LIB小工具　
 * @author cxf
 *
 */
public class Demo1 {
    /*
     * 当map来用
     */
    @Test
    public void fun1() {
        JSONObject map = new JSONObject();
        map.put("name", "zhangSan");
        map.put("age", 23);
        map.put("sex", "male");

        String s = map.toString();
        System.out.println(s);
    }

    /*
     * 当你已经有一个Person对象时，可以把Person转换成JSONObject对象
     */
    @Test
    public void fun2() {
        Person p = new Person("liSi", 32, "female");
        // 把对象转换成JSONObject类型
        JSONObject map = JSONObject.fromObject(p);
        System.out.println(map.toString());
    }

    /**
     * JSONArray
     */
    @Test
    public void fun3() {
        Person p1 = new Person("zhangSan", 23, "male");
        Person p2 = new Person("liSi", 32, "female");

        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("zhangSan", 23, "male");
        Person p2 = new Person("liSi", 32, "female");
        List<Person> list = new ArrayList<Person>();
        list.add(p1);
        list.add(p2);

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

// 创建request对象
function createXMLHttpRequest() {
    try {
        return new XMLHttpRequest();//大多数浏览器
    } catch (e) {
        try {
            return ActvieXObject("Msxml2.XMLHTTP");//IE6.0
        } catch (e) {
            try {
                return ActvieXObject("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) {//双重判断
            var data;
            // 获取服务器的响应数据，进行转换！
            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);
        }
    };
};

ajaxutils.js

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'json3.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
<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元素中 --%>
<button id="btn">点击这里</button>
<h1>显示自己封装的ajax小工具</h1>
<h3 id="h3"></h3>
  </body>
</html>

json3.jsp 调用简化的Ajax