概念:ASynchronous Javascript And XML
异步的JavaScript 和 XML
异步和同步:客户端和服务器端相互通信的基础上
Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用Ajax)如果需要更新内容,必须重载整个网页页面
提升用户的体验
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS实现Ajaxtitle>
<script>
function fun () {
//使用JS原生发送Ajax需要创建XMLHttpRequest对象
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//设置发送请求的位置及请求方式
//参数1:请求方式
//参数2:请求路径
//参数3:是否是异步请求true是异步false是同步
xhttp.open("GET", "ajaxServlet?username=tom", true);
//发送请求
xhttp.send();
//处理响应数据
xhttp.onreadystatechange = function() {
//判断请求处理的状态是否已经就绪,还需要判断响应的状态码是否成功
if (this.readyState == 4 && this.status == 200) {
let responseText = this.responseText;
alert(responseText)
}
};
}
script>
head>
<body>
<input onclick="fun();" type="button" value="异步请求">
body>
html>
package com.example.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("/ajaxServlet")
public class AjaxDome extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String username = req.getParameter("username");
System.out.println(username);
resp.getWriter().write("hello:"+username);
}
}
$.ajax()
$.ajax({键值对})
;DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS实现Ajaxtitle>
<script src="js/jquery.min.js">script>
<script>
function f() {
//点击按钮发送异步请求
$.ajax({
type:"get",//请求方式
url:"ajaxServlet",//请求路径
data:{
"username":"tom",
},//发送请求参数
success:function (data) {//执行成功后的方法
alert(data);
},
error:function () {//出现异常执行
alert("出错了...")
},
dataType:"text"//响应数据的格式
})
}
script>
head>
<body>
<input onclick="f();" type="button" value="异步请求">
body>
html>
$.get()
:发送get请求
$.get(url,[data],[callback],[type])
$.get("ajaxServlet",{username:"tom"},funcation(data){
},"text")
$.post()
:发送post请求$.post("ajaxServlet",{username:"tom"},funcation(data){
},"text")
概念:JavaScript Object Notation JavaScript对象表示法
Person p = new Person();
p.setName("张三");
p.setAge(23);
p.setGender("男");
var p = {"name":"张三","age":23,"gender":"男"}
基本规则:
{"persons":[{},{}]}
{"address":{"province":"陕西"...}}
json对象.键名
json对象["键名"]
数组对象[索引]
//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"
//alter(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){
alter(key+":"+p[key]);
}
}
Jsonlib、Gson、fastjson、jackson
@Test
public void test5() throws IOException {
//将json数据转换为对象
ObjectMapper mapper = new ObjectMapper();
Person person = mapper.readValue("{\"name\":\"张三\",\"age\":18,\"sex\":\"男\"}", Person.class);
System.out.println(person);
}
使用步骤:
导入jackson的相关jar包
创建Jackson核心对象 ObjectMapper
调用ObjectMapper的相关方法进行转换
转换方法:
writeValue(参数1,obj)
:
参数1:
File:将obj对象转换为JSON字符串,并保存到指定的文件中
Writer:将obj对象转换为JSON字符串,并将json数据填充到字符输出流中
OutputStream:将obj对象转换为JSON字符串,并将json数据填充到字节输出流中
writeValueAsString(obj)
:将对象转为json字符串
@Test
public void test1() throws JsonProcessingException {
//创建一个对象
Person person = new Person();
person.setName("张三");
person.setAge(18);
person.setSex("男");
//创建ObjectMapper对象
ObjectMapper mapper = new ObjectMapper();
//使用其中的方法进行转换
String s = mapper.writeValueAsString(person);
System.out.println(s);
}
@Test
public void test2() throws IOException {
//创建一个对象
Person person = new Person();
person.setName("张三");
person.setAge(18);
person.setSex("男");
//创建ObjectMapper对象
ObjectMapper mapper = new ObjectMapper();
//使用其中的方法进行转换的json对象封装到文件中
mapper.writeValue(new File("d://a.txt"),person);
}
注解:
@JsonIgnore
:排除属性(写在类成员变量的上面)@JsonFormat
:属性值得格式化(写在类成员变量的上面)
@JsonFormat(pattern = "yyyy-MM-dd")
复杂Java对象转换
@Test
public void test3() throws IOException {
//创建一个list数组转换为json数据
List<Person> list = new ArrayList<>();
//创建一个对象
Person person = new Person();
person.setName("张三");
person.setAge(18);
person.setSex("男");
list.add(person);
//创建ObjectMapper对象
ObjectMapper mapper = new ObjectMapper();
//使用其中的方法进行转换的json数据
String s = mapper.writeValueAsString(list);
System.out.println(s);//[{"name":"张三","age":18,"sex":"男"}]
}
@Test
public void test4() throws IOException {
//创建一个Map集合转换为json数据
Map<String,Object> map = new HashMap<>();
//向map集合中添加数据
map.put("name","lisi");
map.put("age",20);
//创建ObjectMapper对象
ObjectMapper mapper = new ObjectMapper();
//使用其中的方法进行转换的json数据
String s = mapper.writeValueAsString(map);
System.out.println(s);//{"name":"lisi","age":20}
}
服务器响应的数据,在客户端使用时,要想当做json数据格式使用
$.get(type)
:将最后一个参数type指定为"json"response.setContentType("application/json;charset=utf-8");
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>校验用户名title>
<script src="js/jquery.min.js">script>
<script>
//当页面加载完发送get请求
$(function () {
//获取用户名的数据
$("#user").blur(function () {
let username = $("#user").val();
//发送ajax请求
$.get("loginServlet",{"username":username},function (data) {
if (data.code==200){
$("#sp").html(data.msg);
$("#sp").css("color","red")
}else{
$("#sp").html(data.msg);
$("#sp").css("color","green")
}
},"json")
})
})
script>
head>
<body>
<form>
用户名:<input id="user" type="text" name="username"><span id="sp">span>
form>
body>
html>
package com.example.servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
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;
import java.util.HashMap;
import java.util.Map;
@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
resp.setContentType("text/html;charset=utf-8");
String username = req.getParameter("username");
System.out.println(username);
Map<String,Object> map = new HashMap<>();
if ("tom".equals(username)){
map.put("code",200);
map.put("msg","您注册的用户名太受欢迎了!!");
}else{
map.put("code",500);
map.put("msg","可以使用");
}
ObjectMapper mapper = new ObjectMapper();
mapper.writeValue(resp.getWriter(),map);
}
}