day10–Ajax与json
学习目标
如果提交表单 给服务器,当服务器处理完成之后,响应给浏览器,你发现浏览器显示页面时,闪烁了一下。
这种方式不是异步提交,而是同步提交,该闪烁是页面整体刷新了。
1.能够理解异步的概念
2.能够了解原生js的ajax
3.能够使用jQuery的
.
g
e
t
(
)
进
行
访
问
4.
能
够
使
用
j
Q
u
e
r
y
的
.get()进行访问 4.能够使用jQuery的
.get()进行访问4.能够使用jQuery的.post()进行访问
5.能够使用jQuery的
.
a
j
a
x
(
)
进
行
访
问
6.
能
够
使
用
j
Q
u
e
r
y
3.0
的
.ajax()进行访问 6.能够使用jQuery3.0的
.ajax()进行访问6.能够使用jQuery3.0的.get()新增签名进行访问
7.能够使用jQuery3.0的$.post()新增签名进行访问
8.能够掌握json的三种数据格式
9.能够使用json转换工具Jackson进行json格式字符串的转换
10.能够完成用户名是否存在的查重案例
11.能够完成自动补全的案例
同步请求与异步请求
(1)浏览器和服务器之间数据传输方式
1:同步方式
2:异步方式
(2)两种方式有什么不同?
同步请求,服务器响应时,页面整体刷新(响应了整个页面)
异步请求,服务器响应时,页面局部刷新(响应了字符串或者json)
(3)异步请求有什么优点?
异步请求可以提高用户的体验性
(4)异步请求应用场景有哪些?
a:用户名检测
b:搜索的自动补全
c:页面的局部刷新
同步请求里通常servlet’会使用请求转发或者重定向把整个页面返回给浏览器,整个页面更新了。
异步请求一般servlet返回的是字符串或者json数据,浏览器一般用js来更新页面的局部
所以一般异步比较快,同步比较慢
原生的ajax编程
异步:发送消息,不用等回复
(1)什么是Ajax
Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
(2)Ajax有什么用?
ajax专门用于浏览器和服务器之间的异步请求机制
(3)Ajax编程
1:原生的ajax编程(了解)
2: 使用jquery框架进行编程(重点)
补充:
异步请求:用js去发送请求,而不用它自动提交表单
在页面中要实现局部刷新的效果,更多的是用jquery框架
(1)传统的程序运行原理
用户发送请求,服务器接受请求,处理后返回数据,浏览器接受响应数据,进行显示数据,这个时间就会有处理和接受之间的空闲,导致用户的等待时间
(2) Aajx的程序运行原理是:用户发送请求,到Ajax引擎处理后,发送给服务器接受请求,处理后返回数据Ajax,浏览器接受响应数据,进行显示数据,在者期间浏览器可以一直和Ajax进行交流,减少处理时间
Ajax请求编写
同步:问题:当网络不通时,你必须在那边不断的进行等待,等待服务端把数据返回回来才可以
Ajax:虽然也有账号密码的输入2,输入点击登录,浏览器内部会多出一个Ajax引擎,提交登录,先交给Ajax,Ajax再放入到请求里给servlet,servlet接收后响应字符串或者json数据,数据返回来之后不是直接更新登录页面,
而是交给ajax引擎,ajax引擎拿到数据后因为要局部更新,会调用js去改页面上的一点点内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// 原生的ajax开发:
// 1)创建Ajax引擎对象
// 2)为Ajax引擎对象绑定监听(监听服务器已将数据响应给引擎)
// 3)绑定提交地址
// 4)发送请求
// 5)接受响应数据
//
function clickFn() {
//1)创建Ajax引擎对象
var xmlHttp = new XMLHttpRequest();
//2)为Ajax引擎对象绑定监听(监听服务器已将数据响应给引擎)
xmlHttp.onreadystatechange = function (ev) {
//如果state值是4,说明收到响应数据
//如果状态码是200.说明服务器正常响应
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
// 5)接受响应数据
//获取响应数据
alert(xmlHttp.responseText); //response.getWriter().write("hello")
}
}
//3)绑定提交地址
//参1:表示请求方式
// 参2:表示服务器的资源访问路径,不用加项目名,
// 参3:表示是否异步,true是异步
xmlHttp.open("get","s1",true);
//4)发送请求
xmlHttp.send();
}
</script>
</head>
<body>
<!--设计一个按钮,一点击这个按钮,就向服务器发出异步请求-->
<input type="button" value="点我,发出异步请求" onclick="clickFn()"/>
</body>
</html>
package com.wzx.pack01_ajax;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/s1")
public class day10AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//响应给浏览器
System.out.println("s1 doGet");
//响应
response.getWriter().println("hello");
}
}
点击按钮
Ajax原理分析:
Jquery实现Ajax的5个方法
jQuery框架的ajax简介
(1)原生Ajax编程为什么不用?
代码量大,使用不方便,j将重复使用的代码封装成函数,直接调用
(2)jQuery框架的ajax函数:5个方法
1: $.get请求-原理
(1)get函数
$.get(url, [data], [callback], [type])
url:表示服务器的访问路径,如:“s1”
data:表示向服务器发送的参数, 格式: 1: “username=wzx&password=123” 2:json串
callback:匿名函数,表示接收服务器发送过来的响应,这个函数自动执行
type :表示浏览器期望服务器发送过来的数据类型,格式:“text” “json”
(2)get请求原理
$.get请求-代码实现
(1)在点击事件中调用get请求
(2)在服务端返回json或者字符串数据
(3)在回调函数中编写业务逻辑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").on("click",function () {
//get请求会使用ajax引擎发送get请求
$.get(
"s2",
"username=wzx&password=123",
function(data){ //这个data就是服务器返回的字符串
//处理数据
alert(data)
},
"text"
);
})
})
</script>
</head>
<body>
<!--设计一个按钮,一点击这个按钮,就向服务器发出异步请求-->
<input id="btn" type="button" value="点我,发出异步请求"/>
</body>
</html>
package com.rh.Servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/s2")
public class Demo02Servlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("username");
String password = request.getParameter("password");
//由于是异步请求服务端不能请求转发,或者重定向,因为二者会让页面整体刷新
System.out.println("s2 doGet");
if("wzx".equals(username)&&"123".equals(password)){
//只能返回字符串或者json
response.getWriter().println("success");
}else{
response.getWriter().println("error");
}
}
}
ajax负责发送请求和接收服务端返回的数据
若是js文件导入不了,可以尝试清下缓存
比ajax原生代码简洁
**1: $.post请求-**代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").on("click",function () {
//get请求会使用ajax引擎发送get请求
$.post(
"s2",
"username=wzx&password=123",
function(data){ //这个data就是服务器返回的字符串
//处理数据
alert(data)
},
"text"
);
})
})
</script>
</head>
<body>
<!--设计一个按钮,一点击这个按钮,就向服务器发出异步请求-->
<input id="btn" type="button" value="点我,发出异步请求"/>
</body>
</html>
只需将 $.get改为 $.post就行,其他的都不变,原理也一样
$.ajax请求方式
调
用
(
1
)
什
么
是
调用 (1)什么是
调用(1)什么是.ajax请求方式
这种方式是将
.
g
e
t
和
.get和
.get和.post方式合成一种请求
(2)如何调用
$.ajax({键:值,键:值,键:值});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").on("click",function () {
//调用$.ajax发送一个get/post
$.ajax({
url:"s2",
async:true,// async异步,若是false就是同步请求,慢,true就是异步请求
data:"username=bingbing&password=456",
type:"post",
dataType:"text",
success:function (data) {
alert(data)
},
error:function () {
alert("服务器发生了错误")
}
});
})
})
</script>
</head>
<body>
<!--设计一个按钮,一点击这个按钮,就向服务器发出异步请求-->
<input id="btn" type="button" value="点我,发出异步请求"/>
</body>
</html>
servlet和之前的一样
$.ajax方法内的键不能随便修改,只能修改值
jquery3.0新特性ajax请求
(1)什么是juqery3.0新特性GET/POST请求
$.get({键:值,键:值});
$.post({键:值,键:值});
jquery3.0认为:还是不要把两个函数合成一个好
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").on("click",function () {
//调用ajax引擎发送一个get/post
$.post({
url:"s2",
async:true,
data:"username=bingbing&password=456",
dataType:"text",
success:function (data) {
alert(data)
},
error:function () {
alert("服务器发生了错误")
}
});
})
})
</script>
</head>
<body>
<!--设计一个按钮,一点击这个按钮,就向服务器发出异步请求-->
<input id="btn" type="button" value="点我,发出异步请求"/>
</body>
</html>
因为方法指定get与post,3.0与前面的$.ajax比较少一个请求类型键值对: type:"post"或者type:“get”,其他都一样
用的少,因为要求3.0的jquery,企业中一般使用1.xx版本。没有这个方法
一般不用原生的ajax,代码量大,一般用jquery
Json的介绍
(1)什么是json字符串
JSON( JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。
(2)有什么特点?
》1 完全独立于编程语言的文本格式来存储和表示数据。
》2 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
》3 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
json格式语法
(1)json如何编写
在javascript中可以直接识别json的语法
(2)Java对象与json对应关系
User ---->json
List ---->json
Map<String,List> ---->json
var data = {“user”,[{},{},{}]}
{}表示一个对象,哪里有{},哪里就有对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//1:使用json表示一个User对象 name age sex address
var obj = {"name":"jack","age":33,"sex":"男","address":"北京"}
//2:使用json表示一个 List对象 只有字符串 List<String> List<User>
var list = ["rose","cuihua","caihua"];
var list1 = [{"name":"rose"}, {"name":"cuihua"}, {"name":"caihua"}];
//3:混合的, 对象中有集合
var obj2 = {"name":"jack","age":33,"hobbies":["抽烟","喝酒","烫头"]}
//4:Map<String,List<User>>
var map ={
"1班":[{"name":"jack","age":33,"sex":"男","address":"北京"},{"name":"rose","age":33,"sex":"男","address":"北京"}],
"2班":[{"name":"jack1","age":33,"sex":"男","address":"北京"},{"name":"rose1","age":33,"sex":"男","address":"北京"}],
"3班":[{"name":"jack2","age":33,"sex":"男","address":"北京"},{"name":"rose2","age":33,"sex":"男","address":"北京"}]
}
</script>
</head>
<body>
</body>
</html>
补充:
轻量级:没有多余的字符,代码简洁
例如:
json转换工具
(1)什么是json的转换工具
json的转换工具是通过java封装好的一些jar工具包,直接将java对象或集合转换成json格式的字符串。
(2)常见的转换工具
(3)使用步骤
》1添加jar
》2调用
package com.rh.bean;
public class User {
private String name;
private int age;
private String sex;
private String address;
public User() {
}
public User(String name, int age, String sex, String address) {
this.name = name;
this.age = age;
this.sex = sex;
this.address = address;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
}
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.rh.bean.User;
import org.junit.Test;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class JsonchangetEST {
@Test
public void test01() throws JsonProcessingException, JsonProcessingException {
//1:创建对象
User user = new User("jack",11,"男","北京");
//2:方法,将一个user对象转成json字符串
ObjectMapper om = new ObjectMapper();
String json= om.writeValueAsString(user);//将javabean转json 参1 javaBean
System.out.println(json);
}
@Test
public void test02() throws JsonProcessingException {
//1:创建对象
User user1 = new User("jack",11,"男","北京");
User user2 = new User("rose",11,"女","北京");
List<User> list = new ArrayList<>();
list.add(user1);
list.add(user2);
//2:方法,将一个user对象转成json字符串
ObjectMapper om = new ObjectMapper();
String json= om.writeValueAsString(list);//将javabean转json 参1 javaBean
System.out.println(json);
}
@Test
public void test03() throws JsonProcessingException {
//1:创建对象
User user1 = new User("jack",11,"男","北京");
User user2 = new User("rose",11,"女","北京");
Map<String,User> map = new HashMap<>();
map.put("100001",user1);
map.put("100002",user2);
//2:方法,将一个user对象转成json字符串
ObjectMapper om = new ObjectMapper();
String json= om.writeValueAsString(map);//将javabean转json 参1 javaBean
System.out.println(json);
}
}
只有list出来[],其余出来{}
ObjectMapper om = new ObjectMapper();
String json= om.writeValueAsString(map);//将javabean转json 参1 javaBean
建议直接new调用,e,g:
new ObjectMapper().writeValueAsString(map);//代码写成一行