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(数据交换格式)