Ajax&Json

時間  2019-11-19
標籤 ajax&json ajax json 欄目 Ajax 简体版
原文   原文鏈接

<!doctype html>01 - JavaEE - Ajax&Jsonhtml

JavaEE - Ajax&Json

 
 
  
xxxxxxxxxx
 
 
 
  
1. AJAX：ASynchronous JavaScript And XML(異步的JavaScript和xml)
2. JSON：JavaScript Object Notation (JavaScript對象表示法)
 

 

AJAX：

 
 
  
x
 
 
 
  
1. 概念： ASynchronous JavaScript And XML異步的JavaScript 和 XML
1. 異步和同步：客戶端和服務器端相互通訊的基礎上
* 客戶端必須等待服務器端的響應。在等待的期間客戶端不能作其餘操做。
* 客戶端不須要等待服務器端的響應。在服務器處理請求的過程當中，客戶端能夠進行其餘的操做。
​
Ajax 是一種在無需從新加載整個網頁的狀況下，可以更新部分網頁的技術。 [1] 
經過在後臺與服務器進行少許數據交換，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：響應結果的類型
 
       
 
      
 
     
 
    
 
   
 
   

       
   
 
    
  
 
 
 
 
 
 
 
JSON：
 
 
 
  

      
  
 
  

      
  
 
  

      
  
 
  
 
   
 
    
 
     
 
      
 
       
 
        
x
 
       
 
       

           
       
 
       

           
       
 
       
 
        
 
         

             
         
 
         

             
         
 
         
1. 概念： JavaScript Object NotationJavaScript對象表示法
 
        
 
        
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){ ​ //這樣的方式獲取不行。由於至關於 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]); ​ } ​ }java
 
 
 
  

      
  
 
  

      
  
 
  

      
  
 
  
 
   
 
    
 
     
 
      
 
       
 
        
x
 
       
 
       

           
       
 
       

           
       
 
       
 
        
 
         
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. 使用步驟：
 
        
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：對象格式一致
 
       
 
      
 
     
 
    
 
   
   
  
 
 
 



        

            

        	





    

		

            
相關文章

            

                

                

                    

                

            


            
相關標籤/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

    
    
    	每一个你不满意的现在，都有一个你没有努力的曾经。
    







    

    


    



    

        本站公眾號
    

    

           歡迎關注本站公眾號,獲取更多信息

        
    




    

    




	


	







    

        聯繫我們
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程