《JavaEE》第九周day3学习笔记-AJAX、JSON+

一、AJAX

（一）AJAX概念

---

异步的JavaScript和XML：ASynchronous JavaScript And XML，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

（二）特点

---

ajax主要是实现页面和web服务器之间数据的异步传输。

• 采用ajax的页面，可以实现页面的局部更新，而不是更新整个页面
• 发起请求后，用户可以进行页面上的其他操作
• 客户端和服务端间只传递需要的数据，效率高
• 并且Ajax引擎在客户端运行，承担了一部分本由服务器承担的工作，减少了高并发环境的服务器负载
• 提升用户的体验

（三）AJAX实现方式

---

1.JavaScript实现

        //1.创建核心对象
        var xmlhttp;
        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2. 建立连接
        xmlhttp.open("GET","ajaxServlet?username=tom",true);
        //3.发送请求
        xmlhttp.send();
        //4.接受并处理来自服务器的响应结果
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                var responseText = xmlhttp.responseText;
                alert(responseText);
            }
        }

2.jQuery实现
（1）$.ajax()
创建语法：$.ajax({键值对});

        $.ajax({
            url:"ajaxServlet" ,
            type:"POST" ,
            data:{"username":"Tom","age":18},
            dataType:"text",//xml/html/script/json/jsonp
            success:function (data) {
                alert(data);
            },
            error:function () {
                alert("AJAX Error！")
            }
        });

（2）$.get()
创建语法：$.get(url, [data], [callback], [type]);

        $.get(
            "ajaxServlet",
            {username:"Tom"},
            function(data){
                alert(data);
            }
        );

（3）$.post()
创建语法：$.post(url, [data], [callback], [type]);

$.post(
            "ajaxServlet",
            {username:"Tom"},
            function(data){
                alert(data);
            }
        );

二、JSON+

（一）概念

---

JavaScript对象简谱： JavaScript Object Notation，多用于存储和交换文本信息，比XML更小、更快、更易解析。

Person p = new Person();
		p.setName("张三");
		p.setAge(23);
		p.setGender("男");
var p = {"name":"张三","age":23,"gender":"男"};

（二）语法

---

1.基本规则

• 数据在名称/值对中：json数据是由键值对构成的

• 键用引号(单双都行)引起来，也可以不使用引号

• 值的类型：

  1. 数字（整数或浮点数）
  2. 字符串（在双引号中）
  3. 逻辑值（true 或 false）
  4. 数组（在方括号中）{“persons”:[{},{}]}
  5. 对象（在花括号中） {“address”:{“province”：“陕西”…}}
  6. null

• 数据由逗号分隔：多个键值对由逗号分隔

• 花括号保存对象：使用{}定义json 格式

• 方括号保存数组：[]

2.创建范例

        //1.第一种直接使用{}
        var person1={name:"zhangsan",age:23,sex:"nan"};
        //2,第二种[]里面嵌套中括号
        var person2=[
            {name:"zhangsan",age:23,sex:"男"},
            {name:"zhangsan",age:23,sex:"男"},
            {name:"zhangsan",age:23,sex:"男"}
        ];
        //3,第二种{}里面嵌套大括号
        var person3={"persons":
                [
                    {name:"zhangsan",age:23,sex:"男"},
                    {name:"zhangsan",age:23,sex:"男"},
                    {name:"zhangsan",age:23,sex:"男"}
                ]
        };

（三）JSON与Java对象的转换

---

常见的解析器：Jsonlib，Gson，fastjson，jackson
以jackson为例（前三项见前面的博客），需导入jackson依赖包。
1.JSON→Java

public void test2() throws IOException {
        String json = "{\"name\":\"zhangsan\",\"age\":23,\"sex\":\"男\"}";
        ObjectMapper objectMapper = new ObjectMapper();
        Person person = objectMapper.readValue(json, Person.class);
        System.out.println(person);
}

2.Java→JSON
jackson支持注解：@JsonIgnore（排除属性）、@JsonFormat（格式化属性）

public void test() throws Exception {
        Person p  = new Person(“zhangsan”，“23”，“男”);
        ObjectMapper objectMapper = new ObjectMapper();
        String json = objectMapper.writeValueAsString(p);//核心方法！参数支持Collection框架的多种对象
        objectMapper.writeValue(new File("person.txt"),p);//写出至文件
}

Tip：案例思路

---

1.异步校验用户名
前端页面元素失去焦点→获取value→启用AJAX→将value传递至servlet→后端进行判断（关联数据库）→ response.getWriter().write(返回内容)→前端回调函数 success:function(data){}进行相关操作

2.异步查询、操作数据库表
绑定拉取列表按钮的click事件→清屏→启用AJAX→传递target（提供servlet进行方法调用判断）→后端拉取列表（druid线程池+dbutils操作数据库返回Bean的list）→jackson解析成JSON→前端获取后遍历值→通过append插入table→绑定操作数据库表按钮的click事件→抓取id值→通过AJAX传递id值→后端通过id操作数据库表→返回操作返回值至前端→执行回调函数。
注意，通过string方式append时需要注意""符号的使用，按钮事件的绑定需要在按钮生成后进行，如果在回调函数中使用this会指向success或error！