筆記3：Ajax&&Json基礎

阿新 • • 發佈：2020-07-20

一、AJAX筆記

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);
	}
}

2. JQeury實現方式

---$.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"                          //設定接受到的響應資料的格式
	});
---$.get()：傳送get請求                語法：$.get(url, [data], [callback], [type])
---$.post()：傳送post請求              語法：$.post(url, [data], [callback], [type])
	* 引數：
	* url：請求路徑
	* data：請求引數		{鍵:"值",.....}
	* callback：回撥函式
	* type：響應結果的型別

二、json筆記

JSON===JavaScript Object Notation	JavaScript物件表示法	最初用來封裝物件
格式例如：var p = {"name":"張三","age":23,"gender":"男"};
功能：json現在多用於儲存和交換文字資訊的語法		進行資料的傳輸	
特點：JSON 比 XML 更小、更快，更易解析。

語法：

基本規則

----json資料是由鍵值對構成的
----多個鍵值對逗號分隔
----花括號儲存物件：使用{}定義json 格式
----方括號儲存陣列：[]
      * 鍵用引號(單雙都行)引起來，也可以不使用引號
      * 值得取值型別：
	1. 數字（整數或浮點數）
	2. 字串（在雙引號中）
	3. 邏輯值（true 或 false）
	4. 陣列（在方括號中）	{"persons":[{},{}]}
	5. 物件（在花括號中） {"address":{"province"："陝西"....}}
	6. null

獲取資料:

1. json物件.鍵名
2. json物件["鍵名"]
3. 陣列物件[索引]
4. 遍歷
	//獲取ps中的所有值	ps為儲存了persons資料的json		
	for (var i = 0; i < ps.length; i++) {
		var p = ps[i];
		for(var key in p){
			alert(key+":"+p[key]);
		}
	}
	for(var key in person){
		
		//alert(key + ":" + person.key);
                  //這樣的獲取不了,因為key是字串
                  //person.key相當於person."鍵名"
		  //person.鍵名才可以獲取
		alert(key+":"+person[key]);
	}

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

	----常見的JSON解析器：Jsonlib，Gson，fastjson，jackson
	1. JSON轉為Java物件
		1. 匯入jackson的相關jar包
			com.fasterxml.jackson.core:jackson-annotations:2.9.0
			com.fasterxml.jackson.core:jackson-core:2.9.0
			com.fasterxml.jackson.core:jackson-databind:2.9.0
		2. 建立Jackson核心物件 ObjectMapper
		3. 呼叫ObjectMapper的相關方法進行轉換
			1. readValue(json字串資料,Class)
	2. Java物件轉換JSON
		1. 匯入jackson的相關jar包
		2. 建立Jackson核心物件 ObjectMapper
		3. 呼叫ObjectMapper的相關方法進行轉換
			1. 轉換方法：java物件  List陣列  Map物件轉換方法一樣
				* writeValue(引數1，obj) 
					引數1：
						File：將obj物件轉換為JSON字串，並儲存到指定的檔案中
						Writer：將obj物件轉換為JSON字串，並將json資料填充到字元輸出流中
						OutputStream：將obj物件轉換為JSON字串，並將json資料填充到位元組輸出流中

	----伺服器響應的資料，在客戶端使用時，要想當做json資料格式使用。有兩種解決方案：
		1. $.get(type):將最後一個引數type指定為"json"
		2. 在伺服器端設定MIME型別
			response.setContentType("application/json;charset=utf-8");