目錄
一、Ajax
1、概述
Ajax（ASynchronous JavaScript And XML），即：異步的 JavaScript 和 XML。Ajax 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術，通過在後臺與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新
- 同步：客戶端必須等待服務器端的響應，在等待的期間客戶端不能做其他操作
- 異步：客戶端不需要等待服務器端的響應，在服務器處理請求的過程中，客戶端可以進行其他操作
2、實現方法
【1】原生的JS實現
- 創建對象
- 建立連接
- 發送請求
- 接收響應結果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OneStar</title>
<script>
function send() {
//發送異步請求
//創建對象
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");
}
//建立連接
xmlhttp.open("GET","ajaxServlet?username=oneStar",true)
//發送請求
xmlhttp.send();
//接收並處理來自服務器的響應結果
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var responsetext = xmlhttp.responseText;
alert(responsetext);
}
}
}
</script>
</head>
<body>
<input type="button" value="發送異步請求" οnclick="send();">
</body>
</html>
@WebServlet("/ajaxServlet")
public class ajaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//獲取請求參數
String username = request.getParameter("username");
//打印
System.out.println(username);
//響應
response.getWriter().write("Hello:" + username);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
}
【2】JQuery實現（有三種方法）
- $.ajax()：$.ajax({鍵值對});
- $.get()：$.get(url,[data],[callback],[type])
url：請求路徑
data：請求參數
callback：回調函數
type：響應結果的類型 - $.post()：$.post(url,[data],[callback],[type])
url：請求路徑
data：請求參數
callback：回調函數
type：響應結果的類型
注：服務器響應的數據，在客戶端使用時，要想當做json數據格式使用，就要將最後一個參數 type指定爲“json”
也可以在服務器端設置MIME類型爲json類型：response.setContentType("application/json;charset=utf-8");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OneStar</title>
<script src="JS/jquery-3.3.1.min.js"></script>
<script>
function send() {
//$.ajax()方法
$.ajax({
url:"ajaxServlet", //請求路徑
type:"POST", //請求方式
data:{"username":"oneStar","age":18} , //請求參數
success:function (data) {
alert(data)
} , //響應成功後的回調函數
error:function () {
alert("有錯誤！")
} , //響應出錯後的回調函數
dataType:"text" //設置接收到響應數據的格式
});
//$.get()方法
$.get("ajaxServlet",{username:"oneStar"},function (data) {
alert(data);
},"text");
//$.post()方法
$.post("ajaxServlet",{username:"oneStar"},function (data) {
alert(data);
},"text");
}
</script>
</head>
<body>
<input type="button" value="發送異步請求" οnclick="send();">
</body>
</html>
二、Json
1、概述
Json（JavaScript Object Notation），即JavaScript 對象表示法，Json 現在多用於存儲和交換信息的語法，進行網絡間數據傳輸，它比 xml 更小，更快，更容易解析！
2、Json 語法
【1】定義格式
Json數據是由鍵值對構成的，鍵用引號，數據用逗號分隔，用大括號保存對象，中括號保存數組
- 數字（整數或浮點數）
- 字符串（在雙引號中）
- 邏輯值（true 或 false）
- 數組（在中括號中）：{"person":[{},{}]}
- 對象（在大括號中）：{"address":{"province":"江西"}}
- null
【2】獲取數據
- 方法一：json對象.鍵名
- 方法二：json對象["鍵名"]
- 方法三：數組對象[索引]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>oneStar</title>
<script>
//1.基本格式
var person = {"name":"小明","age":18,"sex":"男"};
alert(person.name);
alert(person["name"]);
//2.嵌套格式(數組中存儲對象)
var persons = [
{"name":"小明","age":18,"sex":"男"},
{"name":"小白","age":17,"sex":"女"},
{"name":"小黑","age":16,"sex":"男"}
];
alert(persons[1].name);
//3.嵌套格式（對象中存儲對象數組）
var personss = {
"person":[
{"name":"小明","age":18,"sex":"男"},
{"name":"小白","age":17,"sex":"女"},
{"name":"小黑","age":16,"sex":"男"}
]
};
alert(personss.person[1].name);
</script>
</head>
<body>
</body>
</html>
3、Json 數據和 Java 數據相互轉換
在以後的開發中要將Json數據在客戶端和服務器之間進行傳輸，服務器要能夠使用Json數據就必須將數據轉換爲編寫服務器使用的代碼，通常我們使用解析器進行轉換，常見的解析器有：Jsonlib、Gson、fastjson、Jackson，Jackson是Sping框架內置的一個解析器
【1】Json ----> Java
步驟：
- 導入 Jackson 相關 jar 包
- 創建 Jackson 核心對象 ObjectMapper
- 調用 ObjectMapper 的相關方法進行轉換
轉換方法：
- readValue(json字符串數據，Class)
public static void main(String[] args) throws IOException {
//初始化字符串
String json = "{\"name\":\"oneStar\",\"age\":18,\"sex\":\"男\"}";
//創建 ObjectMapper對象
ObjectMapper mapper = new ObjectMapper();
//轉換爲java對象(person對象)
person per = mapper.readValue(json,person.class);
System.out.println(per);
}
【2】Java ----> Json
步驟：
- 導入 Jackson 相關 jar 包
- 創建 Jackson 核心對象 ObjectMapper
- 調用 ObjectMapper 的相關方法進行轉換
轉換方法：
- writeValue(參數，obj)
- 參數爲File：將obj 對象轉換爲Json字符串，並保存到指定的文件中
- 參數爲 Writer：將obj對象轉換爲Json字符串，並將 json 數據填充到字符輸出流中
- 參數爲 OutputStream：將 obj 對選哪個轉換爲Json字符串，並將json 數據填充到字節輸出流中
- writeValueAsString(obj)：將對象轉換爲json字符串
註解：在屬性前面加註解
- @JsonIgnore：排除屬性
- @JsonFormat：屬性值的格式化
public class JsonTest {
public static void main(String[] args) throws IOException {
Test1();
Test2();
}
private static void Test1() throws IOException {
person p = new person();
p.setAge(18);
p.setName("oneStar");
p.setSex("男");
//創建 ObjectMapper對象
ObjectMapper mapper = new ObjectMapper();
//進行轉換
String per = mapper.writeValueAsString(p);
System.out.println(per);
//轉換後放入指定文件
mapper.writeValue(new File("D:\\a.txt"),p);
//轉換後將數據關聯到write中
mapper.writeValue(new FileWriter("D:\\a.txt"),p);
}
private static void Test2() throws IOException {
person p1 = new person();
p1.setAge(18);
p1.setName("oneStar");
p1.setSex("男");
person p2 = new person();
p2.setAge(18);
p2.setName("oneStar");
p2.setSex("男");
person p3 = new person();
p3.setAge(18);
p3.setName("oneStar");
p3.setSex("男");
List<person> list = new ArrayList<>();
list.add(p1);
list.add(p2);
list.add(p3);
//創建 ObjectMapper對象
ObjectMapper mapper = new ObjectMapper();
//進行轉換
String per = mapper.writeValueAsString(list);
System.out.println(per);
}
}