day22【Ajax&Json】

今日內容

• AJAX
• JSON

1 AJAX

1.1 概念ASynchronous JavaScript And XML 異步的JavaScript 和 XML

1. 異步和同步：客戶端和服務器端相互通信的基礎上
   *客戶端必須等待服務器端的響應。在等待期間客戶端不能做其他操作。
   *客戶端不需要等待服務器端的響應。在服務器處理請求的過程中，客戶端可以進行其他的操作。
   Ajax 是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。
   通過在後臺與服務器進行少量數據交換，Ajax 可以使網頁實現異步更新。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
   傳統的網頁（不使用 Ajax）如果需要更新內容，必須重載整個網頁頁面。提升用戶體驗

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

2 JSON：

2.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.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}];