Web04 Ajax

Posted 2021-05-19 FremontUltimate

Web04 Ajax

1.JSON

轻量级的数据交换格式

客户端和服务器之间业务数据的传递格式

1.1 javascript使用

• json 是由键值对组成

• 花括号（大括号）包围

• 每个键由引号引起来

• 键和值之间使用冒号进行分隔，

• 多组键值对之间进行逗号进行分隔

var jsonObj = {
    "key1":21,
    "key2":"sss"
};

json 本身是一个对象

通过key访问值：json 对象.key

• 操作 json 中的数据的时候，需要 json 对象的格式 JSON.parse() 把 json 字符串转换成为 json 对象

• 数据交换的时候，使用 json 字符串 JSON.stringify() 把 json 对象转换成为 json 字符串

1.2 Java使用

javaBean 和 json 的互转：

// 创建 Gson 对象实例 
Gson gson = new Gson();
//javabean对象
Person person = new Person();
// toJson 方法可以把 java 对象转换成为 json 字符串 
String personJsonString = gson.toJson(person);
/* 
    fromJson 把 json 字符串转换回 Java 对象
    第一个参数是 json 字符串 
    第二个参数是转换回去的 Java 对象类型
*/
Person person1 = gson.fromJson(personJsonString, Person.class);

List 和 json 的互转：

List<Person> personList = new ArrayList<>();
Gson gson = new Gson();
// 把 List 转换为 json 字符串 
String personListJsonString = gson.toJson(personList);
List<Person> list = gson.fromJson(personListJsonString, new PersonListType().getType());
/*
 其中 PersonListType 类如下
 只需继承，其他的不用写
*/
class PersonListType extends TypeToken<ArrayList<Person>>{}

map 和 json 的互转：

Map<Integer,Person> personMap = new HashMap<>();
Gson gson = new Gson();
// 把 map 集合转换成为 json 字符串
String personMapJsonString = gson.toJson(personMap);
Map<Integer,Person> personMap2 = gson.fromJson(personMapJsonString, new TypeToken<HashMap<Integer,Person>>(){}.getType());
/*
 可直接使用  TypeToken  匿名内部类
*/

2.Ajax

异步 JavaScript 和 XML

创建交互式网页应用的网页开发技术

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

2.1 原生Ajax请求

<script type="text/javascript">
    // 在这里使用 javaScript 语言发起 Ajax 请求，访问服务器 AjaxServlet 中 javaScriptAjax
    function ajaxRequest(){
    var xmlhttprequest = new XMLHttpRequest();
    //调用 open 方法设置请求参数
    xmlhttprequest.open("GET","http://localhost:8080/ajaxServlet?action=javaScriptAjax",true);
    //在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作
    xmlhttprequest.onreadystatechange = function(){ 
        if (xmlhttprequest.readyState == 4 && xmlhttprequest.status == 200) { 
            var jsonObj = JSON.parse(xmlhttprequest.responseText); 
            // 把响应的数据显示在页面上 
            document.getElementById("div01").innerhtml = "编号：" + jsonObj.id + " , 姓名：" + jsonObj.name; 
        }
    }
    //调用 send 方法发送请求 
    xmlhttprequest.send();   
}

 

2.2 jQuery AJAX 请求

$.ajax 方法 ：

• url 表示请求的地址

• type 表示请求的类型 : GET 或 POST 请求

• data 表示发送给服务器的数据 格式有两种：

  • name=value&name=value 值

  • {key:value} 键值对

• success 请求成功，响应的回调函数

• dataType 响应的数据类型:

  • text 表示纯文本

  • xml 表示 xml 数据

  • json 表示 json 对象

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

$.get 方法和$.post 方法 :

• url 请求的 url 地址

• data 发送的数据

• callback 成功的回调函数

• type 返回的数据类型

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

$.getJSON 方法 :

• url 请求的 url 地址

• data 发送的数据

• callback 成功的回调函数

表单序列化 serialize() :

把表单中所有表单项的内容都获取并拼接为 name=value&name=value 的形式

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