|
Ajax 概念 Asynchronous JavaScript And XML 异步的JavaScript和XML
异步和同步 同步：客户端发出请求后，必须等待服务器的响应才能进行下一步操作 异步：客户端发出请求后，可以执行其它的操作，等到服务器返回响应消息时再对响应消息进行处理
Ajax的特点： 传统的网页如果需要更新某一部分的内容，则需要重新载入整个网页。 Ajax可以实现无需加载整个网页，就可以更新部分的网页
Ajax的实现方式 原生的JS实现方式（了解） //1.创建核心对象 var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome,Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=newActiveXObject("Microsoft.XMLHTTP"); }
//2. 建立连接 /* 参数： 1. 请求方式：GET、POST *get方式，请求参数在URL后边拼接。send方法为空参 * post方式，请求参数在send方法中定义 2. 请求的URL： 3. 同步或异步请求：true（异步）或false（同步）
*/ xmlhttp.open("GET","ajaxServlet?username=tom",true);
//3.发送请求 xmlhttp.send();
//4.接受并处理来自服务器的响应结果 //获取方式 ：xmlhttp.responseText //什么时候获取？当服务器响应成功后再获取
//当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。 xmlhttp.onreadystatechange=function() { //判断readyState就绪状态是否为4，判断status响应状态码是否为200 if (xmlhttp.readyState==4&& xmlhttp.status==200) { //获取服务器的响应结果 var responseText =xmlhttp.responseText; alert(responseText); } }
Jquery的实现方式（三种方式）
$.ajax({key1:value1, key2:value2…}) 传入键值对，来指定请求的url、请求参数、请求方式等参数 | 键名 | 意义 | | url | 请求资源的url | | data | 请求参数
通常写法：
data{"k1":"v1","k2":"v2"} | | type | 请求方式：get、post | | success | 成功获得响应后执行的回调函数 | | error | 响应失败时调用的回调函数 | | dataType | 响应消息的数据类型
默认情况下，浏览器会根据响应的mime类型来解析 |
$.ajax({
//首先传入一些可选参数
url:"ajaxServlet",//请求的url
type:"POST",//请求方式
//传递数据，方式1：
//data:"name=lhp&age=22",
//传递数据的方式2，json方式：
data:{
"name":"lhp",
"age":"22"
},
//成功获得服务器响应后的回调函数,参数代表了服务器响应的数据
success:function (data) {
alert(data);
},
// 接收服务器响应出错时的回调函数
error:function () {
alert("出错啦！");
},
//指定接收的响应数据类型
//默认情况下，浏览器会根据响应的mime类型来解析
dataType:"text"
});
$.get(url,[data],[callback],[dateType])
这种方式不用给键值对，直接传参数 | 参数名 | 意义 | | url | 请求资源的url | | data | 传递的请求参数，使用json对象的方式来存储数据 | | callback | 成功获得服务器响应后执行的回调函数 | | dataType | 响应数据的类型 |
$.get("ajaxServlet",{name:"lhp",age:"22"},function(data) {
alert(data);
},"text");
$.post(url,[data],[callback],[dateType])
同上，区别在于$.get()使用get方式，$.post()使用post方式发送ajax请求
JSON
概念
JavaScript Object Notation
JavaScript对象表示法
多用于存储和交换文本信息
JSON比XML更小、更快、更容易解析
数据类型与定义方式
定义方式：
用大括号表示这是一个json对象，大括号内用键值对形式定义对象属性
用中括号表示一个数组
var person = {
//json的数据类型
"name":"lhp",//字符串类型
"age":22,//数字类型，可以是整型和浮点型
"gender":true,//布尔类型
"hobby":["lol","animation","comic"],//数组类型
"aaa":null,//null类型
"city":{"name":"chengdu","province":"sichuan","country":"china"}//json对象类型
//数组和对象可以嵌套
}
JSON对象的遍历：获取JSON对象的所有键对应的所有值
for in 循环
for (var key in Obj){
Obj[key]
}
Obj代表要遍历的JSON对象，key代表遍历中的属性名，使用Obj[key]来得到属性值
代码
JSON数据和Java对象的相互转换
JSON解析器
常见的解析器：Jsonlib，Gson，fastjson，jackson
JSON转为Java对象
使用步骤
- 导入jar包
- 创建ObjectMapper对象
- 调用转换的方法
方法名
| 说明
| T readValue(String jsonStr, Class<T> calss)
| jsonStr:待转换的json字符串
clss：目标Java对象的class对象
|
Java对象转为JSON
使用步骤
- 导入jar包
- 创建ObjectMapper对象
- 调用转换的方法
转换方法
方法名
| 说明
| writeValue(参数1，Object o)
| 参数1 1.传入File对象：将转换的json对象写入文件中 2.传入Writer:将转换的json对象写入字符输出流中 3.传入OutputStream；将转换的json对象写入字节输出流中 Object：待转换的Java对象 | String writeValueAsString(Object o)
| 传入待转换的Java对象，返回该对象的JSON数据字符串 |
jackson注解
一下两个注解是注解在Java对象的属性上的
@JsonIgnore：转换成json对象时，忽略此属性
@JsonFormat(pattern ="yyyy年MM月dd日"):该属性（通常为date类型）在转换为json键值对时，会被格式化。相当于使用了SimpleDateFormat
代码
JavaBean
public class Person {
private String name;
private int age;
private boolean gender;
// @JsonIgnore//转换成json对象时，忽略此属性
@JsonFormat(pattern = "yyyy年MM月dd日") //JsonFormat注解的pattern属性，相当于使用simpleDateFormat来格式化日期
private Date birthDay;
…省略构造方法和getter/setter
测试类
案例：检查用户名是否存在
需求：
用户名在输入框中输入了用户名后，当输入框失去焦点，就检查该用户名是否存在，并给出提示信息
步骤：
1.给输入框绑定失去焦点事件，失去焦点时发送ajax请求，请求参数为输入的用户名
2.在服务器端获取username，检查是否存在
3.返回结果
代码
前端代码
服务器端代码
| 
收藏
淘帖
踩
