Fácil de usar JSON y AJAX

JSON

JSON (JavaScript Object Notation) es un formato de intercambio de datos de peso ligero , fácil de leer y escribir, pero también es fácil para las máquinas para analizar y generar. JSON con total independencia del idioma del texto, muchos idiomas proporciona soporte para JSON, por lo que es JSON idioma (entre cliente y servidor) un excelente intercambio de datos.

Un uso, JSON en JavaScript

1,1 json definido

//定义
var jsonobj = {
    "key1": 12,
    "key2": "abc",
    "key3": true,
    "key4": [11, "arr", false],
    "key5": {
        "key5_1": 222,
        "key5_2": "value"
    },
    "key6": [
        {
            "key6_1_1": 6611,
            "key6_1_2": "value"
        },
        {
            "key6_2_1": 7777,
            "key6_2_2": true
        }
    ]
};

1.2 Acceso JSON

JSON en sí es un objeto, atributo clave para un objeto comprensible

alert(typeof (jsonobj));        //object json是一个对象
alert(jsonobj.key1);            //12
alert(jsonobj.key2);            //abc
alert(jsonobj.key3);            //true
alert(jsonobj.key4);            //数组

//遍历数组
for (let i = 0; i < jsonobj.key4.length; i++) {
    alert(jsonobj.key4[i])
}

Dos métodos comunes 1.3 Json

Json están presentes en la forma de una cadena, y dos formas del objeto (el objeto cuando se requiera procedimiento general formato de datos JSON, intercambio de datos se lleva a cabo generalmente usando cadena JSON)

JSON.stringify (): convierte un objeto de cadena JSON

JSON.parse (): la cadena de caracteres en un objeto JSON

Dos, el uso de JSON en el servidor

2.1 JavaBean y la conversión entre JSON

//1.JavaBean与json互转
@Test
public void json1() {
    Person person = new Person(1,"磊爷");
    //创建Gson对象实例
    Gson gson = new Gson();
    //toJson：转换为字符串
    String json = gson.toJson(person);
    System.out.println(json);
    //fromJson：转换为对象  json字符串   对象
    Person json1 = gson.fromJson(json, Person.class);
    System.out.println(json1);
}

2.1 Lista y JSON Huzhuan

//2.list和json互转
@Test
public void json2() {
    List<Object> list = new ArrayList<>();
    list.add(new Person(1,"磊爷"));
    list.add(new Person(2,"jsb"));
    list.add(new Person(3,"asb"));
    //转为json字符串
    Gson gson = new Gson();
    String json = gson.toJson(list);
    System.out.println(json);
    //转为对象
    Object json1 = gson.fromJson(json, new TypeToken<List<Person>>(){}.getType());
    System.out.println(json1);
}

2.1 mapa y JSON Huzhuan

//3.map和json互转
@Test
public void json3() {
    Map<Integer, Person> map = new HashMap<>();
    map.put(1, new Person(1,"磊爷"));
    map.put(2, new Person(2,"jsb"));
    //转换为字符串
    Gson gson = new Gson();
    String json = gson.toJson(map);
    System.out.println(json);
    //转换为对象
    Object o = gson.fromJson(json, new TypeToken<Map<Integer, Person>>() {
    }.getType());
    System.out.println(o);
}

AJAX

AJAX que "Asynchronous JavaScript And XML" (JavaScript asíncrono y XML), se refiere a una técnica de desarrollo web para crear aplicaciones web interactivas

AJAX es un navegador inicia una solicitud de JS asíncronos. página parcial tecnología de actualización

Sync: El cliente debe esperar la respuesta del servidor. No se pueden realizar otras operaciones mientras espera

No requiere la respuesta del servidor: Inducción

Mientras ajax puede que tenga que cargar páginas web, parte de actualización de la página

Una petición AJAX nativa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun() {
            //发送异步请求
            //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.同步false 异步true
             */
            xmlhttp.open("GET","test1.txt",true);
            //3.发送请求
            xmlhttp.send();
            //4.接受并处理来自服务器的响应结果
            //获取方式：xmlhttp.responseText
            //获取时间：当服务器响应成功后获取
            //当xmlhttp对象就绪状态改变时，会触发事件
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    //获取服务器响应结果
                    var responseText = xmlhttp.responseText;
                    alert(responseText);
                }
            }
            
        }
    </script>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
</body>
</html>

Dos, solicitud de jQuery AJAX en

Método .ajax 2.1 $

URL es la dirección de la petición
Tipo representa el tipo de petición GET / POST
los datos indica que los datos se envían al servidor
- nombre = valor y nombre = valor
- {valor clave}
devolución de llamada de respuesta de solicitud de éxito, la respuesta
Respuesta tipo de datos tipoDatos

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
            function fun() {
                $.ajax({
                    url:"ajaxServlet",
                    type:"post",
                    //data:"username=jack&age=23"
                    data:{"username": "lei", "age": 23},
                    success: function () {
                        alert("成功了")
                    },

                })
            }
        </script>
    </head>
    <body>
        <input type="button" value="发送异步请求" onclick="fun();">
    </body>
</html>

2.2 $ .get ()

url
datos
llamar de vuelta
tipo

2.3 $ .post ()

url
datos
llamar de vuelta
tipo