Simple to use JSON and AJAX

JSON

JSON (JavaScript Object Notation) is a lightweight data interchange format , easy to read and write, but also easy for machines to parse and generate. JSON with fully independent of the language of the text, many languages provide support for JSON, so JSON is language (between client and server) an excellent data exchange.

A, JSON use in JavaScript

1.1 json defined

//定义
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 json access

json itself is an object, key attribute for a understandable object

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])
}

Two common methods 1.3 Json

Json are present in the form of a string, and two forms of the object (the object when required json data format general procedure, data exchange is generally carried out using json string)

JSON.stringify (): converts a string object json

JSON.parse (): the character string into an object json

Two, JSON use in the server

2.1 JavaBean and the conversion between 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 List and 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 map and 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

That AJAX "Asynchronous JavaScript And XML" (Asynchronous JavaScript and XML), refers to a web development technique for creating interactive web applications

AJAX is a browser initiates a request by js asynchronous. Partial page update technology

Sync: The client must wait for the server response. You can not perform other operations while waiting

Does not require the server response: Induction

While ajax may need to load web pages, update part of the page

A native AJAX request

<!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>

Two, jQuery AJAX request in

2.1 $ .ajax method

url is the address request
type represents the type of request GET / POST
data indicates that the data sent to the server
- name = value & name = value
- {key:value}
callback request success response, the response
Response data type dataType

<!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
data
callback
type

2.3 $.post()

url
data
callback
type