客户端使用AJAX实现异步访问

### 客户端使用AJAX实现异步访问

`Ajax`即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

首先,应该引用`jQuery`文件,然后,调用`jQuery`框架中提供的`$.ajax()`函数以发出AJAX请求。

在`$.ajax()`函数中,函数的参数是1个JSON对象,常规访问至少需要配置5个属性:

- `url`:将请求提交到哪里去,取值可以是相对路径,也可以是绝对路径;

- `data`:请求参数,通常格式是`名称1=值1&名称2=值`这样的格式;

- `type`:请求类型,通常是`post`或`get`;

- `dataType`:服务器端响应的数据的类型,取值可以是`text`/`json`/`xml`,将根据响应头的Content Type决定;

- `success`:成功响应时(Http响应码是2xx)的回调函数,函数的参数是服务器端响应的JSON字符串转换得到的JSON对象

    <script type="text/javascript" src="jquery-3.4.0.min.js"></script>
    <script type="text/javascript">
    $("#btn-reg").click(function(){
        $.ajax({
            "url":"user/reg.do",
            "data":"username=" + $("#username").val(),
            "type":"post",
            "dataType":"json",
            "success":function(json) {
                alert("state=" + json.state);
            }
        });
    });
    </script>

### 1. 响应正文

当客户端向服务器端发出请求后,服务器端的响应方式是直接将某字符串响应给客户端,如果客户端是通过浏览器发出的请求,则在浏览器的界面中显示的就一个字符串!

使用这种做法的优点在于:服务器端不必再处理界面,即不需要考虑响应请求时,应该呈现什么样的界面给客户端,只是单纯的向客户端响应处理的结果,例如用1表示成功,用0表示失败,至于客户端如何处理这些结果并显示,是不需要服务器端关心的问题,同时,也就解决了多种不同的客户端的显示问题,例如PC端、手机端、平板电脑端,因为设备的差异,显示方式也应该有所不同,这些问题都可以交给不同的客户端开发人员去进行处理,另外,附带的好处就是服务器端产生流量消耗也会更小,因为响应的正文的长度一定远远小于响应一个页面的内容的长度。

响应正文的做法就是在处理请求的方法之前添加`@ResponseBody`注解即可:

    @Controller
    @RequestMapping("user")
    public class UserController {
        
        @RequestMapping("reg.do")
        @ResponseBody
        public String reg() {
            return "hello";
        }
    
    }

### 2. 响应的正文的格式

不可以每次只向客户端响应`1`或`0`或者某个数字,因为客户端请求后,可能要求得到更多的结果!例如客户端发出请求的目的就是为了得到某些数据,例如当前登录的用户的信息等。

服务器端如果需要向客户端响应数据,就不能直接把数据的多项属性直接写在1个字符串中,例如响应为`"小六2517575"`是不合适的,客户端很难或者无者正确的从这1个字符串拆分出所需要各种信息!所以,服务器端响应给客户端的正文应该是有一定格式的,以保证客户端接收到这个正文可以拆分出必要的信息。

例如可以使用XML语法去组织相关信息:

    <user>
        <name>小六</name>
        <age>25</age>
        <height>175</height>
        <weight>75</weight>
    </user>

但是,使用XML也存在一定的问题:

1. 语法格式相对比较繁琐,且占用的字符数量较多;

2. 数据的产生与解析相对繁琐;

目前,业内比较提倡的是使用JSON格式来组织数据,例如:

    {
        "name":"小六",
        "age":25,
        "height":175,
        "weight":75
    }

### 3. JSON数据格式

JSON数据格式是Javascript语言默认直接解析的,因为JSON是Javascript中的一种数据类型!

JSON的数据格式:

1. 每个JSON数据都是一个对象,每个对象都应该使用`{}`框住;

2. 每个对象中可以有若干条属性,属性名是字符串格式的,需要使用引号框住,属性值可以根据数据类型来决定是否使用引号框住,各属性之间使用逗号分隔;

3. 属性的值也可以是一系列数据,表现为JSON中的数组,数组需要使用`[]`框住,也可以通过数组属性的length获取数组的长度,也可以结合循环语法遍历数组;

JSON主要用于组织数据,并在网络中进行传递,当客户端接收到JSON数据,数据本身其实是一个字符串,可以使用`JSON.parse(str)`将字符串格式的数据转换为JSON对象,当然,前提是这个字符串的格式是符合JSON数据格式的。

### 4. 服务器端向客户端响应JSON格式的数据

当控制器中处理请求的方法添加`@ResponseBody`注解后,SpringMVC框架会通过转换器`Converter`实现响应正文。

SpringMVC中默认内置了一些转换器,适用于不同的返回类型,如果处理请求的方法的返回值类型是`String`,则会自动调用`StringHttpMessageConverter`,该转换器默认使用的编码就是`ISO-8859-1`,所以,默认是不支持中文的!

使用`Jackson`框架可以直接解决响应JSON数据及支持中文的问题!当项目中添加了`Jackson`依赖后,如果控制器中处理请求的方法的返回值并不在SpringMVC默认支持的范围之内(例如不是`String`),则SpringMVC会直接调用`Jackson`框架中的转换器来响应正文!

    <!-- jackson -->
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.9.8</version>
    </dependency>

使用`Jackson`框架时,需要在Spring的配置文件中启用注解驱动:

    <!-- 注解驱动 -->
    <mvc:annotation-driven />

具体的使用可以是:

    @RequestMapping("reg.do")
    @ResponseBody
    public User reg() {
        User user = new User();
        user.setName("小六");
        user.setAge(30);
        user.setWeight(80);
        return user;
    }

当提交访问时,通过客户端的浏览器,可以看到响应正文就是:

  {"name":"小刘老师","age":30,"weight":80}

并且,`Jackson`框架还修改了`Response Headers`,将响应类型设置为:

 Content-Type: application/json;charset=UTF-8

也就是客户端得到的就是JSON格式的字符串,并且,是支持中文的!

通常,在每个项目中,都会创建1个类,用于表示服务器向客户端响应正文的数据类型。

    public class ResponseResult<T> {
        private Integer state; // 状态,使用数值描述此次用户的操作成功与否
        private String message; // 消息,用于用户操作失败时描述错误的原因
        private T data; // 数据,用于向客户端提供数据
    }

猜你喜欢

转载自www.cnblogs.com/cgy-home/p/11094844.html
今日推荐