通過AJAX與Servlet進行交互：通過JSON傳遞數據

1.原生AJAX代碼

• get請求:

//創建xhr,IE低版本不支持
var xhr = new XMLHttpRequest();
//servlet地址
var url="/Website01/index.view";
xhr.open("get", url, true);
//xhr處理事件,異步
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
    //在這裏進行相關處理,通過xhr.responseText獲取後臺反饋的文本
        ...
    }
};
//xhr發送數據
xhr.send();

• post請求:
  post請求需注意要設置請求頭（setRequestHeader）
  xhr.setRequestHeader(“Content-type”, “application/json”);針對JSON數據
  在xhr.send()中寫需要發送的JSON數據，例如:

xhr.send(JSON.stringify(data));

2.Servlet基礎知識

Servlet是用Java編寫的服務器端程序。其主要功能在於交互式地瀏覽和修改數據，生成動態Web內容。狹義的Servlet是指Java語言實現的一個接口，廣義的Servlet是指任何實現了這個Servlet接口的類，一般情況下，人們將Servlet理解爲後者。
Servlet運行於支持Java的應用服務器中(Tomcat)。從原理上講，Servlet可以響應任何類型的請求，但絕大多數情況下Servlet只用來擴展基於HTTP協議的Web服務器。
在Java中，新建Servlet類繼承自HttpServlet，重寫doGet方法處理get請求，重寫doPost方法，處理post請求，通過
PrintWriter out = response.getWriter();通過out.write()輸出數據到前臺的xhr.responseText，通過out.println()輸出頁面。

3.Servlet處理請求

處理請求通過HttpServletRequest類型，Get請求時查詢字符串直接編碼在請求鏈接中，格式爲url+”?key1=value1&key2=value2”，通過getParameter(“key1”)來獲取值。

4.前後端傳遞JSON數據

• 前端傳遞JSON給Servlet

//程序片段,請求頭不能少
xhr.setRequestHeader("Content-type", "application/json");
var data={"name":"Tom","age":20};
xhr.send(JSON.stringify(data));

• 後端接受前端傳遞的JSON數據

//讀取請求傳遞過來的JSON格式數據，返回JSON字符串
private String readJSONData(HttpServletRequest request) {
        StringBuffer json=new StringBuffer();
        String lineString=null;
        try {
            BufferedReader reader=request.getReader();
            while ((lineString=reader.readLine())!=null) {
                json.append(lineString);                
            }
        } catch (Exception e) {
            System.out.println(e.toString());
        }
        return json.toString();
    }

String json=readJSONData(request);
//將json字符串轉爲java對象
Gson gson=new Gson();
Person person=gson.fromJson(json, Person.class);

• 說明
  Gson爲google處理JSON格式數據的jar包，可將JSON字符串轉換爲對應的Java對象，也可將相應的Java對象序列化爲JSON字符串。Person爲定義的類，包含name和age字段。readJSONData函數將前端請求中的JSON數據轉爲java對象。

• 後端輸出JSON到前端

//後端程序片段，傳遞json數據給前端
Person person=new Person("Tom",20);
Gson gson=new Gson();
String json=gson.toJson(person);
out.write(json);

//前端程序片段，通過ajax獲取json數據
var xhr = new XMLHttpRequest();
var url="/Website01/index.view";
xhr.open("get", url, true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        //獲取後臺傳遞過來的字符串並轉換爲json
        var responseJson=JSON.parse(xhr.responseText);
        var name=responseJson.name;
        var age=responseJson.age;
    }
};
xhr.send(null);

5.表單數據的處理

<form method="post" action="/Website01/index.view">
   <label>Name:</label><input type="text" id="name1" name="name"><br>
   <label>Age:</label><input type="number" id="age1" name="age"><br>
   <input type="submit" id="submit" value="提交">
 </form>

表單數據可以直接在form屬性中定義請求方法和請求路徑，在點擊submit按鈕後數據會直接提交併跳轉。如上的表單，在點擊按鈕提交後，後臺使用request.getParameter(“key”)獲取數據，key值爲input標籤的name值，而非id值.，即通過以下代碼獲取表單提交的數據。

String name=request.getParameter("name");
String age=request.getParameter("age");

以上。