技術標籤：Java

AJAX

概念： ASynchronous JavaScript And XML 非同步的JavaScript 和 XML

非同步和同步：客戶端和伺服器端相互通訊的基礎上

• 客戶端必須等待伺服器端的響應。在等待的期間客戶端不能做其他操作。
• 客戶端不需要等待伺服器端的響應。在伺服器處理請求的過程中，客戶端可以進行其他的操作。
• Ajax 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。通過在後臺與伺服器進行少量資料交換，Ajax 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用 Ajax）如果需要更新內容，必須過載整個網頁頁面。

• 提升使用者的體驗

實現方式

原生 JavaScript 實現方式

// 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、建立連線
引數：
	① 請求方式：GET、POST
 		get方式，請求引數在URL後邊拼接。send方法為空參
 		post方式，請求引數在send方法中定義
	② 請求的URL
 
：
	③ 同步或非同步請求：true（非同步）或 false（同步）
xmlhttp.open("GET","ajaxServlet?username=tom",true);

// 3、傳送請求
xmlhttp.send();

// 4、接受並處理來自伺服器的響應結果
	獲取方式 ：xmlhttp.responseText
	什麼時候獲取？當伺服器響應成功後再獲取
	當xmlhttp物件的就緒狀態改變時，觸發事件onreadystatechange。
xmlhttp.onreadystatechange=function() {
	//判斷readyState就緒狀態是否為4，判斷status響應狀態碼是否為200
 

	if (xmlhttp.readyState==4 && xmlhttp.status==200) {
	//獲取伺服器的響應結果
	var responseText = xmlhttp.responseText;
	alert(responseText);
	}
}

JQeury 實現方式

AJAX

$.ajax({
       url:"" , 						// 請求路徑
       type:"" , 						//請求方式
       data:{"username":"jack","age":23},//請求引數
       dataType:"text", 				//設定接受到的響應資料的格式
       success:function (data) { 		//響應成功後的回撥函式
           ...
       },
       error:function () {//表示如果請求響應出現錯誤，會執行的回撥函式
           ...
       }
})

GET AND POST

語法：$.get(url, [data], [callback], [type])
語法：$.post(url, [data], [callback], [type])
- 引數：
  - url：請求路徑
  - data：請求引數
  - callback：回撥函式
  - type：響應結果的型別

JSON

JSON資料和Java物件的相互轉換

JSON解析器

常見的解析器：Jsonlib、Gson、fastjson、jackson

JSON資料轉化為Java物件

1. 匯入jar包：Jackson Databind、Jackson Core、Jackson Annotations

2. 建立Jackson核心物件 ObjectMapper

3. 呼叫ObjectMapper的相關方法進行轉換

   • readValue（json字串資料，轉成的資料型別）

   String json = "{\"username\":\"hyy\",\"age\":\"20\",\"birthday\":\"2020-01-29\"}";
   ObjectMapper mapper = new ObjectMapper();
   try {
       User o = mapper.readValue(json, User.class);// 獲取型別的方法：User.class
       System.out.println(o);
   } catch (IOException e) {
       e.printStackTrace();
   }
   

Java物件轉化為JSON資料

1. 匯入jar包：Jackson Databind、Jackson Core、Jackson Annotations

2. 建立Jackson核心物件 ObjectMapper

3. 呼叫ObjectMapper的相關方法進行轉換

   • writeValue（引數一，obj）

     引數一：

     ​ File：將obj物件轉換為JSON字串，並儲存到指定的檔案中

     ​ Writer：將obj物件轉換為JSON字串，並將json資料填充到字元輸出流中

     ​ OutputStream：將obj物件轉換為JSON字串，並將json資料填充到位元組輸出流中

   • writeValueAsString（obj）：將obj物件轉為json字串

注意事項

1. 有些資料比如Date（日期資料型別）預設輸出不太好看，例如：{“username”:“hyy”,“age”:“20”,“birthday”:1580273638751}

   這時可以在成員變數上新增以下註解：

   方法一：@JsonIgnore，則上述輸出變為：（起到忽視屬性的作用）

   {“username”:“hyy”,“age”:“20”}

   方法二：@JsonFormat(pattern = "yyyy-MM-dd")，則上述輸出變為：（起到屬性格式化的作用）{“username”:“hyy”,“age”:“20”,“birthday”:“2020-01-29”}

複雜的格式轉換

List：

List<User> list = new ArrayList<>();
list.add(new User("hyy","20",new Date()));
ObjectMapper mapper = new ObjectMapper();
mapper.writeValueAsString(list);
// 輸出：[{"username":"hyy","age":"20","birthday":"2020-01-29"}]

Map:

Map<String, Object> map = new HashMap<>();
map.put("username", "hyy");
ObjectMapper mapper = new ObjectMapper();
try {
    String s = mapper.writeValueAsString(map);
    System.out.println(s);
} catch (JsonProcessingException e) {
    e.printStackTrace();
}
// 輸出：{"username":"hyy"}

測試(返回JSON資料)

有一個問題就是，前端得到的JSON資料實際上是字串資料，故可用兩種方法解決

1. 在客戶端中，將AJAX請求中的dataType（或type）設定為 json。
2. 在伺服器端中，設定MIMIE型別：resp.setContentType("application/json;charset=utf-8");

二者方法採用其一即可，最好都使用

若是想知道json（或其他資料）的MIME型別，可在Tomcat => conf => web.xml中全域性搜尋JSON即可找到

package cn.web.servlet;

import cn.web.domain.User;
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;

@WebServlet("/testjson")
public class TestJsonServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("application/json;charset=utf-8");// 注意返回資料的格式
        System.out.println("這裡接收到了");
        User user = new User("1", "huyiyang", "abc.123", "1");
        user.setUsername(req.getParameter("username"));
        ObjectMapper mapper = new ObjectMapper();
        // 方法一：先得到JSON字串，再放入resp的輸出流中
        String s = mapper.writeValueAsString(user);
		resp.getWriter().write(s);
        // 方法二：直接將resp輸出流和待轉換的JSON資料放入mapper中
        mapper.writeValue(resp.getWriter(), user);
    }
}