Ajax基础

Ajax介绍

Ajax是异步的JavaScript和XML
多个技术综合，用于快速创建动态网页
可实现局部更新

原生JS实现Ajax

• 核心对象：XMLHttpRequest

用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

let xmlHttp = new XMLHttpRequest();

• 打开链接：open(method,url,async)

method：请求的类型 GET 或 POST。
url：请求资源的路径。
async：true(异步) 或 false(同步)。

let username = document.getElementById("username").value;
xmlHttp.open("GET","userServlet?username="+username,true);

• 发送请求：send(String params)

params：请求的参数(POST 专用)。

xmlHttp.send();

• 处理响应：onreadystatechange

​ readyState：0-请求未初始化，1-服务器连接已建立，2-请求已接收，3-请求处理中，4-请求已完成，且响应已就绪。
​ status：200-响应已全部 OK。

xmlHttp.onreadystatechange = function() {
            //判断请求和响应是否成功
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                //将响应的数据显示到span标签
                document.getElementById("uSpan").innerHTML = xmlHttp.responseText;
            }
        }

• 获得响应数据形式

​ responseText：获得字符串形式的响应数据。
​ responseXML：获得 XML 形式的响应数据。

JQuery实现Ajax

get方式

• 核心语法：$.get(url,[data],[callback],[type]);
  • url：请求的资源路径。
  • data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。
  • callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。
  • type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

 $.get(
            //请求的资源路径
            "userServlet",
            //请求参数
            "username=" + username,
            //回调函数
            function (data) {
                //将响应的数据显示到span标签
                $("#uSpan").html(data);
            },
            //响应数据形式
            "text"
        );

post方式

• 核心语法：$.post(url,[data],[callback],[type]);
  • url：请求的资源路径。
  • data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。
  • callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。
  • type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

$.post(
            //请求的资源路径
            "userServlet",
            //请求参数
            "username=" + username,
            //回调函数
            function (data) {
                //将响应的数据显示到span标签
                $("#uSpan").html(data);
            },
            //响应数据形式
            "text"
        );

通用方式

• 核心语法：$.ajax({name:value,name:value,…});
  • url：请求的资源路径。
  • async：是否异步请求，true-是，false-否 (默认是 true)。
  • data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。
  • type：请求方式，POST 或 GET (默认是 GET)。
  • dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。
  • success：请求成功时调用的回调函数。
  • error：请求失败时调用的回调函数。

$.ajax({
            //请求资源路径
            url:"userServletxxx",
            //是否异步
            async:true,
            //请求参数
            data:"username="+username,
            //请求方式
            type:"POST",
            //数据形式
            dataType:"text",
            //请求成功后调用的回调函数
            success:function (data) {
                //将响应的数据显示到span标签
                $("#uSpan").html(data);
            },
            //请求失败后调用的回调函数
            error:function () {
                alert("操作失败...");
            }
        });

JSON的处理

JSON介绍

JSON是一种轻量级的数据交换格式，拥有简洁和清晰的层次结构，易于人阅读和编写，易于计算机解析和生成
轻量：组件对其环境的依赖较小

JSON转换

常用类

ObjectMapper常用方法

实例：

对象转 JSON
String json = mapper.writeValueAsString(user);

JSON 转对象
User user2 = mapper.readValue(json, User.class);

Map转 JSON
String json = mapper.writeValueAsString(map);

JSON 转 Map
HashMap<String,String> map2 = mapper.readValue(json, HashMap.class);
HashMap<String,User> map2 = mapper.readValue(json,new TypeReference<HashMap<String,User>>(){});

List转 JSON
String json = mapper.writeValueAsString(list);

JSON 转 List
ArrayList<String> list2 = mapper.readValue(json,ArrayList.class);
ArrayList<User> list2 = mapper.readValue(json,new TypeReference<ArrayList<User>>(){});