JavaWeb技术之JSON和Ajax请求

一、JSON

1.什么是JSON

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。

2.JSON在JavaScript中的使用

定义：json 是由键值对组成，并且由花括号（大括号）包围。每个键由引号引起来，键和值之间使用冒号进行分隔， 多组键值对之间进行逗号进行分隔。

var jsonObj = {
  "key1":12,
  "key2":"abc",
  "key3":{
      "key3_1":31,
      "key3_2":"3_2"
  },
  "key4":[11,"arr",false]
};

json的访问

json本身是一个对象。

json中的key我们可以理解为是对象中的一个属性。

alert(jsonObj.key1);
alert(jsonObj.key2);
alert(jsonObj.key3);

json中的两个常用方法

json的存在有两种形式。

一种是：对象的形式存在，我们叫它json对象。

一种是：字符串的形式存在，我们叫它json字符串。

一般我们要操作json中的数据的时候，需要json对象的格式。

一般我们要在客户端和服务器之间进行数据交换的时候，使用json字符串。

JSON.stringify() 把 json对象转换为 json字符串

JSON.parse() 把 json字符串转换为 json对象

3. JSON在Java中的使用

JavaBean和JSON的互转

public void test1(){
    Person person = new Person(1, "国哥");
    //创建Gson对象实例
    Gson gson = new Gson();
    //toJson方法把java对象转换成为json字符串
    String personJsonString = gson.toJson(person);
    
    //fromJson把json字符串转换为Java对象
    Person person1 = gson.fromJson(personJsonString, Person.class);
}

List和JSON的互转

public void test2(){
    List<Person> personList = new ArrayList<>();
    
    personList.add(new Person(1, "国哥"));
    personList.add(new Person(2, "康师傅"));
    
    Gson gson = new Gson();
    
    //把List转换为json字符串
    String personListJsonString =gson.toJson(personList);
    
    List<Person> list = gson.fromJson(personListJsonString, new PersonListType().getType());
}

Map和JSON的互转

public void test3(){
    Map<Integer, Person> personMap = new HashMap<>();
    
    personMap.put(1, new Person(1,"国哥"));
    personMap.put(2, new Person(2,"康师傅"));
    
    Gson gson = new Gson();
    //把map集合转换为json字符串
    String personMapJsonString = gson.toJson(personMap);
    
    Map<Integer,Person> personMap2=gson.fromJson(personMapJsonString, new TypeToken<HashMap<Integer, Person>>(){}.getType());
}

二、AJAX请求

1.什么是AJAX请求

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

ajax 是一种浏览器通过 js 异步发起请求，局部更新页面的技术。 Ajax 请求的局部更新，浏览器地址栏不会发生变化，局部更新不会舍弃原来页面的内容。

2.原生AJAX使用示例

<script type="text/javascript">
    function ajaxRequest(){
        //1. 创建XMLHttpRequest
        var xmlhttprequest = new XMLHttpRequest();
        //2. 调用open方法设置请求参数
        xmlhttprequest.open("GET", "http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAj ax",true);
        
        //4.在send方法前绑定onreadystatechange事件，处理请求完成后的操作
        if(xmlhttprequest.readyState==4&& xmlhttprequest.status==200){
            var jsonObj = JSON.parse(xmlhttprequest.responseText);
            
            document.getElementById("div01").innerHTML="编号："+jsonObj.id + ",姓名："+ jsonObj.name;
        }
        
        //3.调用send方法发送请求
        xmlhttprequest.send();
    }
</script>

3.jQuery中的AJAX请求

$.ajax方法

方法	作用
url	表示请求的地址
type	表示请求的类型GET或POST请求
data	表示发送给服务器的数据
格式	1 : name=value&name=value
	2 : {key:value}
success	请求成功，响应的回调函数
dataType	响应的数据类型

$("#ajaxBtn").click(function(){
    $.ajax({
        url:"http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
        data:{action:"jQueryAjax"},
        type:"GET",
        success:function(data){
            $("#msg").html("编号：" + data.id + "，姓名:" + data.name);
        },
        dataType:"json"
    });
});

$.get方法和$.post方法

方法	作用
url	请求的 url 地址
data	发送的数据
callback	成功的回调函数
type	返回的数据类型

$("#getBtn").click(function(){
    $.get("http://localhost:8080/ajax_i18n/ajaxServlet","action=jQueryGet",function (data){
        $("#msg").html("get 编号：" + data.id + " , 姓名：" + data.name);
    },"json"); 
});

$("#postBtn").click(function(){
    $.get("http://localhost:8080/ajax_i18n/ajaxServlet","action=jQueryPost",function (data){
        $("#msg").html("get 编号：" + data.id + " , 姓名：" + data.name);
    },"json"); 
});

$.getJSON方法

方法	作用
url	请求的 url 地址
data	发送的数据
callback	成功的回调函数

$("#getJsonBtn").click(function(){
    $.getJSON("http://localhost:8080/ajax_i18n/ajaxServlet","action=jQueryGetJSON",function (data) { 
        ("#msg").html(" getJSON 编号：" + data.id + " , 姓名：" + data.name);
    });
});

表单序列化serialize()

serialize()可以把表单中所有表单项的内容都获取到，并以name=value&name=value 的形式进行拼接。

$("#submit").click(function(){
    $.getJSON("http://localhost:8080/ajax_i18n/ajaxServlet","action=jQuerySerialize&" + $("#form01").serialize(),function (data) {
        $("#msg").html(" Serialize 编号：" + data.id + " , 姓名：" + data.name); 
    });
});