客戶端使用AJAX實現異步訪問

### 客戶端使用AJAX實現異步訪問

`Ajax`即「Asynchronous Javascript And XML」（異步JavaScript和XML），是指一種建立交互式網頁應用的網頁開發技術。

首先，應該引用`jQuery`文件，而後，調用`jQuery`框架中提供的`$.ajax()`函數以發出AJAX請求。

在`$.ajax()`函數中，函數的參數是1個JSON對象，常規訪問至少須要配置5個屬性：

- `url`：將請求提交到哪裏去，取值能夠是相對路徑，也能夠是絕對路徑；

- `data`：請求參數，一般格式是`名稱1=值1&名稱2=值`這樣的格式；

- `type`：請求類型，一般是`post`或`get`；

- `dataType`：服務器端響應的數據的類型，取值能夠是`text`/`json`/`xml`，將根據響應頭的Content Type決定；

- `success`：成功響應時(Http響應碼是2xx)的回調函數，函數的參數是服務器端響應的JSON字符串轉換獲得的JSON對象

    <script type="text/javascript" src="jquery-3.4.0.min.js"></script>
    <script type="text/javascript">
    $("#btn-reg").click(function(){
        $.ajax({
            "url":"user/reg.do",
            "data":"username=" + $("#username").val(),
            "type":"post",
            "dataType":"json",
            "success":function(json) {
                alert("state=" + json.state);
            }
        });
    });
    </script>

 

### 1. 響應正文

當客戶端向服務器端發出請求後，服務器端的響應方式是直接將某字符串響應給客戶端，若是客戶端是經過瀏覽器發出的請求，則在瀏覽器的界面中顯示的就一個字符串！

使用這種作法的優勢在於：服務器端沒必要再處理界面，即不須要考慮響應請求時，應該呈現什麼樣的界面給客戶端，只是單純的向客戶端響應處理的結果，例如用1表示成功，用0表示失敗，至於客戶端如何處理這些結果並顯示，是不須要服務器端關心的問題，同時，也就解決了多種不一樣的客戶端的顯示問題，例如PC端、手機端、平板電腦端，由於設備的差別，顯示方式也應該有所不一樣，這些問題均可以交給不一樣的客戶端開發人員去進行處理，另外，附帶的好處就是服務器端產生流量消耗也會更小，由於響應的正文的長度必定遠遠小於響應一個頁面的內容的長度。

響應正文的作法就是在處理請求的方法以前添加`@ResponseBody`註解便可：

    @Controller
    @RequestMapping("user")
    public class UserController {
        
        @RequestMapping("reg.do")
        @ResponseBody
        public String reg() {
            return "hello";
        }
    
    }

 

### 2. 響應的正文的格式

不能夠每次只向客戶端響應`1`或`0`或者某個數字，由於客戶端請求後，可能要求獲得更多的結果！例如客戶端發出請求的目的就是爲了獲得某些數據，例如當前登陸的用戶的信息等。

服務器端若是須要向客戶端響應數據，就不能直接把數據的多項屬性直接寫在1個字符串中，例如響應爲`"小六2517575"`是不合適的，客戶端很難或者無者正確的從這1個字符串拆分出所須要各類信息！因此，服務器端響應給客戶端的正文應該是有必定格式的，以保證客戶端接收到這個正文能夠拆分出必要的信息。

例如可使用XML語法去組織相關信息：

    <user>
        <name>小六</name>
        <age>25</age>
        <height>175</height>
        <weight>75</weight>
    </user>

 

可是，使用XML也存在必定的問題：

1. 語法格式相對比較繁瑣，且佔用的字符數量較多；

2. 數據的產生與解析相對繁瑣；

目前，業內比較提倡的是使用JSON格式來組織數據，例如：

    {
        "name":"小六",
        "age":25,
        "height":175,
        "weight":75
    }

 

### 3. JSON數據格式

JSON數據格式是Javascript語言默認直接解析的，由於JSON是Javascript中的一種數據類型！

JSON的數據格式：

1. 每一個JSON數據都是一個對象，每一個對象都應該使用`{}`框住；

2. 每一個對象中能夠有若干條屬性，屬性名是字符串格式的，須要使用引號框住，屬性值能夠根據數據類型來決定是否使用引號框住，各屬性之間使用逗號分隔；

3. 屬性的值也能夠是一系列數據，表現爲JSON中的數組，數組須要使用`[]`框住，也能夠經過數組屬性的length獲取數組的長度，也能夠結合循環語法遍歷數組；

JSON主要用於組織數據，並在網絡中進行傳遞，當客戶端接收到JSON數據，數據自己實際上是一個字符串，可使用`JSON.parse(str)`將字符串格式的數據轉換爲JSON對象，固然，前提是這個字符串的格式是符合JSON數據格式的。

### 4. 服務器端向客戶端響應JSON格式的數據

當控制器中處理請求的方法添加`@ResponseBody`註解後，SpringMVC框架會經過轉換器`Converter`實現響應正文。

SpringMVC中默認內置了一些轉換器，適用於不一樣的返回類型，若是處理請求的方法的返回值類型是`String`，則會自動調用`StringHttpMessageConverter`，該轉換器默認使用的編碼就是`ISO-8859-1`，因此，默認是不支持中文的！

使用`Jackson`框架能夠直接解決響應JSON數據及支持中文的問題！當項目中添加了`Jackson`依賴後，若是控制器中處理請求的方法的返回值並不在SpringMVC默認支持的範圍以內（例如不是`String`），則SpringMVC會直接調用`Jackson`框架中的轉換器來響應正文！

    <!-- jackson -->
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.9.8</version>
    </dependency>

使用`Jackson`框架時，須要在Spring的配置文件中啓用註解驅動：

    <!-- 註解驅動 -->
    <mvc:annotation-driven />

具體的使用能夠是：

    @RequestMapping("reg.do")
    @ResponseBody
    public User reg() {
        User user = new User();
        user.setName("小六");
        user.setAge(30);
        user.setWeight(80);
        return user;
    }

 

當提交訪問時，經過客戶端的瀏覽器，能夠看到響應正文就是：

  {"name":"小劉老師","age":30,"weight":80}

 

而且，`Jackson`框架還修改了`Response Headers`，將響應類型設置爲：

 Content-Type: application/json;charset=UTF-8

也就是客戶端獲得的就是JSON格式的字符串，而且，是支持中文的！

一般，在每一個項目中，都會建立1個類，用於表示服務器向客戶端響應正文的數據類型。

    public class ResponseResult<T> {
        private Integer state; // 狀態，使用數值描述這次用戶的操做成功與否
        private String message; // 消息，用於用戶操做失敗時描述錯誤的緣由
        private T data; // 數據，用於向客戶端提供數據
    }