jQuery高階回顧

* 動畫
	* show
	* hide
	* toggle

	* slideUp
	* slideDown
	* slideToggle
	* 	注意：需要設定寬度
	
	* fadeOut
	* fadeIn
	* fadeToggle
* 遍歷
	* $("選擇器").each(function(i,n){})
	* $.each(陣列，function(i,n){})
	* return true/false
* 事件繫結：
	* on/off
	* bind/unbind

	* $("選擇器").on("事件名稱",function(){})
	* $("選擇器").off("事件名稱")

* jquery外掛匯入
	* 在jquery後面引入一個外部js檔案。
 

今日必須掌握：

ajax:
	* 概念
	* jquery使用ajax（重點）
		* $.ajax({})
		* $.get()
		* $.post()
json:
	* json的格式：
	* java物件如何轉json字串（jackson）

今日內容

1.AJAX
2.JSON

AJAX:增強使用者體驗，非常重要的一門技術（非同步）；

1.概念：ASYnchronous JavaScript And XML       非同步的Javascript和XML
	1.非同步和同步：客戶端和伺服器端相互通訊的基礎上
		* 客戶端必須等待服務端的響應。在等待的期間客戶端不能做其他操作。
		* 客戶端不需要等待伺服器端的響應。在伺服器處理請求的過程中，客戶端可以進行其他的操作。
	

		* Ajax是一種無須重新載入整個網頁的情況下，能夠更新部分網頁的技術.[1]
		* 通過在後臺與伺服器進行少量資料交換，Ajax可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用Ajax），如果需要更新內容，必須過載整個網頁頁面。
		
		* 提升使用者的體驗。
		* 比如百度搜索聯想的功能，不需要更新全部的網頁內容，只需要更新指定的搜尋值內容。
		* 	1.非同步操作   2.（不載入整個網頁的情況下）區域性更新。
		* 	
2.實現方式：
	1.原生的JS實現方式（瞭解）
		//建立核心物件
		* 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");
		* 		}
		* //傳送請求：
		* //引數：  
		* 	1.請求的方式：GET、POST  ,get方式，請求引數在URL後邊拼接。send方法為空參。	post方式：請求引數在send方法中定義。
		* 	2.請求的URL：
		* 	3.同步或非同步請求：true（非同步）或false（同步） 
		* 		
		* xmlhttp.open("GET","text1.txt","true")	
		* xmlhttp.send()；
		* //接收並處理來自伺服器的響應結果：



	-- 使用ajax既可以發同步請求，也可以傳送非同步請求。
		* 當xmlhttp物件的就緒狀態改變時，觸發事件onreadystatechange。
		* xmlhttp.onreadystatechange=function(){
		if(http)

	}

2.JQuery實現方式：
	1.$.ajax()
		* 語法；$.ajax({鍵值對})
		* 舉例：
			* $.ajax({			//使用$.ajax()傳送非同步請求
			* url:"ajaxServlet",	//請求路徑    以後最好是寫絕對路徑。
			* type:"POST",		//請求方式	
			* data:{"username":"jack","age":23},	//請求引數
			* success:function(data){
			*	 alert(data);		//響應成功後的回撥函式
			*	 },
			* error:function{
			* 	alert("出錯啦...")	//表示如果請求響應出現錯誤，會執行的回撥函式。
			* 	}，
			* 	dataType:"text"			//設定接收到的響應資料的格式。	也可能用到dataType:"json"			dataType:"jsonp"
			* });
	

	-- 實際應用開發過程中，最好是使用絕對路徑而不是相對路徑。因為使用相對路徑容易出現重合問題。
	
	2.$.get():傳送get請求
		* 語法：$.get(url,[data],[callback],[type])
			* 引數：
				* url：請求路徑
				* data：請求引數
				* callback：回撥函式
				* type：響應結果的型別
		舉例：
			$.get("請求路徑"),{"username":"zs","age":18},
				function(){
					//獲取資料後的業務邏輯
					//介面展示
				},"text/json"
	3.$.post():傳送post請求
			$.post("請求路徑"),{"username":"zs","age":18},
				function(){
					//獲取資料後的業務邏輯
					//介面展示
				},"text/json"

	-- ajax請求中$.ajax()的dataType中才包含jsonp,jsonp解決跨域問題。使用jsonp解決跨域問題也會出現執行緒安全問題。
 

json

		json的格式
			* json物件
			* json陣列
		* 一般會處理複雜的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物件而言，大括號外面不能加引號。
	* 對陣列而言，json陣列是中括號。

2.語法：
	1.基本規則
		* 資料在名稱/值對中：json資料是由鍵值隊構成的
			1. 鍵用引號（單雙都行）引起來，也可以不使用引號
				* 
			2. 資料由逗號分隔：多個鍵值隊由逗號分隔
			3. 花括號儲存物件：使用{}定義json格式
			4. 方括號儲存陣列：[在方括號中]
			5. 物件（在花括號中）{"address"{"province":"陝西"...}}
		* 巢狀：陣列物件->基本物件索引    物件->鍵->陣列物件->物件  物件->鍵->索引
	2.獲取資料
		1.json物件.鍵名
		2.json物件["鍵名"]
		3.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){
		            //這樣的方式獲取不行。因為相當於  person."name"
		            //alert(key + ":" + person.key);
		            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：Spring框架內建的解析器
		1.Json物件轉為Java物件
		2.java物件轉為json
			1.使用步驟：
				1.匯入jackson的相關jar包
				2.建立jackson核心物件ObjectMapper
				3.呼叫ObjectMapper的相關方法進行轉換
					* 轉換方法：
						* writeValue(引數1，obj)：
							* 引數1：
								* File：將obj物件轉換為Json字串，並儲存到指定檔案中
								* Writer：將obj物件轉換為Json字串，並將json資料填充到字元輸出流中
								* OutputStream：將obj物件轉換為Json字串，並將json資料填充到位元組輸出流中
								* wirteValueAsString(obj):將物件轉為json
		
	演示：
		* ObjectMapper om=new ObjectMapper();
		* String result=om.writeValueAsString(物件/陣列/集合/map)    常用的方法。


			2.註解：
		* @JsonIgnore:排除屬性
		* @JsonFormat(pattern="yyyy-MM-dd")“：屬性的格式化
		
		
			3.複雜java物件轉換
				1.List：陣列
				2.Map：物件格式一致
 

案例：

* 校驗使用者名稱是否存在
	1.伺服器響應的資料，在客戶端使用時，要想當做json資料格式使用
		* $.get(type)：將最後一個引數type指定為"json"
		* 在伺服器端設定MIME型別
			response.setContentType("application/json;charset=utf-8");