JavaWeb學習筆記17--Ajax&Json

上一篇：JavaWeb學習筆記16–JQuery(2)
下一篇：JavaWeb學習筆記18–redis學習

AJAX學習：

• 1. ajax概念：ASynchronous JavaScript And XML 異步的JavaScript 和 XML
  異步和同步：客戶端和服務器端相互通信的基礎上
同步：客戶端必須等待服務器端的響應。在等待的期間客戶端不能做其他操作。

異步： 客戶端不需要等待服務器端的響應。在服務器處理請求的過程中，客戶端可以進行其他的操作。
  

  • Ajax 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。
  • 通過在後臺與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

2. 實現方式：

• 原生的JS實現方式:

1. 原生的JS實現方式
//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. 建立連接
/* 參數：
        1. 請求方式：GET、POST
            * get方式，請求參數在URL後邊拼接。send方法爲空參
            * post方式，請求參數在send方法中定義
        2. 請求的URL：
        3. 同步或異步請求：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);
    }
}

• JQuery實現方式:

1. $.ajax()
* 語法：$.ajax({鍵值對});
 //使用$.ajax()發送異步請求
     $.ajax({
          url:"ajaxServlet1111" , // 請求路徑
          type:"POST" , //請求方式
          //data: "username=jack&age=23",//請求參數
          data:{"username":"jack","age":23},
          success:function (data) {
              alert(data);
          },//響應成功後的回調函數
          error:function () {
              alert("出錯啦...")
          },//表示如果請求響應出現錯誤，會執行的回調函數

          dataType:"text"//設置接受到的響應數據的格式
      });
2. $.get()：發送get請求
* 語法：$.get(url, [data], [callback], [type])
	* 參數：
		* url：請求路徑
		* data：請求參數
		* callback：回調函數
		* type：響應結果的類型

3. $.post()：發送post請求
* 語法：$.post(url, [data], [callback], [type])
	* 參數：
		* url：請求路徑
		* data：請求參數
		* callback：回調函數
		* type：響應結果的類型
		

JSON：

1. 概念： JavaScript Object Notation JavaScript對象表示法

Person p = new Person();
p.setName("張三");
p.setAge(23);
p.setGender("男");

var p = {"name":"張三","age":23,"gender":"男"};

* json現在多用於存儲和交換文本信息的語法
* 進行數據的傳輸
* JSON 比 XML 更小、更快，更易解析。

2. 語法：

1. 基本規則
	* 數據在名稱/值對中：json數據是由鍵值對構成的
		* 鍵用引號(單雙都行)引起來，也可以不使用引號
		* 值得取值類型：
			1. 數字（整數或浮點數）
			2. 字符串（在雙引號中）
			3. 邏輯值（true 或 false）
			4. 數組（在方括號中）	{"persons":[{},{}]}
			5. 對象（在花括號中） {"address":{"province"："陝西"....}}
			6. null
	* 數據由逗號分隔：多個鍵值對由逗號分隔
	* 花括號保存對象：使用{}定義json 格式
	* 方括號保存數組：[]
2. 獲取數據:
	1. json對象.鍵名
	2. json對象["鍵名"]
	3. 數組對象[索引]
	4. 遍歷
		//1.定義基本格式
        var person = {"name": "張三", age: 23, 'gender': true};

        var ps = [{"name": "張三", "age": 23, "gender": true},
            {"name": "李四", "age": 24, "gender": true},
            {"name": "王五", "age": 25, "gender": false}];

        //獲取person對象中所有的鍵和值
        //for in 循環
        for(var key in person){
            alert(key+":"+person[key]);
        }

       //獲取ps中的所有值
        for (var i = 0; i < ps.length; i++) {
            var p = ps[i];
            for(var key in p){
                alert(key+":"+p[key]);
            }
        }

3. JSON數據和Java對象的相互轉換

* JSON解析器：
	* 常見的解析器：Jsonlib，Gson，fastjson，jackson

1. JSON轉爲Java對象
	1. 導入jackson的相關jar包
	2. 創建Jackson核心對象 ObjectMapper
	3. 調用ObjectMapper的相關方法進行轉換
		1. readValue(json字符串數據,Class)
2. Java對象轉換JSON
使用步驟：
	1. 導入jackson的相關jar包
	2. 創建Jackson核心對象 ObjectMapper
	3. 調用ObjectMapper的相關方法進行轉換
		1. 轉換方法：
			* writeValue(參數1，obj):
                   參數1：
                       File：將obj對象轉換爲JSON字符串，並保存到指定的文件中
                       Writer：將obj對象轉換爲JSON字符串，並將json數據填充到字符輸出流中
                       OutputStream：將obj對象轉換爲JSON字符串，並將json數據填充到字節輸出流中
               * writeValueAsString(obj):將對象轉爲json字符串

		2. 註解：
			1. @JsonIgnore：排除屬性。
			2. @JsonFormat：屬性值得格式化
				* @JsonFormat(pattern = "yyyy-MM-dd")

		3. 複雜java對象轉換
			1. List：數組
			2. Map：對象格式一致
				

上一篇：JavaWeb學習筆記16–JQuery(2)
下一篇：JavaWeb學習筆記18–redis學習