JavaWeb必備知識----Json和Ajax

**

JavaWeb必備知識----Json和Ajax

**
先來了解一下,什麼是Json~
**
具體概念咱就不說了百度上一搜便是,直接上乾貨:

1.1Json在JavaScript中的使用:

**
1.1.1 Json 的聲明:
json數組由大括號包圍,裏面都是鍵值對,鍵使用引號引起來.鍵和值之間使用冒號進行分隔.
每組鍵值對之間 使用逗號來進行分隔. 這樣格式的數據我們就叫json.

var jsonObj = {
   "key1":12,
   "key2":"abc",
   "key3":true,
   "key4":[12,"abc",true], //數據類型可以是整型,可以是字符串,可以是boolean類型,也可以是另一個json數組
   "key5":[{
      "key5_1_1":511,    
      "key5_1_2":"abc1"
   },{
      "key5_2_1":521,    
      "key5_2_2":"abc2"
   },{
      "key5_3_1":531,
      "key5_3_2":"abc3"
   }] 
};

1.1.2 Json 數組數值的取出:
Json.key 就可以取出對應key 的value

alert( jsonObj.key1 ); // 12
alert( jsonObj.key2 ); // abc
alert( jsonObj.key3 ); // true
alert( jsonObj.key4.length ); //3
var arr = jsonObj.key4;
for (var i = 0; i < jsonObj.key4.length; i++) {
     alert( arr[i] ); //依次是 12,abc,true
}
alert( jsonObj.key5[0].key5_1_1 ); //511
var arr5 = jsonObj.key6;
for (var i = 0; i < arr5.length; i++) {
     // 每一個都是json對象
    var arr5Element = arr5[i];
    alert(" 1 = " + arr5Element.key5_1_1 + " , 2 = " + arr5Element.key5_1_2    );
 }

1.1.3 Json數據常用的兩種方式:
我們常說的Json數據有兩種形式: 一種是Json對象,一種是Json 字符串
JSON.stringify() --> 可以把json對象轉換爲json字符串
JSON.parse() --> 把json字符串轉換爲json對象

// 把json對象轉換爲json字符串
var s = JSON.stringify( jsonObj );
alert( s ); // json字符串

// 把json字符串轉換爲json對象
var obj = JSON.parse( s );
alert( obj ); //json對象

**

1.2Josn在Java中的使用

**
1.2.1Json 和JavaBean 之間轉換

//創建一個pojo 數據與json 進行轉換
public class Person {
    private Integer id;
    private String name;

    public Person() {
    }

    public Person(Integer id, String name) {
        this.id = id;
        this.name = name;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    @Override
    public String toString() {
        return "Person{" +
                "id=" + id +
                ", name='" + name + '\'' +
                '}';
    }
}

@Test
public void test() {
    Person person = new Person(1,"Json");
    // 創建谷歌gson包中提供的工具類
    Gson gson = new Gson();
    // 使用gson.toJson();
    String jsonPersonString = gson.toJson(person);
    System.out.println( jsonPersonString );
    // 還可以把json字符串轉換javaBean
    Person person1 = gson.fromJson(jsonPersonString, Person.class);
    System.out.println(person1);
}

輸出結果如下:

1.2.2 List和Json 相互轉換

List和Json 相互轉換,如果Json字符串轉換成List時,我們需要新建一個List存放的Bean的類型的類,如下:

/**
 * 泛型是要把json轉換回去的具體類型
 */
public class PersonListType extends TypeToken<ArrayList<Person>> {
}

這裏做一個空類即可.

@Test
public void test2() {

    List<Person> people = new ArrayList<>();
    people.add(new Person(1,"我是一"));
    people.add(new Person(2,"我是二"));
    people.add(new Person(3,"我是三"));
    // 先創建gson工具類
    Gson gson = new Gson();
    // 把list集合轉換爲json數組
    String jsonPeopleString = gson.toJson(people);
    System.out.println( jsonPeopleString );
    // fromJson把json字符串轉換回list集合
    // toJson() 是把對象轉換爲json字符串
    // fromJson是把json字符串轉換回java對象
    // 如果是轉回一個JavaBean.則第二個參數是轉換的javaBean的具體類型
    // 如果是轉回一個集合.則第二個參數是type類型  這裏需要新new一個空的類型類
    List<Person> list = gson.fromJson(jsonPeopleString, new PersonListType().getType());
    Person person = (Person) list.get(0);
    System.out.println(person);
}

上面測試的輸出結果如下:

1.2.3 Map和Json 的相互轉換

同List轉換,也需要創建一個類型類,當然我們可以使用匿名類來解決麻煩

@Test
public void test3() {
	Map<String,Person> personMap = new HashMap<>();
    personMap.put("p1",new Person(1,"一號好帥"));
    personMap.put("p2",new Person(2,"二號好帥"));
    personMap.put("p3",new Person(3,"三號好美"));

    Gson gson = new Gson();
    // 所有java對象轉換爲json字符串.都是統一使用 toJson()方法
    String json = gson.toJson(personMap);
    System.out.println(json);
    // 把json字符串轉換回 map 集合
    // 官方推薦使用的匿名內部類
    Map<String,Person> o = gson.fromJson(json,new TypeToken< HashMap<String,Person> >(){}.getType());
    System.out.println( o );
    Person person = o.get("p1");
    System.out.println(person);
}

運行結果如下:
![在這裏插入圖片描述](https://img-blog.csdnimg.cn/20200513201018369.png)

## 2.1Ajax

AJAX即“Asynchronous Javascript And XML”（異步JavaScript和XML），是指一種創建交互式網頁應用的網頁開發技術。
ajax是一種瀏覽器通過js異步發起請求，局部更新頁面的技術。
**

## 2.1.1原生Ajax的演示:

**

```javascript
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
   <head>
      <meta http-equiv="pragma" content="no-cache" />
      <meta http-equiv="cache-control" content="no-cache" />
      <meta http-equiv="Expires" content="0" />
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Ajax請求示例</title>
      <script type="text/javascript">
         function ajaxRequest() {
			//  1、我們首先要創建XMLHttpRequest
            var xhr = new XMLHttpRequest();
			//  2、調用open方法設置請求參數
            xhr.open("GET","http://localhost:8080/ajax_test/ajaxServlet?action=javaScriptAjax",true);
			//  4、在send方法前綁定onreadystatechange事件，處理請求完成後的操作。
            xhr.onreadystatechange = function(){
               // 要同時判斷兩個值,纔可以獲取響應信息
               if (xhr.readyState == 4 && xhr.status == 200) {
                  // alert( xhr.responseText );
                  // document.getElementById("div01").innerHTML = xhr.responseText;
                  // 把服務器返回的數據轉換爲json對象
                  var jsonObj = JSON.parse(xhr.responseText);
                  document.getElementById("div01").innerHTML = "編號:" + jsonObj.id + " , 姓名:" + jsonObj.name;
               }
            }

            //  3、調用send方法發送請求
            xhr.send();
         }
      </script>
   </head>
   <body> 
      <button onclick="ajaxRequest()">ajax request</button>
      <div id="div01">
      </div>
   </body>
</html>

同時我們需要在服務器端進行配置:

@WebServlet(name = "AjaxServlet",value = "/ajaxServlet")
public class AjaxServlet extends BaseServlet {
    /**
     * 表示我們演示的第一個Ajax請求的方法
     * @param request
     * @param response
     * @throws ServletException
     * @throws IOException
     */
    protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("ajax 兄弟,你來了!!!");

        Person person = new Person(1,"我是一號");
        // 先把要返回的數據轉爲json字符串
        Gson gson = new Gson();
        String json = gson.toJson(person);
        response.getWriter().write(json);
    }
}

BaseServlet如下:

public abstract class BaseServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 解決響應中文亂碼
        response.setContentType("text/html; charset=UTF-8");
        // 獲取業務的鑑別字符串 == >> 就可以知道是什麼業務操作
        String action = request.getParameter("action");
        try {
            // this是表示當前具體的對象實例.
            // 通過action業務鑑別字符串,得到對應的業務方法
            Method method = this.getClass().getDeclaredMethod(action, HttpServletRequest.class, HttpServletResponse.class);
            // 設置業務方法
            method.invoke(this,request,response );
        } catch (Exception e) {
            e.printStackTrace();
            throw new RuntimeException(e);
        }
    }

}

這樣是不是覺得非常繁瑣,不方便,沒事,我們還有如下的JQuery封裝後的Ajax:

2,2,2 JQuery中的Ajax

ajax() 方法是jQuery中提供的專門用於發起Ajax請求的方法.
我們只需要給這個方法傳遞請求時需要的信息即可!!!

$.ajax方法
url 請求的資源路徑
type 請求的方式 GET或POST
data 發送給服務器的數據
一種數據格式是: name=value&name=value
另一種數據格式是: { key:value , key : value }
success 成功的回調函數
dataType 響應的數據類型
text 純文本
xml 返回是xml數據
json 返回是json對象

\ 先把整個頁面po出來~:

// ajax請求
		$("#ajaxBtn").click(function(){
   // 這是ajax() 的單擊事件
			   $.ajax({
			      url:"http://localhost:8080/ajax_test/ajaxServlet",
			      type : "GET",
			      data: "action=jQueryAjax",
			      success:function(data){// success的函數要有一個參數.這個參數就是服務器返回的數據
			         // alert(data);
			         var jsonObj = JSON.parse(data);
			         $("#msg").html("編號: " + jsonObj.id + " , 名稱: " + jsonObj.name);
			      },
			      dataType:"text"
			   });
			});
				// ajax--get請求
				$("#getBtn").click(function(){

					$.get("http://localhost:8080/ajax_test/ajaxServlet",
							{action:"jQueryGet"},
							function (data) {
								// alert(data);
								// var jsonObj = JSON.parse(data);
								// $("#msg").html("編號: " + jsonObj.id + " , 名稱: " + jsonObj.name);
								$("#msg").html("編號: " + data.id + " , 名稱: " + data.name);
							},"json");
					
				});
				
				// ajax--post請求
				$("#postBtn").click(function(){
					// post請求
					$.post("http://localhost:8080/ajax_test/ajaxServlet",
							"action=jQueryPost",
							function (data) {
								$("#msg").html("編號: " + data.id + " , 名稱: " + data.name);
							},"json");
					
				});

				// ajax--getJson請求
				$("#getJSONBtn").click(function(){
					// 調用
					$.getJSON("http://localhost:8080/ajax_test/ajaxServlet","action=jQueryGetJSON",function (data) {
						$("#msg").html("編號: " + data.id + " , 名稱: " + data.name);
					});
				});

				// ajax請求
				$("#submit").click(function(){
					// 把參數序列化
					$.getJSON("http://localhost:8080/ajax_test/ajaxServlet",
							"action=jQuerySerialize&"+$("#form01").serialize(),
							function (data) {
								$("#msg").html("編號: " + data.id + " , 名稱: " + data.name);
							}
					);
				});
				
			});
		</script>
	</head>
	<body>
		<div>
			<button id="ajaxBtn">$.ajax請求</button>
			<button id="getBtn">$.get請求</button>
			<button id="postBtn">$.post請求</button>
			<button id="getJSONBtn">$.getJSON請求</button>
		</div>
		<!--自己添加一個,用於局部更新數據-->
		<div id="msg"></div>
		<br/><br/>
		<form id="form01" action="http://localhost:8080">
			用戶名：<input name="username" type="text" /><br/>
			密碼：<input name="password" type="password" /><br/>
			下拉單選：<select name="single">
			  	<option value="Single">Single</option>
			  	<option value="Single2">Single2</option>
			</select><br/>
		  	下拉多選：
		  	<select name="multiple" multiple="multiple">
		    	<option selected="selected" value="Multiple">Multiple</option>
		    	<option value="Multiple2">Multiple2</option>
		    	<option selected="selected" value="Multiple3">Multiple3</option>
		  	</select><br/>
		  	複選：
		 	<input type="checkbox" name="check" value="check1"/> check1
		 	<input type="checkbox" name="check" value="check2" checked="checked"/> check2<br/>
		 	單選：
		 	<input type="radio" name="radio" value="radio1" checked="checked"/> radio1
		 	<input type="radio" name="radio" value="radio2"/> radio2<br/>
		</form>
		<button id="submit">提交--serialize()</button>
	</body>
</html>

$.get方法和$.post方法

我們可以使用這兩個方法來更加簡化:
$.get()方法底層調用的是$.ajax()方法,只是少似了一個參數.,就是GET.
$.post()方法底層調用的是$.ajax()方法,只是少似了一個參數.,就是POST.

url 請求的資源路徑
data 發送給服務器的數據
格式有: name=value&name=value 或 { key:value,key:value}
callback 成功的回調函數
type 返回的數據類型: text , xml , json

$.getJSON方法

固定以get請求的方式發起ajax請求,返回的數據類型固定是json對象
url 請求的url地址
data 發送給服務器的數據
callback 成功的回調函數

表單序列化serialize()

它可以把表單中,所有表單項,都以name=value&name=value的形式獲取到它們的信息.

使用示例:
form對象.serialize()