本文深入讲解了Ajax的工作原理及其在JavaScript中的多种实现方式，包括原生JavaScript和jQuery框架下的.get、.post及.ajax方法。同时介绍了JSON数据格式的特点及其在Web开发中的应用。
day10–Ajax与json
学习目标
如果提交表单 给服务器，当服务器处理完成之后，响应给浏览器，你发现浏览器显示页面时，闪烁了一下。
这种方式不是异步提交，而是同步提交，该闪烁是页面整体刷新了。
1.能够理解异步的概念
2.能够了解原生js的ajax
3.能够使用jQuery的.get()进行访问4.能够使用jQuery的.get()进行访问
4.能够使用jQuery的.get()进行访问4.能够使用jQuery的.post()进行访问
5.能够使用jQuery的.ajax()进行访问6.能够使用jQuery3.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请求方式
这种方式是将.get和.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);//代码写成一行
扫一扫
1539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
