Ajax

一、Ajax开发步骤:

1.得到XMLHttpRequest对象。

var xmlhttp=null;
if (window.XMLHttpRequest)
{// code for all new browsers
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5 and IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

View Code

2.注册回调函数 xmlhttp.onreadystatechange=function(){};

3.open 只是用于设置请求方式以及url,它不发送请求。
4.send 它是用于发送请求的。send(null);null代表没有参数如果有参数可以写成:"username=tom&password=123"。
5.在回调函数中处理数据
5.1.XMLHttpRequest对象有一个属性 readyState，它代表的是XMLHttpRequest对象的状态。
0).代表XMLHttpRequest对象创建
1).open操作
2).send操作
3).接收到了响应数据，但是只有响应头，正文还没有接收。
4).所有http响应接收完成。

5.2.status 由服务器返回的 HTTP 状态代码，如 200 表示成功。

5.3.在回调函数中可以通过以下方式获取服务器返回的数据。1.responseText 2.responseXML

二、Ajax实例1：

<script type="text/javascript">

    //第一步:得到XMLHttpRequest对象.
    var xmlhttp = null;

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest(); //针对于现在的浏览器包括IE7以上版本
    } else if (window.ActiveXObject) {
        //针对于IE5,IE6版本
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    //2.设置回调函数
    xmlhttp.onreadystatechange=function(){
        
        //5.处理响应数据  当信息全部返回，并且是成功
        if(xmlhttp.readyState==4&&xmlhttp.status==200){
            
            alert(xmlhttp.responseText);
        }
    };
    
    //3.open
    xmlhttp.open("GET","http://localhost/day23_3/ajax1");
    
    //4.发送请求 send
    xmlhttp.send(null);
</script>

View Code

三、关于ajax操作中请求参数的设置问题:

1.对于get请求方式，参数设置
直接在url后面拼接例如:"${pageContext.request.contextPath}/ajax2?name=tom"
2.对于post请求方式，参数设置
xmlhttp.open("POST","${pageContext.request.contextPath}/ajax2");
xmlhttp.send("name=tom");
注意:如果是post请求方式，还需要设置一个http请求头。xmlhttp.setRequestHeader("","");
例如: xmlhttp.open("POST","${pageContext.request.contextPath}/ajax2");
xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
xmlhttp.send("name=tom");

四、Ajax实例2：

版本1： 1.创建一个Product类

package cn.itcast.domain;

public class Product {

    private int id;
    private String name;
    private double price;

    private String type;

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }

    public Product() {
        super();
    }

    public Product(int id, String name, double price) {
        super();
        this.id = id;
        this.name = name;
        this.price = price;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public double getPrice() {
        return price;
    }

    public void setPrice(double price) {
        this.price = price;
    }

}

View Code

2.创建ajax.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>ajax开发---显示商品信息</title>

<script type="text/javascript"
    src="${pageContext.request.contextPath}/my.js"></script>

<script type="text/javascript">
    window.onload = function() {
        //得到id=t的文本框
        var p = document.getElementById("p");

        p.onclick = function() {

            //第一步:得到XMLHttpRequest对象.
            var xmlhttp = getXmlHttpRequest();
            //2.设置回调函数
            xmlhttp.onreadystatechange = function() {

                //5.处理响应数据  当信息全部返回，并且是成功
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                    var msg = xmlhttp.responseText;

                    document.getElementById("d").innerHTML = msg;

                }
            };

            //post请求方式，参数设置
            xmlhttp.open("GET", "${pageContext.request.contextPath}/ajax4");

            xmlhttp.send(null);
        };
    };
</script>

</head>

<body>

    <a href="javascript:void(0)" id="p">显示商品信息</a>

    <div id="d"></div>
</body>
</html>

View Code

3.在AjaxServlet中将List<Product>中的数据，手动拼接成了html代码，写回到浏览器端。

public class AjaxServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        List<Product> ps = new ArrayList<Product>();
        ps.add(new Product(1, "洗衣机", 1800));
        ps.add(new Product(2, "电视机", 3800));
        ps.add(new Product(3, "空调", 5800));

        PrintWriter out = response.getWriter();

        StringBuilder builder = new StringBuilder();

        builder.append("<table border='1'><tr><td>商品编号</td><td>商品名称</td><td>商品价格</td></tr>");
        for (Product p : ps) {
        builder.append("<tr><td>" + p.getId() + "</td><td>" + p.getName()
                    + "</td><td>" + p.getPrice() + "</td></tr>");
        }

        builder.append("</table>");

        out.print(builder.toString());
        out.flush();
        out.close();

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }

}

View Code

版本2： 1.创建一个product.jsp页面，在页面上去组装table,直接将数据返回了。

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


<table border='1'>
    <tr>
        <td>商品编号</td>
        <td>商品名称</td>
        <td>商品价格</td>
    </tr>
    <c:forEach items="${ps}" var="p">
        <tr>
            <td>${p.id }</td>
            <td>${p.name }</td>
            <td>${p.price }</td>
        </tr>
    </c:forEach>
</table>

View Code

2.AjaxServlet

public class AjaxServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        List<Product> ps = new ArrayList<Product>();
        ps.add(new Product(1, "洗衣机", 1800));
        ps.add(new Product(2, "电视机", 3800));
        ps.add(new Product(3, "空调", 5800));

        request.setAttribute("ps", ps);

        request.getRequestDispatcher("/product.jsp").forward(request, response);

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }

}

View Code

版本3：在服务器端得到数据，只将要显示的内容返回，而不返回html代码，而html代码的拼接，在浏览器端完成-引入Json。

1.创建ajax.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>ajax开发---显示商品信息(json)</title>

<script type="text/javascript"
    src="${pageContext.request.contextPath}/my.js"></script>

<script type="text/javascript">
    window.onload = function() {
        //得到id=t的文本框
        var p = document.getElementById("p");

        p.onclick = function() {

            //第一步:得到XMLHttpRequest对象.
            var xmlhttp = getXmlHttpRequest();
            //2.设置回调函数
            xmlhttp.onreadystatechange = function() {

                //5.处理响应数据  当信息全部返回，并且是成功
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                    var json = eval(xmlhttp.responseText);
                    
                    var msg="<table border='1'><tr><td>商品编号</td><td>商品名称</td><td>商品价格</td></tr>";
                    
                    for(var i=0;i<json.length;i++){
                        msg+="<tr><td>"+json[i].id+"</td><td>"+json[i].name+"</td><td>"+json[i].price+"</td></tr>";
                    }
                    msg+="</table>";
                    
                    document.getElementById("d").innerHTML=msg;
                    
                    
                    
                }
            };

            //post请求方式，参数设置
            xmlhttp.open("GET", "${pageContext.request.contextPath}/ajax5");

            xmlhttp.send(null);
        };
    };
</script>

</head>

<body>

    <a href="javascript:void(0)" id="p">显示商品信息</a>

    <div id="d"></div>
</body>
</html>

View Code

2.创建AjaxServlet

public class Ajax5Servlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=utf-8");
        List<Product> ps = new ArrayList<Product>();
        ps.add(new Product(1, "洗衣机", 1800));
        ps.add(new Product(2, "电视机", 3800));
        ps.add(new Product(3, "空调", 5800));

        // 返回的是json数据
        PrintWriter out = response.getWriter();

        String json = JSONArray.fromObject(ps).toString();
        out.print(json);

        out.flush();
        out.close();
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }

}

View Code

五、Json的使用

1.导包(6个包)

2.将java对象转换成json

2.1.对于数组，List集合，要想转换成json:JSONArray.fromObject(java对象); ["value1","value2"]

2.2 对于javaBean，Map : JSONObject.fromObject(javaBean对象); {name1:value1,name2:value2}

对于json数据，它只有两种格式 1.[值1,值2,...] ------>这就是javascript中的数组 2.{name:value,....} ---->就是javascript中的对象。

但是这两种格式可以嵌套. [{},{},{}] {name:[],name:[]}

3.如果javaBean中有一个属性，不想生成在json中，怎样处理?

sonConfig config = new JsonConfig();
config.setExcludes(new String[] { "type" });
JSONArray.fromObject(ps, config).toString();

View Code

4.实例

public class JsonLibTest {

    // 将数组转换成json
    @Test
    public void fun1() {
        String[] st = { "aaa", "bbb", "ccc" };
        String json = JSONArray.fromObject(st).toString();

        System.out.println(json); // ["aaa","bbb","ccc"]
    }

    // 将List集合转换成json
    @Test
    public void fun2() {
        List<String> list = new ArrayList<String>();
        list.add("111");
        list.add("222");
        list.add("333");

        String json = JSONArray.fromObject(list).toString();

        System.out.println(json); // ["111","222","333"]
    }

    // 将一个javaBean转换成json
    @Test
    public void fun3() {
        Product p = new Product(1, "电冰箱", 1800);
        String json = JSONObject.fromObject(p).toString();

        System.out.println(json); // {"id":1,"name":"电冰箱","price":1800}
    }

    // 如果List<Product>
    @Test
    public void fun4() {
        List<Product> ps = new ArrayList<Product>();
        ps.add(new Product(1, "洗衣机", 1800));
        ps.add(new Product(2, "电视机", 3800));
        ps.add(new Product(3, "空调", 5800));

        JsonConfig config = new JsonConfig();
        config.setExcludes(new String[] { "type" });

        String json = JSONArray.fromObject(ps, config).toString();

        System.out.println(json);
    }

    // map集合转换成json
    @Test
    public void fun5() {
        Map<String, String> map = new HashMap<String, String>();
        map.put("aaa", "1111");
        map.put("bbb", "222");
        System.out.println(JSONObject.fromObject(map).toString());
    }

    // 将json转换成java
    @Test
    public void fun6() {
        Product p = new Product(1, "电冰箱", 1800);
        JSONObject jsonObj = JSONObject.fromObject(p);

        // 将jsonObj在转换成java对象
        Product pp= (Product) JSONObject.toBean(jsonObj,Product.class);
        
        System.out.println(pp);
    }
}

View Code

六、Ajax操作中服务器端返回xml处理

XMHttpRequest.resposneXML;----->得到的是一个Document对象.

操作：可以自己将xml文件中的内容取出来，写回到浏览器端。也可以请求转发到一个xml文件，将这个文件信息写回到浏览器端.

注意response.setContextType("text/xml;charset=utf-8");

问题:如果没有xml文件，我们的数据是从数据库查找到，想要将其以xml格式返回怎样处理?可以使用xml插件处理 xstream，它可以在java对象与xml之间做转换.

xstream使用:

1.导包 2个.

2.将java对象转换成xml

XStream xs=new XStream();
String xml=xs.toXML(java对象);

View Code

问题:生成的xml中的名称是类的全名?

两种方式:
1.编码实现  xs.alias("person", Person.class);
2.使用注解(Annotation)
   @XStreamAlias(别名) 对类和变量设置别名
   @XStreamAsAttribute  设置变量生成属性
   @XStreamOmitField  设置变量 不生成到XML
   @XStreamImplicit(itemFieldName = “hobbies”) 设置集合类型变量 别名
   使注解生效 
   xStream.autodetectAnnotations(true);

View Code

实例：1.创建ajax.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>ajax开发---xml返回</title>

<script type="text/javascript"
    src="${pageContext.request.contextPath}/my.js"></script>

<script type="text/javascript">
    window.onload = function() {
        //得到id=t的文本框
        var btn = document.getElementById("btn");

        btn.onclick = function() {

            //第一步:得到XMLHttpRequest对象.
            var xmlhttp = getXmlHttpRequest();
            //2.设置回调函数
            xmlhttp.onreadystatechange = function() {

                //5.处理响应数据  当信息全部返回，并且是成功
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                    var xml = xmlhttp.responseXML;
                    
                    var div=document.getElementById("content");
                    
                    var persons=xml.getElementsByTagName("person");
                    
                    for(var i=0;i<persons.length;i++){
                        
                        var id=persons[i].getElementsByTagName("id")[0].innerHTML;

                        var name=persons[i].getElementsByTagName("name")[0].innerHTML;

                        var age=persons[i].getElementsByTagName("age")[0].innerHTML;
                        
                        div.innerHTML+="id:"+id+"&nbsp;name:"+name+"&nbsp;age:"+age+"<br>";
                        
                    }
                    
                }
            };

            //post请求方式，参数设置
            xmlhttp.open("GET", "${pageContext.request.contextPath}/ajax7");

            xmlhttp.send(null);
        };
    };
</script>

</head>

<body>
    <input type="button" value="接收xml" id="btn">
    
    <div id="content">
    </div>
</body>
</html>

View Code

2.创建AjaxServlet

public class Ajax7Servlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/xml;charset=utf-8");

        List<Person> ps = new ArrayList<Person>();
        ps.add(new Person(1, "tom", 20));
        ps.add(new Person(2, "fox", 30));

        XStream xs = new XStream();

        xs.autodetectAnnotations(true);
        String xml = xs.toXML(ps);

        response.getWriter().write(xml);
        response.getWriter().close();

    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }

}

View Code

Ajax的实例：

两个实体类：Province.java

@XStreamAlias("province")
public class Province {

    private String name;

    @XStreamImplicit
    private List<City> citys;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public List<City> getCitys() {
        return citys;
    }

    public void setCitys(List<City> citys) {
        this.citys = citys;
    }

}

View Code

City.java

@XStreamAlias("city")
public class City {

    private String name;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

}

View Code

省市级联动 XML方式

Ajax.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>ajax开发---xml返回</title>

<script type="text/javascript"
    src="${pageContext.request.contextPath}/my.js"></script>

<script type="text/javascript">
    var xml; //声明全局，因为要在多个函数中使用.
    window.onload = function() {
        //得到id=t的文本框

        //第一步:得到XMLHttpRequest对象.
        var xmlhttp = getXmlHttpRequest();
        //2.设置回调函数
        xmlhttp.onreadystatechange = function() {

            //5.处理响应数据  当信息全部返回，并且是成功
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                xml = xmlhttp.responseXML; //得到的数据将province中信息添加

                //得到xml是一个Document对象，它代表的是服务器端返回的xml.

                //将xml中所有province的name子元素中的文本获取到.
                var ps = xml.getElementsByTagName("province");

                for ( var i = 0; i < ps.length; i++) {
                    //得到每一个province元素下的第一个name子元素
                    var nameElement = ps[i].getElementsByTagName("name")[0];
                    //得到name元素中的文本信息,就是省份名称
                    var pname = nameElement.firstChild.nodeValue;
                    //创建option标签，将其添加到省份下拉框中.
                    var option = document.createElement("option");
                    option.text = pname;
                    //将创建的option添加到省份下拉框中
                    document.getElementById("province").add(option);
                }

            }
        };

        //post请求方式，参数设置
        xmlhttp.open("GET", "${pageContext.request.contextPath}/ajax1");

        xmlhttp.send(null);

    };

    //创建一个函数，用于向城市下拉框中添加值.
    function fillCity() {        
        
        var province=document.getElementById("province");//省份下拉框
        var city=document.getElementById("city");//城市下拉框.
        
        //每一次向城市中添加信息时，将信息重置。
        city.innerHTML="<option>--请选择城市--</option>";
        
        //1.得到选中的省份名称.        
        var pname=province.options[province.selectedIndex].text;
        
        var ps = xml.getElementsByTagName("province");

        for ( var i = 0; i < ps.length; i++) {
            //得到每一个province元素下的第一个name子元素
            var nameElement = ps[i].getElementsByTagName("name")[0];
            //得到name元素中的文本信息,就是省份名称
            var pElementName = (nameElement.firstChild.nodeValue);
            if(pname==pElementName){
                //判断选择的省份名称与xml文件中的省份名称一致.
                var citys=ps[i].getElementsByTagName("city");
                //得到所有省份的城市
                for(var j=0;j<citys.length;j++){
                    //得到所有的城市名称
                    var cname=citys[j].getElementsByTagName("name")[0].firstChild.nodeValue;
                    //创建option添加到城市下拉框中
                    var option = document.createElement("option");
                    option.text = cname;
                    
                    city.add(option);
                }
            }
        }

    }
</script>

</head>

<body>
    <select id="province" onchange="fillCity()">
        <option>--请选择省份--</option>
    </select>
    <select id="city">
        <option>--请选择城市--</option>
    </select>
</body>
</html>

View Code

AjaxServlet.java

public class AjaxServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/xml;charset=utf-8");
        // 1.得到数据
        List<Province> ps = new ArrayList<Province>();

        Province p1 = new Province();
        p1.setName("黑龙江");
        List<City> citys1 = new ArrayList<City>();
        City city1 = new City();
        city1.setName("哈尔滨");
        City city11 = new City();
        city11.setName("齐齐哈尔");
        City city111 = new City();
        city111.setName("大庆");
        citys1.add(city1);
        citys1.add(city11);
        citys1.add(city111);
        
        p1.setCitys(citys1);

        Province p2 = new Province();
        p2.setName("吉林");
        List<City> citys2 = new ArrayList<City>();
        City city2 = new City();
        city2.setName("长春");
        City city22 = new City();
        city22.setName("吉林");
        City city222 = new City();
        city222.setName("四平");
        citys2.add(city2);
        citys2.add(city22);
        citys2.add(city222);

        p2.setCitys(citys2);

        ps.add(p1);
        ps.add(p2);

        // 将ps转换成xml
        XStream xs = new XStream();
        xs.autodetectAnnotations(true);
        String xml = xs.toXML(ps);

        response.getWriter().write(xml);
        response.getWriter().close();
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }

}

View Code

省市级联动 Json方式

Ajax.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>ajax开发---json返回</title>

<script type="text/javascript"
    src="${pageContext.request.contextPath}/my.js"></script>

<script type="text/javascript">
    var jsonObj; //声明全局，因为要在多个函数中使用.
    window.onload = function() {

        var province = document.getElementById("province");//省份下拉框
        //第一步:得到XMLHttpRequest对象.
        var xmlhttp = getXmlHttpRequest();
        //2.设置回调函数
        xmlhttp.onreadystatechange = function() {

            //5.处理响应数据  当信息全部返回，并且是成功
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                jsonObj = eval("(" + xmlhttp.responseText + ")");

                //得到省份名称

                for ( var i = 0; i < jsonObj.length; i++) {
                    var pname = jsonObj[i].name;

                    var option = document.createElement("option");
                    option.text = pname;

                    province.add(option);
                }

            }
        };

        //post请求方式，参数设置
        xmlhttp.open("GET", "${pageContext.request.contextPath}/ajax2");

        xmlhttp.send(null);

    };

    //创建一个函数，用于向城市下拉框中添加值.
    function fillCity() {

        var province = document.getElementById("province");//省份下拉框
        var city = document.getElementById("city");//城市下拉框.

        //每一次向城市中添加信息时，将信息重置。
        city.innerHTML = "<option>--请选择城市--</option>";

        var pname = province.options[province.selectedIndex].text;

        for ( var i = 0; i < jsonObj.length; i++) {
            var pElementName = jsonObj[i].name;

            if (pname == pElementName) {
                var citys = jsonObj[i].citys;

                for ( var j = 0; j < citys.length; j++) {

                    var cname = citys[j].name;

                    var option = document.createElement("option");
                    option.text = cname;

                    city.add(option);

                }
            }
        }

    }
</script>

</head>

<body>
    <select id="province" onchange="fillCity()">
        <option>--请选择省份--</option>
    </select>
    <select id="city">
        <option>--请选择城市--</option>
    </select>
</body>
</html>

View Code

AjaxServlet.java

public class AjaxServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/xml;charset=utf-8");
        // 1.得到数据
        List<Province> ps = new ArrayList<Province>();

        Province p1 = new Province();
        p1.setName("黑龙江");
        List<City> citys1 = new ArrayList<City>();
        City city1 = new City();
        city1.setName("哈尔滨");
        City city11 = new City();
        city11.setName("齐齐哈尔");
        City city111 = new City();
        city111.setName("大庆");
        citys1.add(city1);
        citys1.add(city11);
        citys1.add(city111);

        p1.setCitys(citys1);

        Province p2 = new Province();
        p2.setName("吉林");
        List<City> citys2 = new ArrayList<City>();
        City city2 = new City();
        city2.setName("长春");
        City city22 = new City();
        city22.setName("吉林");
        City city222 = new City();
        city222.setName("四平");
        citys2.add(city2);
        citys2.add(city22);
        citys2.add(city222);

        p2.setCitys(citys2);

        ps.add(p1);
        ps.add(p2);

        // 转换成json
        String json = JSONArray.fromObject(ps).toString();

        response.getWriter().write(json);
        response.getWriter().close();
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doGet(request, response);
    }

}

View Code

posted @ 2017-06-25 09:40 ABO-阿博阅读(144) 评论(0) 编辑收藏举报

刷新页面返回顶部

ABO

月满亏，水满溢，人满亡 !!!

Ajax

公告