Web - ajax(異步重新整理) & json(資料交換格式)

一、AJAX

1.ajax是什麼?

AJAX: “Asynchronous JavaScript And XML”(異步JavaScript和XML)

異步重新整理: 不重新整理頁面的情況下 , 向伺服器發送請求.

2.ajax原理:

1.1 使用JavaScript獲得浏覽器内置的AJAX引擎(XMLHttpRequest)對象.

1.2 通過AJAX引擎确定請求路徑和請求參數.

1.3 通知AJAX引擎發送請求(在不重新整理浏覽器位址欄的情況下)

2.1 伺服器獲得請求參數後,進行處理請求參數.

2.2 伺服器響應資料給浏覽器.

2.3 AJAX引擎獲得伺服器響應的資料 , 通過執行js的回調函數将資料傳遞給浏覽器頁面.

3.jquery封裝好的ajax方法.

$.get(url , param , function(){ } , type);

$.post(url , param , function(data ,statusText , xhr ){

           url: 請求的位址.

           param: 請求的參數.

           function:回調函數 .

                    data: 伺服器傳回的資料.

                    statusText: 對于狀态碼的一個文字解析.

                    xhr:ajax對象.

          type: 是否要求jquery對傳回的資料進行格式處理.

} , type);

低級封裝方法(但更全面):

$.ajax({

          url:位址,

          data:參數

          type:“請求方式”,

          dataType:“jquery對于資料進行格式處理”,

          success:function(data,statusText,xhr){

                    //成功的回調函數

          },

          error:function(data,statusText,xhr){

                    //處理錯誤函數

          }

});

二、JSON

1.json:資料交換格式 -> 其實就是一個字元串.

json的對象格式:

    var json1 = {

          “屬性名”:屬性值 ,

          …

    }

    标準規範: key必須使用雙引号 ,

json的數組格式:

    var json = [ele1 , ele2 , …]         / / 多個之間用 , 隔開.

2.json-lib工具: 将java資料與json資料互相轉換的工具.

使用前提:

     1.導入jar包.

                連結：https://pan.baidu.com/s/1Bx1uPIhm4IT60gDVbnNVZA 密碼：87km

常用對象:

JSONObject : java對象(JavaBean , Map ) 與json資料轉換

JSONArray: java集合(List , Array ) 與json資料轉換

常用方法:

static fromObject (…): 靜态 , java對象/集合 -> jsonlib對象

toString (): 将jsonlib對象轉換為json字元串.

     例:

          JSONObject.fromObject(map).toString();

          JSONArray.fromObject(list).toString();

01_ajax案例:

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>post方法的使用</title>
    <!-- 導入js類庫  -->
    <script src="../js/jquery.js"></script>
    <script>
        // 點選事件.
        function req() {
            $.post("/test","username=juan",function (data) {
                $("#msg").html(data)
            })
        }
    </script>
</head>
<body>
    <input type="button" value="點我發送請求" onclick="req()">
    <div id="msg"></div>
</body>
</html>

02_json案例:

public class Test02 {
    @Test
    public void test01(){
        // java數組  --->  json格式.
        String[] str ={"你好","小明","小李"};
        String s = JSONArray.fromObject(str).toString();
        System.out.println(s);
    }

    @Test
    public void test02(){
        // List集合  --->  json格式.
        List<Object> list = new ArrayList<>();
        list.add("aaa");
        list.add("aaa");
        list.add("aaa");
        String s = JSONArray.fromObject(list).toString();
        System.out.println(s);
    }

    @Test
    public void test04(){
        // map集合  --->  json格式.
        Map<String , Object> map = new HashMap<>();
        map.put("aaa","老虎");
        map.put("bbb","老虎");
        map.put("ccc","老虎");
        String s = JSONObject.fromObject(map).toString();
        System.out.println(s);
    }

    @Test
    public void test06(){
        // List<JavaBean>   --->  json格式.
        List<User> list = new ArrayList<>();
        String s = JSONArray.fromObject(list).toString();
        System.out.println(s);
    }
}

Web - ajax(異步重新整理) &amp; json(資料交換格式)

一、AJAX

二、JSON

Web - ajax(異步重新整理) & json(資料交換格式)