Ajax
1. 概念
- ASynchronous JavaScript and xml,异步的 JavaScript 和 xml.
异步和同步:客户端和服务器端相互通信的基础上
- Ajax 是一种用于创建快速动态网页技术.
- Ajax 是一种无需重新加载整个网页的情况下,能够更新部分网页的技术.
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新.这意味可以在不重新加载整个网页的情况下,对网页的某部分进行更新.
传统网页(不使用 ajax)如果需要更新内容,必须重载整个网页页面. - 作用:提升用户体验
2. 实现方式
2.1 原生 js实现方式(了解)
<body>
<input type="button" value="发送异步请求" onclick="fun()">
<input>
<script>
//定义方法
function fun() {
//1. 创建核心对象
var xmlhttp;
if (window.XMLHttpRequest) {
//code for ie7+ firefox,chrome,opera,safari
xmlhttp = new XMLHttpRequest();
} else {
//code for ie6 ie5
xmlhttp = new ActiveXObject("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.onreadystatechange = function () {//单 xmlhttp对象的就绪状态改变时,就触发事件 onreadystatechange
//判断 readyState就绪状态 0,1,2,3,4
// 判断响应状态码是否为200
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var responseText = xmlhttp.responseText;
alert(responseText)
}
}
}
</script>
@WebServlet("/ajaxServlet")
public class AjaxDemo1Servlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text:html;charset=utf-8");
//获取请求参数
String username = request.getParameter("username");
//处理业务逻辑 耗时
try {
Thread.sleep(5000);
} catch (InterruptedException e) {
e.printStackTrace();
}
//打印 username
System.out.println("username = " + username);
//响应
response.getWriter().write("htllo " + username);
}
}
2.2 jQuery实现方式
- $.ajax()
- 语法: $.ajax(url,[settings])
<body> <input type="button" value="发送异步请求" onclick="fun()"> <input> <script src="/js/jquery-3.6.0.min.js"></script> <script> //定义方法 function fun() { //使用 $.ajax()发送 异步请求 $.ajax({ url: "ajaxServlet", // 请求路径 type: "pose",//请求方式 //data:"username=jack&age=23", //请求参数 data: {"username": "jack", "age": 23}, //请求参数 json格式 success: function (data) { //响应成功后的回调函数 alert(data); }, error: function (data) {//请求响应出现错误,会执行的回调函数 alert("出错了") }, dataType: "test",//设置接收到响应数据格式 }); } </script> </body> - $.get(): 发送 get请求
- 语法: $.get(url, [data], [callback], [type])
- 参数:
url:请求路径
data:请求参数
callback:回调函数
type:响应结果类型
<input type="button" value="发送异步请求" onclick="fun()"> <input> <script src="/js/jquery-3.6.0.min.js"></script> <script> //定义方法 function fun() { //使用 $.ajax()发送 异步请求 $.get("ajaxServlet", {username: "rose"}, function (data) { alert(data) }), "text"; } </script> - 参数:
- $.post(): 发送 pose请求
- 语法: $.post(url, [data], [callback], [type])
json
1. 概念
- JavaScript object notation,JavaScript对象
Person p = new Person();
p.setName();
p.setAge();
p.setGender();var p {"name":"A","age":"24","gender":"女"}
- json现在多用于存储和交换文本信息的语法,类型 xml,json比 xml更小更快更容易解析
2. 语法
- 基本规则
- 数据在名称/值对中: json数据是由键值对构成的
- 键用引号(单双都行)引起来,也可以不适用引号
- 值的取得类型
数字 >正数或浮点数
字符串 >在双引号中
逻辑值 >true false
数组 >在方括号中 {"persons":[{},{},..]}
对象 >或括号中 {"address":{"province":"北京"...}}
null
- 数据由逗号分隔 :多个键值由逗号分隔
- 花括号保存对象 :使用{}定义 json格式
- 方括号保存数组 :[]
- 数据在名称/值对中: json数据是由键值对构成的
<script>
//1. 定义基本格式
var person = {"name": "张三", age: 23, "gender": true};
//alert(person);//[object Object]
//2. 嵌套格式: {} --> []
var persons = {
"persons": [
{"name": "小红", "age": 23, "gender": true},
{"name": "小丽", "age": 23, "gender": true},
{"name": "小美", "age": 23, "gender": true}
]
}
// alert(persons);
//2. 嵌套格式: [] --> {}
var ps = [
{"name": "小红", "age": 23, "gender": true},
{"name": "小丽", "age": 23, "gender": true},
{"name": "小美", "age": 23, "gender": true}
];
//alert(ps);
</script>
- 获取数据
- json 对象.键名
var name = person.name;
var age = person["age"];
alert(name);
alert(age); - json 对象["键名"]
let name2 = persons.persons[2].name;
alert(name2);//小美 - 数组对象[索引]
alert(ps[2].name);//小李
- 遍历
<script src="/js/jquery-3.6.0.min.js"></script> <script> //1. 定义基本格式 var person = {"name": "张三", age: 23, "gender": true}; //2. 嵌套格式: {} --> [] var ps = [ {"name": "小红", "age": 23, "gender": true}, {"name": "小丽", "age": 23, "gender": true}, {"name": "小美", "age": 23, "gender": true} ]; //获取 person对象中所有的键和值 //for in循环 for (var key in person) { // alert(key+":"+person.key); //这样的方式获取不行,因为相当于 person.name alert(key + ":" + person[key]); } //获取 ps中的值 for (let i = 0; i < ps.length; i++) { let p = ps[i]; for (let key in p) { alert(key+":"+p[key]) } } </script> - json 对象.键名
3. json对象和 Java对象的转换
json解析器
常见的解析器:jsonlib,gson,fastjson,jackson
- json转为 Java对象
- Java对象转为 json
- 使用步骤
导入 jackson的相关 jar包
- 使用步骤
内容来源于网络如有侵权请私信删除
文章来源: 博客园
- 还没有人评论，欢迎说说您的想法！
客服
