1、Ajax快速入门
1.1、AJAX介绍
-
AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。
-
本身不是一种新技术，而是多个技术综合。用于快速创建动态网页的技术。
-
一般的网页如果需要更新内容，必需重新加载个页面。
-
而 AJAX 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页 面的情况下，对网页的部分内容进行局部更新。
1.2、JQuery的GET方式实现AJAX
-
核心语法：$.get(url,[data],[callback],[type]);
- url：请求的资源路径。
- data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。
- callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。
- type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
-
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册</title> </head> <body> <form autocomplete="off"> 姓名：<input type="text" id="username"> <span id="uSpan"></span> <br> 密码：<input type="password" id="password"> <br> <input type="submit" value="注册"> </form> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> //1.为用户名绑定失去焦点事件 $("#username").blur(function () { let username = $("#username").val(); //2.jQuery的GET方式实现AJAX $.get( //请求的资源路径 "userServlet", //请求参数 "username=" + username, //回调函数 function (data) { //将响应的数据显示到span标签 $("#uSpan").html(data); }, //响应数据形式 "text" ); }); </script> </html>
1.3、JQuery的POST方式实现AJAX
-
核心语法：$.post(url,[data],[callback],[type]);
- url：请求的资源路径。
- data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。
- callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。
- type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
-
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册</title> </head> <body> <form autocomplete="off"> 姓名：<input type="text" id="username"> <span id="uSpan"></span> <br> 密码：<input type="password" id="password"> <br> <input type="submit" value="注册"> </form> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> //1.为用户名绑定失去焦点事件 $("#username").blur(function () { let username = $("#username").val(); //2.jQuery的POST方式实现AJAX $.post( //请求的资源路径 "userServlet", //请求参数 "username=" + username, //回调函数 function (data) { //将响应的数据显示到span标签 $("#uSpan").html(data); }, //响应数据形式 "text" ); }); </script> </html>
1.4、JQuery的通用方式实现AJAX
-
核心语法：$.ajax({name:value,name:value,…});
- url：请求的资源路径。
- async：是否异步请求，true-是，false-否 (默认是 true)。
- data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。
- type：请求方式，POST 或 GET (默认是 GET)。
- dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
- success：请求成功时调用的回调函数。
- error：请求失败时调用的回调函数。
-
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册</title> </head> <body> <form autocomplete="off"> 姓名：<input type="text" id="username"> <span id="uSpan"></span> <br> 密码：<input type="password" id="password"> <br> <input type="submit" value="注册"> </form> </body> <script src="js/jquery-3.3.1.min.js"></script> <script> //1.为用户名绑定失去焦点事件 $("#username").blur(function () { let username = $("#username").val(); //2.jQuery的通用方式实现AJAX $.ajax({ //请求资源路径 url:"userServletxxx", //是否异步 async:true, //请求参数 data:"username="+username, //请求方式 type:"POST", //数据形式 dataType:"text", //请求成功后调用的回调函数 success:function (data) { //将响应的数据显示到span标签 $("#uSpan").html(data); }, //请求失败后调用的回调函数 error:function () { alert("操作失败..."); } }); }); </script> </html>
1.5、小结
- **AJAX(Asynchronous JavaScript And XML)：**异步的 JavaScript 和 XML。
- 通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部 分内容进行局部更新。
- 同步和异步
- 同步：服务器端在处理过程中，无法进行其他操作。
- 异步：服务器端在处理过程中，可以进行其他操作。
- GET 方式实现：$.get();
- POST 方式实现：$.post();
- url：请求的资源路径。
- data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。
- callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。
- type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
- 通用方式实现：$.ajax();
- url：请求的资源路径。
- async：是否异步请求，true-是，false-否 (默认是 true)。
- data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。
- type：请求方式，POST 或 GET (默认是 GET)。
- dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
- success：请求成功时调用的回调函数。
- error：请求失败时调用的回调函数。
2、JSON的处理
2.1、JSON回顾
-
JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。
-
它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
-
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和生成，并有效的 提升网络传输效率。
-
创建格式
基本规则
据在名称/值对中：json数据是由键值对构成的
键用引号(单双都行)引起来，也可以不使用引号
值得取值类型：
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中） {“persons”:[{},{}]}
对象（在花括号中） {“address”:{“province”：“陕西”…}}
null
数据由逗号分隔：多个键值对由逗号分隔
花括号保存对象：使用{}定义json 格式
方括号保存数组：[]//1.定义基本格式 var person = {"name": "张三", age: 23, 'gender': true}; //2.嵌套格式 {}———> [] var persons = { "persons": [ {"name": "张三", "age": 23, "gender": true}, {"name": "李四", "age": 24, "gender": true}, {"name": "王五", "age": 25, "gender": false} ] }; //3.嵌套格式 []———> {} var ps = [{"name": "张三", "age": 23, "gender": true}, {"name": "李四", "age": 24, "gender": true}, {"name": "王五", "age": 25, "gender": false}]; -
获取数据
-
json对象.键名
-
json对象[“键名”]
-
数组对象[索引]
-
遍历
//1.定义基本格式 var person = {"name": "张三", age: 23, 'gender': true}; //获取name的值 //var name = person.name; var name = person["name"]; // alert(name); //alert(person); //2.嵌套格式 {}———> [] var persons = { "persons": [ {"name": "张三", "age": 23, "gender": true}, {"name": "李四", "age": 24, "gender": true}, {"name": "王五", "age": 25, "gender": false} ] }; // alert(persons); //获取王五值 var name1 = persons.persons[2].name; // alert(name1); //2.嵌套格式 []———> {} var ps = [{"name": "张三", "age": 23, "gender": true}, {"name": "李四", "age": 24, "gender": true}, {"name": "王五", "age": 25, "gender": false}]; //获取李四值 //alert(ps); alert(ps[1].name); --------------------------------------------------------------------------------------------------------------- //1.定义基本格式 var person = {"name": "张三", age: 23, 'gender': true}; var ps = [{"name": "张三", "age": 23, "gender": true}, {"name": "李四", "age": 24, "gender": true}, {"name": "王五", "age": 25, "gender": false}]; //获取person对象中所有的键和值 //for in 循环 /* for(var key in person){ //这样的方式获取不行。因为相当于 person."name" //alert(key + ":" + person.key); alert(key+":"+person[key]); }*/ //获取ps中的所有值 for (var i = 0; i < ps.length; i++) { var p = ps[i]; for(var key in p){ alert(key+":"+p[key]); } }
-
2.2、JSON转换工具的介绍
-
我们除了可以在 JavaScript 中来使用 JSON 以外，在 JAVA 中同样也可以使用 JSON。
-
JSON 的转换工具是通过 JAVA 封装好的一些 JAR 工具包。
-
可以将 JAVA 对象或集合转换成 JSON 格式的字符串，也可以将 JSON 格式的字符串转成 JAVA 对象。
-
Jackson：开源免费的 JSON 转换工具，SpringMVC 转换默认使用 Jackson。
-
- 导入 jar 包。
- 创建核心对象。
- 调用方法完成转换。
-
-
常用类
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-96ul9qPX-1649529711412)(C:\Users\Administrator\Desktop\二期\WEB阶段\12_Ajax与JSON\笔记\Ajax与JSON.assets\image-20210622185527151.png)]
-
ObjectMapper常用方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E2dzz370-1649529711412)(C:\Users\Administrator\Desktop\二期\WEB阶段\12_Ajax与JSON\笔记\Ajax与JSON.assets\image-20210622185601206.png)]
2.3、JSON转换练习
-
对象转 JSON, JSON 转对象。
/* JSON转换工具的使用 */ public class ObjectMapperTest { private ObjectMapper mapper = new ObjectMapper(); /* 1.User对象转json, json转User对象 json字符串 = {"name":"张三","age":23} user对象 = User{name='张三', age=23} */ @Test public void test01() throws Exception{ //User对象转json User user = new User("张三",23); String json = mapper.writeValueAsString(user); System.out.println("json字符串：" + json); //json转User对象 User user2 = mapper.readValue(json, User.class); System.out.println("java对象：" + user2); } } -
Map转 JSON, JSON 转 Map。
/* 2.map<String,String>转json, json转map<String,String> json字符串 = {"姓名":"张三","性别":"男"} map对象 = {姓名=张三, 性别=男} */ @Test public void test02() throws Exception{ //map<String,String>转json HashMap<String,String> map = new HashMap<>(); map.put("姓名","张三"); map.put("性别","男"); String json = mapper.writeValueAsString(map); System.out.println("json字符串：" + json); //json转map<String,String> HashMap<String,String> map2 = mapper.readValue(json, HashMap.class); System.out.println("java对象：" + map2); } -
List转 JSON, JSON 转 List。
/* 4.List<String>转json, json转 List<String> json字符串 = ["张三","李四"] list对象 = [张三, 李四] */ @Test public void test04() throws Exception{ //List<String>转json ArrayList<String> list = new ArrayList<>(); list.add("张三"); list.add("李四"); String json = mapper.writeValueAsString(list); System.out.println("json字符串：" + json); //json转 List<String> ArrayList<String> list2 = mapper.readValue(json,ArrayList.class); System.out.println("java对象：" + list2); }
3、综合案例
-
校验用户名是否存在
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1yPRJCTO-1649529711413)(C:\Users\Administrator\Desktop\二期\WEB阶段\12_Ajax与JSON\笔记\Ajax与JSON.assets\image-20210622193143395.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rTc98Bfu-1649529711413)(C:\Users\Administrator\Desktop\二期\WEB阶段\12_Ajax与JSON\笔记\Ajax与JSON.assets\image-20210622193250618.png)]
页面
1. 为用户名输入框绑定鼠标离焦事件。
2. 获取输入的用户名数据。
3. 发送 AJAX 请求，并将响应的数据显示到提示框。
控制层
1. 获取请求参数。
2. 调用业务层的模糊查询方法。
3. 将返回的数据转成 JSON，并响应给客户端。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
//在页面加载完成后
$(function () {
//给username绑定blur事件
$("#username").blur(function () {
//获取username文本输入框的值
var username = $(this).val();
//发送ajax请求
//期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
// {"userExsit":false,"msg":"用户名可用"}
$.get("findUserServlet",{username:username},function (data) {
//判断userExsit键的值是否是true
// alert(data);
var span = $("#s_username");
if(data.userExsit){
//用户名存在
span.css("color","red");
span.html(data.msg);
}else{
//用户名不存在
span.css("color","green");
span.html(data.msg);
}
});
});
});
</script>
</head>
<body>
<form>
<input type="text" id="username" name="username" placeholder="请输入用户名">
<span id="s_username"></span>
<br>
<input type="password" name="password" placeholder="请输入密码"><br>
<input type="submit" value="注册"><br>
</form>
</body>
</html>
@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.获取用户名
String username = request.getParameter("username");
//2.调用service层判断用户名是否存在
//期望服务器响应回的数据格式：{"userExsit":true,"msg":"此用户名太受欢迎,请更换一个"}
// {"userExsit":false,"msg":"用户名可用"}
//设置响应的数据格式为json
response.setContentType("application/json;charset=utf-8");
Map<String,Object> map = new HashMap<String,Object>();
if("tom".equals(username)){
//存在
map.put("userExsit",true);
map.put("msg","此用户名太受欢迎,请更换一个");
}else{
//不存在
map.put("userExsit",false);
map.put("msg","用户名可用");
}
//将map转为json，并且传递给客户端
//将map转为json
ObjectMapper mapper = new ObjectMapper();
//并且传递给客户端
mapper.writeValue(response.getWriter(),map);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
4595
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
