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 lang="en">
<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(异步刷新) & json(数据交换格式)

一、AJAX

二、JSON

猜你喜欢