JAVA學習日誌——Ajax和Json

時間  2019-11-19
標籤 java 學習 日誌 ajax json 欄目 Java 简体版
原文   原文鏈接

# JAVA學習日誌——Ajax和Json #
Ajax和Json在一個web項目中能夠說是常常用到了，Ajax是一種用於建立快速動態網頁的技術，而Json則是一種與語言無關的數據交換的格式。如下是我的在學習過程當中的總結。
1、Ajax
1.同步與異步
在學習Ajax以前咱們要先知道什麼是同步，什麼是異步。
同步現象：客戶端發送請求到服務器端，當服務器返回響應以前，客戶端都處於等待卡死狀態。
異步現象：客戶端發送請求到服務器端，不管服務器是否返回響應，客戶端均可以隨    意作其餘事情，不會被卡死。
2.Ajax介紹
Ajax 即「Asynchronous Javascript And XML」（異步 JavaScript 和 XML），可使網頁實現異步更新，就是不從新加載整個網頁的狀況下，對網頁的某部分進行更新(局部刷新)。Ajax = 異步 JavaScript 和 XML（標準通用標記語言的子集），是一種新的思想，整合以前的多種技術(不是一個新技術)，用於建立快速交互式網頁應用的網頁開發技術。
對於什麼是局部刷新，我的理解就是爲了避免引發整個整個頁面的回發，由某一事件觸發ajax根據須要從服務器獲取某一部分數據。
3.Ajax的優勢
1）用戶：無需刷新更新頁面，減小用戶等待的時間內，提高用戶體驗
2）服務器：減小服務器負擔，ajax"按需取數據"，減輕了服務器的壓力
3）成本：最大限度的減小冗餘請求，節省了寬帶，下降了成本
以下圖說明原始訪問方式和Ajax訪問方式區別javascript

 4.Ajax編程過程(js原生Ajax技術)html

<script type="text/javascript">
    function fn1(){
        //1.建立Ajax引擎對象
        var xmlHttp = new XMLHttpRequest();
        //2.綁定監聽---監聽服務器是否返回對應的數據
        xmlHttp.onreadstatechange = function (){
            if(xmlHttp.readState==4&&xmlHttp.status==200){
                //5.接受相應的數據
                var res = xmlHttp.responseText;
                document.getElementById("span1").innerHTML = res;
            }
        }
        ///3.綁定地址
        xmlHttp.open("GET","${pageContext.request.contextPath}/ajax/ajaxServlet",true);
        //4.發送請求
        xmlHttp.send();
    }
</script>
<body>
    <input type="button" value="異步訪問" onclick="fn1()"><span id="span1"></span>
</body>

 5.Ajax引擎對象的方法和屬性
1）XMLHttpRequest就是Ajax引擎對象
2）open()----準備請求
3）send()----發送請求
4）readyState----對象的的生命週期狀態
5）onreadstatechange----生命週期事件屬性
6）status----表明HTTP響應狀態碼，如200，404，500等
7）responseText----獲得普通的字符串響應

6.Ajax的生命週期
有5個屬性值，對應5種狀態
1）建立XMLHttpRequest對象（readyState值爲0）
2）裝備請求（readyState值爲1）
3）發送請求（readyState值爲2）
4）接受響應（readyState值爲3）
5）響應結束（readyState值爲4）
注：每次readyState值的改變，都會觸發readystatechange事件。

7.Ajax的運行原理
1）使用js得到瀏覽器內置的ajax引擎，經過Ajax引擎肯定請求路徑和請求參數並通知ajax引擎發送請求
2）Ajax引擎會在不刷新瀏覽器地址欄的狀況下，發送請求
3）服務器得到請求參數並處理數據，以後將處理結果響應給瀏覽器
4）Ajax得到服務器響應數據，並調用瀏覽器，執行js的回掉函數將數據傳遞給瀏覽器頁面
注：Ajax是事件驅動的，當生命週期狀態改變時，監聽器就會被觸發，在監聽器中咱們經過判斷當前生命週期狀態碼作不一樣的事情。

二.Json
1.Json是一種與語言無關的數據交換的格式，做用：
1)使用ajax進行先後臺數據交換
2)移動端與服務端的數據交換

2.Json的格式
json有兩種格式：
1）對象格式：{"key1":obj,"key2":obj,"key3":obj...}
2）數組/集合格式：[obj,obj,obj...]
例：user對象 用json數據格式表示
{"username":"zhangsan","age":28,"password":"123","addr":"北京"}

List<Product> 用json數據格式表示
[{"pid":"10","pname":"iphonex"},{},{}]

注：
    1）對象格式和數組格式能夠互相嵌套
    2）json的key是字符串  json的value是Object

3.Json的轉換插件
json的轉換插件是經過java的一些工具，直接將java對象或集合轉換成json字符串。
經常使用的json轉換工具備以下幾種：
1）jsonlib
2）Gson：google
3）fastjson：阿里巴巴

三.Jquery的Ajax技術
jquery是一個js框架，內部封裝了不少函數和對象，天然也對js原生的ajax進行了封裝，封裝後的ajax的操做方法更簡潔，功能更強大，與ajax操做相關的jquery方法有以下幾種，但常用的有三種
1）$.get(url, [data], [callback], [type])
2）$.post(url, [data], [callback], [type])
其中：
url：表明請求的服務器端地址
data：表明請求服務器端的數據（能夠是key=value形式也能夠是json格式）
callback：表示服務器端成功響應所觸發的函數（只有正常成功返回才執行）
type：表示服務器端返回的數據類型（jquery會根據指定的類型自動類型轉換）
經常使用的返回類型：text、json、html等
例：java

 （1）頁面請求並接受返回值jquery

<script type="text/javascript">
    function fn1(){
        //get異步訪問
        $.get(
            //url地址
            "/WEB05/ajaxServlet",
            //請求參數
            {"uname":"小明","age":18},
            //執行成功後的回掉函數
            function(data){//內部接收響應的參數
                console.log(data.name);
            },
            //返回參數的額類型
            "json"
        );
    }
    function fn2(){
        //post異步訪問
        $.post(
            //url地址
            "/WEB05/ajaxServlet",
            //請求參數
            {"name":"小紅","age":16},
            //執行成功後的回掉函數
            function(data){//內部接收響應的參數
                console.log(data.name);
            },
            //返回參數的額類型
            "json"
        );
    }
</script>
<body>
    <input type="button" value="get訪問服務器端" onclick="fn1()"><span id="span1"></span>
    <br>
    <input type="button" value="post訪問服務器端" onclick="fn2()"><span id="span2"></span>
    <br>
</body>

 （2）服務器接受請求並返回值web

protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        
        request.setCharacterEncoding("UTF-8");
        //得到請求參數
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        //打印請求參數
        System.out.println(name+"  "+age);
        
        //java代碼只能返回一個json格式的字符串
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().write("{\"name\":\"呵呵\",\"age\":21}");
        
    }

 3）$.ajax( { option1:value1,option2:value2... } );
經常使用的option有以下：
async：是否異步，默認是true表明異步
data：發送到服務器的參數，建議使用json格式
dataType：服務器端返回的數據類型，經常使用text和json
success：成功響應執行的函數，對應的類型是function類型
type：請求方式，POST/GET
url：請求服務器端地址
例ajax

<script type="text/javascript">
    function fn3(){
        $.ajax({
            //請求地址
            url:"/WEB05/ajaxServlet",
            //是否異步
            async:true,
            //請求方式
            type:"POST",
            //請求參數
            data:{"name":"小芳","age":18},
            //成功響應後執行的函數
            success:function(data){
                console.log(data.name);
            },
            //響應失敗後執行的函數
            error:function(){
                console.log("請求失敗");
            },
            //返回的數據類型
            dataType:"json"
        });
    }
</script>
<body>
    <input type="button" value="ajax訪問服務器端" onclick="fn3()"><span id="span3"></span>
    <br>
</body>

 

 4.Ajax編程過程(js原生Ajax技術)
<script type="text/javascript">
    function fn1(){
        //1.建立Ajax引擎對象
        var xmlHttp = new XMLHttpRequest();
        //2.綁定監聽---監聽服務器是否返回對應的數據
        xmlHttp.onreadstatechange = function (){
            if(xmlHttp.readState==4&&xmlHttp.status==200){
                //5.接受相應的數據
                var res = xmlHttp.responseText;
                document.getElementById("span1").innerHTML = res;
            }
        }
        ///3.綁定地址
        xmlHttp.open("GET","${pageContext.request.contextPath}/ajax/ajaxServlet",true);
        //4.發送請求
        xmlHttp.send();
    }
</script>
<body>
    <input type="button" value="異步訪問" onclick="fn1()"><span id="span1"></span>
</body>

5.Ajax引擎對象的方法和屬性
1）XMLHttpRequest就是Ajax引擎對象
2）open()----準備請求
3）send()----發送請求
4）readyState----對象的的生命週期狀態
5）onreadstatechange----生命週期事件屬性
6）status----表明HTTP響應狀態碼，如200，404，500等
7）responseText----獲得普通的字符串響應

6.Ajax的生命週期
有5個屬性值，對應5種狀態
1）建立XMLHttpRequest對象（readyState值爲0）
2）裝備請求（readyState值爲1）
3）發送請求（readyState值爲2）
4）接受響應（readyState值爲3）
5）響應結束（readyState值爲4）
注：每次readyState值的改變，都會觸發readystatechange事件。

7.Ajax的運行原理
1）使用js得到瀏覽器內置的ajax引擎，經過Ajax引擎肯定請求路徑和請求參數並通知ajax引擎發送請求
2）Ajax引擎會在不刷新瀏覽器地址欄的狀況下，發送請求
3）服務器得到請求參數並處理數據，以後將處理結果響應給瀏覽器
4）Ajax得到服務器響應數據，並調用瀏覽器，執行js的回掉函數將數據傳遞給瀏覽器頁面
注：Ajax是事件驅動的，當生命週期狀態改變時，監聽器就會被觸發，在監聽器中咱們經過判斷當前生命週期狀態碼作不一樣的事情。

二.Json
1.Json是一種與語言無關的數據交換的格式，做用：
1)使用ajax進行先後臺數據交換
2)移動端與服務端的數據交換

2.Json的格式
json有兩種格式：
1）對象格式：{"key1":obj,"key2":obj,"key3":obj...}
2）數組/集合格式：[obj,obj,obj...]
例：user對象 用json數據格式表示
{"username":"zhangsan","age":28,"password":"123","addr":"北京"}

List<Product> 用json數據格式表示
[{"pid":"10","pname":"iphonex"},{},{}]

注：
    1）對象格式和數組格式能夠互相嵌套
    2）json的key是字符串  json的value是Object

3.Json的轉換插件
json的轉換插件是經過java的一些工具，直接將java對象或集合轉換成json字符串。
經常使用的json轉換工具備以下幾種：
1）jsonlib
2）Gson：google
3）fastjson：阿里巴巴

三.Jquery的Ajax技術
jquery是一個js框架，內部封裝了不少函數和對象，天然也對js原生的ajax進行了封裝，封裝後的ajax的操做方法更簡潔，功能更強大，與ajax操做相關的jquery方法有以下幾種，但常用的有三種
1）$.get(url, [data], [callback], [type])
2）$.post(url, [data], [callback], [type])
其中：
url：表明請求的服務器端地址
data：表明請求服務器端的數據（能夠是key=value形式也能夠是json格式）
callback：表示服務器端成功響應所觸發的函數（只有正常成功返回才執行）
type：表示服務器端返回的數據類型（jquery會根據指定的類型自動類型轉換）
經常使用的返回類型：text、json、html等
例：
（1）頁面請求並接受返回值
<script type="text/javascript">
    function fn1(){
        //get異步訪問
        $.get(
            //url地址
            "/WEB05/ajaxServlet",
            //請求參數
            {"uname":"小明","age":18},
            //執行成功後的回掉函數
            function(data){//內部接收響應的參數
                console.log(data.name);
            },
            //返回參數的額類型
            "json"
        );
    }
    function fn2(){
        //post異步訪問
        $.post(
            //url地址
            "/WEB05/ajaxServlet",
            //請求參數
            {"name":"小紅","age":16},
            //執行成功後的回掉函數
            function(data){//內部接收響應的參數
                console.log(data.name);
            },
            //返回參數的額類型
            "json"
        );
    }
</script>
<body>
    <input type="button" value="get訪問服務器端" onclick="fn1()"><span id="span1"></span>
    <br>
    <input type="button" value="post訪問服務器端" onclick="fn2()"><span id="span2"></span>
    <br>
</body>
（2）服務器接受請求並返回值
protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        
        request.setCharacterEncoding("UTF-8");
        //得到請求參數
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        //打印請求參數
        System.out.println(name+"  "+age);
        
        //java代碼只能返回一個json格式的字符串
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().write("{\"name\":\"呵呵\",\"age\":21}");
        
    }

3）$.ajax( { option1:value1,option2:value2... } );
經常使用的option有以下：
async：是否異步，默認是true表明異步
data：發送到服務器的參數，建議使用json格式
dataType：服務器端返回的數據類型，經常使用text和json
success：成功響應執行的函數，對應的類型是function類型
type：請求方式，POST/GET
url：請求服務器端地址
例
<script type="text/javascript">
    function fn3(){
        $.ajax({
            //請求地址
            url:"/WEB05/ajaxServlet",
            //是否異步
            async:true,
            //請求方式
            type:"POST",
            //請求參數
            data:{"name":"小芳","age":18},
            //成功響應後執行的函數
            success:function(data){
                console.log(data.name);
            },
            //響應失敗後執行的函數
            error:function(){
                console.log("請求失敗");
            },
            //返回的數據類型
            dataType:"json"
        });
    }
</script>
<body>
    <input type="button" value="ajax訪問服務器端" onclick="fn3()"><span id="span3"></span>
    <br>
</body>編程

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程