一、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数据是由键值对构成的
-
键用引号(单双都行)引起来，也可以不使用引号
-
值的类型：
- 数字（整数或浮点数）
- 字符串（在双引号中）
- 逻辑值（true 或 false）
- 数组（在方括号中）{“persons”:[{},{}]}
- 对象（在花括号中） {“address”:{“province”：“陕西”…}}
- 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！
