AJAX && JSON

1. AJAX：
2. JSON

AJAX：

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

Ajax 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。
通過在後臺與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
傳統的網頁（不使用 Ajax）如果需要更新內容，必須重載整個網頁頁面。
提升用戶的體驗

2. 實現方式：
	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實現方式

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：響應結果的類型

function  fun() {

            $.post("ajaxServlet",{username:"rose"},function (data) {
                alert(data);
            },"text");

        }
function  fun() {

            $.get("ajaxServlet",{username:"rose"},function (data) {
                alert(data);
            },"text");

        }

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. 數組對象[索引]

 //1.定義基本格式
        var person = {"name": "張三", age: 23, 'gender': true};

        //獲取name的值
        //var name = person.name;
        var name = person["name"];
        alert(name);

        //alert(person);
        //2.嵌套格式   {}———> []
        var persons = {
            "persons": [
                {"name": "張三", "age": 23, "gender": true},
                {"name": "李四", "age": 24, "gender": true},
                {"name": "王五", "age": 25, "gender": false}
                ]
        };
       // alert(persons);
        //獲取王五值
        var name1 = persons.persons[2].name;
       // alert(name1);


        //2.嵌套格式   []———> {}
        var ps = [{"name": "張三", "age": 23, "gender": true},
            {"name": "李四", "age": 24, "gender": true},
            {"name": "王五", "age": 25, "gender": false}];
        //獲取李四值
        //alert(ps);
        alert(ps[1].name);

		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

	1. JSON轉爲Java對象
		1. 導入jackson的相關jar包
		2. 創建Jackson核心對象 ObjectMapper
		3. 調用ObjectMapper的相關方法進行轉換
			1. readValue(json字符串數據,Class)

@Test
    public void test5() throws Exception {
       //1.初始化JSON字符串
        String json = "{\"gender\":\"男\",\"name\":\"張三\",\"age\":23}";

        //2.創建ObjectMapper對象
        ObjectMapper mapper = new ObjectMapper();
        //3.轉換爲Java對象 Person對象
        Person person = mapper.readValue(json, Person.class);

        System.out.println(person);
    }

	2. Java對象轉換JSON
		1. 使用步驟：
			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字符串

 @Test
    public void test1() throws Exception {
        //1.創建Person對象
        Person p  = new Person();
        p.setName("張三");
        p.setAge(23);
        p.setGender("男");

        //2.創建Jackson的核心對象  ObjectMapper
        ObjectMapper mapper = new ObjectMapper();
        //3.轉換
        /*

            轉換方法：
                writeValue(參數1，obj):
                    參數1：
                        File：將obj對象轉換爲JSON字符串，並保存到指定的文件中
                        Writer：將obj對象轉換爲JSON字符串，並將json數據填充到字符輸出流中
                        OutputStream：將obj對象轉換爲JSON字符串，並將json數據填充到字節輸出流中
                writeValueAsString(obj):將對象轉爲json字符串

         */
        String json = mapper.writeValueAsString(p);
        //{"name":"張三","age":23,"gender":"男"}
        System.out.println(json);//{"name":"張三","age":23,"gender":"男"}



        //writeValue，將數據寫到d://a.txt文件中
        //mapper.writeValue(new File("d://a.txt"),p);

        //writeValue.將數據關聯到Writer中
        //mapper.writeValue(new FileWriter("d://b.txt"),p);
    }

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

//@JsonIgnore // 忽略該屬性
    @JsonFormat(pattern = "yyyy-MM-dd")
    private Date birthday;

				3. 複雜java對象轉換
					1. List：數組

@Test
    public void test3() throws Exception {
        //1.創建Person對象
        Person p = new Person();
        p.setName("張三");
        p.setAge(23);
        p.setGender("男");
        p.setBirthday(new Date());

        Person p1 = new Person();
        p1.setName("張三");
        p1.setAge(23);
        p1.setGender("男");
        p1.setBirthday(new Date());

        Person p2 = new Person();
        p2.setName("張三");
        p2.setAge(23);
        p2.setGender("男");
        p2.setBirthday(new Date());


        //創建List集合
        List<Person> ps = new ArrayList<Person>();
        ps.add(p);
        ps.add(p1);
        ps.add(p2);


        //2.轉換
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(ps);
        // [{},{},{}]
        //[{"name":"張三","age":23,"gender":"男","birthday":"2018-07-07"},{"name":"張三","age":23,"gender":"男","birthday":"2018-07-07"},{"name":"張三","age":23,"gender":"男","birthday":"2018-07-07"}]
        System.out.println(json);
    }

					2. Map：對象格式一致

@Test
    public void test4() throws Exception {
        //1.創建map對象
        Map<String,Object> map = new HashMap<String,Object>();
        map.put("name","張三");
        map.put("age",23);
        map.put("gender","男");


        //2.轉換
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(map);
        //{"name":"張三","age":23,"gender":"男"}
        System.out.println(json);//{"gender":"男","name":"張三","age":23}
    }

案例：

* 校驗用戶名是否存在
	1. 服務器響應的數據，在客戶端使用時，要想當做json數據格式使用。有兩種解決方案：
		1. $.get(type):將最後一個參數type指定爲"json"
		2. 在服務器端設置MIME類型
			response.setContentType("application/json;charset=utf-8");

//在頁面加載完成後
        $(function () {
           //給username綁定blur事件
           $("#username").blur(function () {
               //獲取username文本輸入框的值
               var username = $(this).val();
               //發送ajax請求
               //期望服務器響應回的數據格式：{"userExsit":true,"msg":"此用戶名太受歡迎,請更換一個"}
               //                         {"userExsit":false,"msg":"用戶名可用"}
               $.get("findUserServlet",{username:username},function (data) {
                   //判斷userExsit鍵的值是否是true

                   // alert(data);
                   var span = $("#s_username");
                   if(data.userExsit){
                       //用戶名存在
                       span.css("color","red");
                       span.html(data.msg);
                   }else{
                       //用戶名不存在
                       span.css("color","green");
                       span.html(data.msg);
                   }
               });

           }); 
        });



<form>

        <input type="text" id="username" name="username" placeholder="請輸入用戶名">
        <span id="s_username"></span>
        <br>
        <input type="password" name="password" placeholder="請輸入密碼"><br>
        <input type="submit" value="註冊"><br>

    </form>

@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.獲取用戶名
        String username = request.getParameter("username");

        //2.調用service層判斷用戶名是否存在

        //期望服務器響應回的數據格式：{"userExsit":true,"msg":"此用戶名太受歡迎,請更換一個"}
        //                         {"userExsit":false,"msg":"用戶名可用"}

        //設置響應的數據格式爲json
        response.setContentType("application/json;charset=utf-8");
        Map<String,Object> map = new HashMap<String,Object>();

        if("tom".equals(username)){
            //存在
            map.put("userExsit",true);
            map.put("msg","此用戶名太受歡迎,請更換一個");
        }else{
            //不存在
            map.put("userExsit",false);
            map.put("msg","用戶名可用");
        }

        //將map轉爲json，並且傳遞給客戶端
        //將map轉爲json
        ObjectMapper mapper = new ObjectMapper();
        //並且傳遞給客戶端
        mapper.writeValue(response.getWriter(),map);


    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}