1.AJAX_概念
同步请求服务器有什么特点?
浏览器必须等待服务器响应成功后,才能进行其他的操作
异步请求服务器有什么特点?
浏览器不需要等待服务器响应,就能进行其他的操作
目的:
提升用户体验度
2.AJAX_实现_原生JS方式1(了解)
XmlHttpRequest:
open(method,url,async)三个参数分别代表什么?
send()方法 不同的请求方式有什么不同?
3.AJAX_实现_原生JS方式2(了解)
客户端如何知道服务器什么时候成功响应了?
4.AJAX_实现_JQuery实现方式_ajax()
$.ajax({
type:请求方式
url:异步请求的资源路径
data:给服务器传递的参数
success:服务器响应成功后回调的函数
error:请求失败后的回调函数
dataType:告诉jQuery,用什么格式去解析服务器响应的数据;
});
/*入口函数*/
$(function () {
// 获取到id为btn的元素,给他添加单击事件,点击后发送异步请求
$("#btn").click(function () {
// 使用$.ajax发送异步请求
$.ajax({
/*$.ajax发送异步请求的时候,需要写键值对的形式,中间使用,进行分割*/
url:"ajaxServletDemo2", // 请求的资源路径
// type:"get", // 请求资源的请求方式、get方式,请求参数在请求行中
type:"POST", // 请求资源的请求方式、post方式,请求参数在请求体中
// data:"name=zhangsan&age=18", // 请求参数。有俩种表示方式
data:{"name":"zhangsan","age":18}, // 请求参数,使用json键值对的方式
success:function (data) { // 请求成功后调用的回调函数, data 参数为服务器响应的参数
alert(data);
},
error:function () {
alert("出错了"); // 请求出错后,调用的回调函数
},
datatype:"text" // 告诉JQuery用什么方式去解析服务器发送过来的数据
});
});
})
5.AJAX_实现_JQuery实现方式_ajax()_其他键值
error:?请求失败后的回调函数
dataType:?告诉jQuery,用什么格式去解析服务器响应的数据;
6.AJAX_实现_JQuery实现方式_get&post
$.get(url,data,callback,type);
$.post(url,data,callback,type);
$.get()和 $.post()两种请求方式使用有什么区别?
**********************************
使用jQuery发送ajax请求,如果传递的参数格式是:{键:值}格式,那么jQuery会自动把这种格式转换成满足http协议要求的:键=值&键=值;
如果传递的参数本身格式就是满足http协议的键=值&键=值,那么原样发送
1.JSON_概念
什么是JSON?
javascript对象表示形式(键值对);
JSON可以用来干什么?
存储和交换交换数据(替换xml)
更小,更易解析的格式;
{"username":"张三","age":"123"}
张三
123
2.JSON_语法_定义
json的键值对中键不用引号引起来可不可以;
可以!
json键值对中 值可以是哪些类型?
字符串;
数字;
布尔值;
对象;
数组;
null;
*****************
{}对应对象
[]对应数组;
json定义的标准格式!!!!!
{键:值}
键原则上都需要用引号引起来;
值:
字符串用引号;
数字、对象、布尔值、数组、null都不需要用引号
var aaa = {"username":"张三"};---json对象
var bbb = "{\"username\":\"张三\"}";----json字符串
3.JSON_语法_值的获取
如何获取json对象指定键的值?
json对象.键名;
json对象[“键名”] ******* 第二种方式需要谨记[ ]括号中加" " 号
如何获取json数组对象指定索引处的值?
json数组对象[索引]
如何遍历一个json对象?
for(var key in json对象){
alert(key+":"+json对象[key]); // 因为此时的key为一个
}
// 定义json对象
// json的键为字符串,值可以为 字符串,布尔值 ,数字,对象{},数组[]
// 值为字符串 值为字符串 值为布尔值 值为数字
var user = {"username":"zhangsan","password":"123","gender":true,"age":18};
// alert(user);
// 获取json对象的值
// alert(user.username); // 通过json对象.键名调用 可以获取到json中的数据
// alert(user["password"]); // 通过json对象["键名"] 调用,也可以获取到json指定key对应的值
// json 数组,数组中存储着对象
var users = [{"username":"zhangsan","password":"123","gender":true,"age":18},
{"username":"lisi","password":"234","gender":false,"age":20},
{"username":"wangwu","password":"564","gender":false,"age":38}
];
// 获取数组中的json数据。通过索引获取 json对象用{}包裹,json数组用[]包裹
var username = users[0].username;
var password = users[0].password;
var gender = users[0].gender;
// alert(username);
// alert(password);
// alert(gender);
/* // 遍历 user对象
for (var u in user){
var element = user[u]; // 因为 user.u 相当于 user."username";
alert(element); // 所以只能使用第二种方式获取到json对象的每一个值 即user[u]
}*/
// json 数组遍历
// 获取到每一个user 对象
for (var i = 0; i < users.length; i++) {
// 获取到每一个user对象的每个属性
for (var user in users[i]){
alert(users[i][user]);
}
}
4.JSON_解析器Jackson_java对象转json
使用Jackson的步骤?
1.需要导入Jackson相关jar包;
2.创建核心对象 ObjectMapper()
3.调用ObjectMapper的方法完成转换;
ObjectMapper:
String writeValueAsString(Object obj);
把obj对象转换成json字符串;
void writeValue(File file,Object obj);
把obj对象转换成json字符串,并且把字符串写入到file文件中;
void writeValue(Writer writer,Object obj);
把obj对象转换成json字符串,并且把字符串写入到writer流中;
void writeValue(OutputStream out,Object obj);
把obj对象转换成json字符串,并且把字符串写入到out流中;
// 告诉tomcat使用utf-8来解析客户端发送的请求参数以及从数据库查询到的数据格式
request.setCharacterEncoding("utf-8");
// 告诉客户端使用什么样的格式解析服务器响应的数据格式
response.setContentType("application/json;charset=utf-8");
// 创建user对象
User user = new User();
user.setName("张三");
user.setAge(18);
user.setGender("男");
// 创建ObjectMapper 对象映射对象。
ObjectMapper om = new ObjectMapper();
// 调用 writeValueAsString 方法将java对象转换为json字符串
/* String value = om.writeValueAsString(user);
System.out.println(value);
response.getWriter().write(value);*/
// writeValue 把user对象转换成json字符串,并且把字符串写入到writer流中;
om.writeValue(response.getWriter(),user);
5.JSON_解析器Jackson_java对象转json_注解
@JsonIgnore注解的作用?
在转换的时候,让某个成员变量的值不要显示到json字符串中
@JsonFormat注解的作用
在转换的时候,让某个成员变量按照指定的格式进行转换
// 使用JsonIgnore 注解可以指定某个属性不被显示到json字符串中
//@JsonIgnore
// 使用JsonFormat 在转换的时候,让某个成员变量按照指定的格式进行转换
@JsonFormat(pattern = “yyyy-MM-dd”)
private Date date;
6.JSON_解析器Jackson_java对象转json_List&Map
ArrayList对象转换成Json字符串对应的是什么?[ ]
Map对象转换成Json字符串对应的是什么?{}
7.JSON_解析器Jackson_json转Java对象(了解)
如何把json字符串转换成java对象?
readValue(json字符串);
***************************************
当发送ajax异步请求到服务器,请求到一个json字符串,不能直接使用,我们需要把json字符串转换成json对象才能使用:
1.在发送异步请求时:
$.(url,data,success,"json");//告诉jQuery,用json格式解析服务器响应的数据
2.在服务器端,使用:
resp.setContentType("application/json;charset=utf-8");//告诉客户端,使用json格式解析我响应的数据;
8.案例_校验用户名是否存在
服务器响应回来的json字符串,如何转换成一个json对象?
servlet
@WebServlet("/ajaxServletTest")
public class AjaxServletTest extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("application/json;charset=utf-8");
// 获取用户的异步请求参数
String username = request.getParameter("username");
Person person = new Person();
// 判断如果用户名为zhangsan 返回一个person对象。 值为 true & "这个有人用了,换一个把"
if (username != "") {
if ("zhangsan".equals(username)) {
person.setMsg("这个有人用了,换一个把");
person.setFlag(true);
} else {
person.setMsg("你特娘的真是个天才,可以用");
person.setFlag(false);
}
}else {
person.setMsg("请输入用户名");
person.setFlag(true);
}
// 创建ObjectMapper 对象,给客户端进行数据响应
ObjectMapper o = new ObjectMapper();
o.writeValue(response.getWriter(), person);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
html
注册校验
用户名:"text" id="username" placeholder="请输入用户名"> "msg">
密码:"text" id="password" placeholder="请输入密码">
"button" id="btn" value="注册">