Ajax与JSON

说到ajax与json，想到技术就是前后端分离技术。传统的前后端交互技术，我们采用动态网页技术，例如：java的jsp；php的asp。但是动态网页技术导致了java和php工程师即需要写前端又写后端。因此前后端分离技术，解决上述问题。那ajax与json跟前后端分离技术有什么关系？

首先，我先介绍一下ajax与json。

AJAX概述

AJAX全名叫做Asynchronous JavaScript And Xml -> 异步的JavaScript和XML

什么是异步？

异步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

Ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

在说如何之前使用ajax，我们先谈谈一些有趣好玩的数字例如：404、200、302等，这些数字我们使用抓包工具查看时，常见不到了。那些数字究竟是什么意思呢？

这些数字叫做状态，常见的5种类型：

① 1xx 表示 服务器就收客户端消息，但没有接收完成，等待一段时间，发送 1xx状态码

② 2xx 表示 响应成功。 代表：200

③ 3xx 表示 重定向。 代表302（重定向） 304 (访问缓存)

④ 4xx 表示 客户端错误。 代表： 404(请求路径没有对应的资源) 405 (请求方法没有对应的doxxx方法） 常见是 get post

⑤ 5xx 服务器错误。 代表：500(服务器内部出现异常)

说了这么多，那应该如何实现ajax呢？ 

这里我介绍两种方式使用ajax。

第一种使用Jquery ajax()

Jquery ajax官方文档

举个例子

function fun(){

            //使用$.ajax()发送异步请求
            $.ajax({
                url:"ajaxServlet1", //请求路径
                type:"POST",  //请求方式
                data:{"username" : "jack","age" : 123},//请求参数
                success:function (data){
                    alert(data);
                },//响应成功后的回调函数
                error:function (data){
                    alert("出错了");
                },//表示如果请求响应出现错误，会执行的回调函数
                dataType :"text"//设置接收到的响应数据的格式,一般会以json格式返回

            })
        }

JQuery不仅是直接封装了ajax，还对get和post方法进行了封装。

例如：

$.get( )：发送get请求

          语法：$.get(url,[data],[callback],[type])

                 参数：

                            url:请求路径

                        data ： 请求参数

                        callback:回调函数

                        type: 响应结果的类型

function  fun(){

            $.get("ajaxServlet",{username:"rose"},function (data){

                alert(data);

            },"text")

        }

$.post( )：发送post请求

参数与$.get()一样

function  fun(){

            $.post("ajaxServlet",{username:"jack"},function (data){

                alert(data);

            },"text")

        }

第二种 ajax 采用axios网络请求库

axios wc3shcool文档

由于我对于axios请求库，现如今还不是很了解，在这边简单给大家举个例子。

//get请求

  axios.get("https://autumnfish.cn/api/joke/list?num=6")
            // axios.get("https://autumnfish.cn/api/joke/list1234?num=6")
            .then(function (response) {
                console.log(response);
              },function(err){
                  console.log(err);
              })

//post请求

 axios.post("https://autumnfish.cn/api/user/reg",{username:"盐焗西兰花"})
            .then(function(response){
                console.log(response);
                console.log(this.skill);
            },function (err) {
                console.log(err);
              })

Json概述

简单地说完了，ajax的介绍，接下来我们来说说Json。

Json全名：JavaScript Object Notation    JavaScript对象表示法

说白了，json就是JavaScript对象

语法

1.基本规则

        数据在名称/值对中：json数据是由键值对构造的

        键用引号（单双都行）引起来，也可以不可以引号 

        值的取值类型：

                ①数字

                ②字符串

                ③逻辑值(true 或 false)

                ④数组（在方括号中）

                ⑤对象 （在花括号）

                ⑥null

        数据由逗号分隔：多个键值对由逗号分隔

        花括号保存对象：使用{ } 定义json

2. 获取数据

        JSON对象.键名

        JSON对象["键名”]

数据传递

json是javascript对象，这归根到底还是前端的数据，那要如何传输到后端，接下来我们介绍一下JSON转为java对象和java对象转换Json

JSON转为java对象

1.导入jackson的相关jar包

2.创建核心对象ObjectMapper

3.调用ObjectMapper的相关方法进行转换

4.readValue(json字符串数据，Class)

举例：

public void test5() throws IOException {
    
    //读取到的json对象
    String json =  "{\"gender\":\"男\",\"name\":\"jack\",\"age\":\"12\"}";
    //创建一个json对象
    ObjectMapper objectMapper = new ObjectMapper();
    //将其转化成java对象
    Person person = objectMapper.readValue(json, Person.class);
    System.out.println(person);

}

Java对象转换JSON

使用步骤：

        导入相关的jar包 例如：jackson

        创建Jackson核心对象 ObjectMapper

        调用ObjectMapper的相关方法进行转换

转换方法：

        WriteValue（参数1，obj):

参数：

File：将obj对象转换为JSON字符串，并保存到指定的文件中

Write：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中

OutputStream:将obj对象转换为JSON字符串，并将JSON数据填充到字节输出流中

writeValueAsString(obj):将对象转为json字符串 一般使用该方法

举例

Map<String,String> map = new HashMap<>();
map.put("name","jack");
map.put("age","12");
map.put("gender","男");
ObjectMapper objectMapper = new ObjectMapper();
String s = objectMapper.writeValueAsString(map);
System.out.println(s);

总结

介绍完ajax和json，对于如何二者相互使用，在这里我们举例一个登录例子介绍。

JS代码

<script>
   //1.给登录按钮绑定单击事件
   $(function (){
      $("#errorMsg").hide();
      $("#btn_sub").click(function (){
         //2.发送ajax请求，提交表单数据
         $.post("user/login",$("#loginForm").serialize(),function (data){
            if(data.flag){
               location.href = "index.html";
            }else {
               $("#errorMsg").show();
               $("#errorMsg").html(data.errorMsg);
            }

         })
      })
   })


</script>

java代码

public void login(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    Map<String, String[]> parameterMap = request.getParameterMap();
    User user = new User();
    try {
        BeanUtils.populate(user,parameterMap);
    } catch (IllegalAccessException e) {
        e.printStackTrace();
    } catch (InvocationTargetException e) {
        e.printStackTrace();
    }
    User u = service.login(user);

    ResultInfo info = new ResultInfo();
    if(u ==null){
        //用户名密码错误
        info.setFlag(false);
        info.setErrorMsg("用户密码或密码");
    }if(u!=null && !"Y".equals(u.getStatus())){
        info.setFlag(false);
        info.setErrorMsg("您尚未激活，请激活");
    }
    if(u!=null && "Y".equals(u.getStatus())){
        info.setFlag(true);
        //保存Session
        request.getSession().setAttribute("user",u);
        System.out.println(u.getName());
    }
    ObjectMapper mapper = new ObjectMapper();


    //返回格式转化为json格式
    response.setContentType("application/json;charset=utf-8");
    mapper.writeValue(response.getOutputStream(),info);
 }

根据JS代码我们可以看到post方法请求给后端user/login路径。将我们表单存放的数据一起发送到这个资源路径过去，接下来，后端进行处理，通过Request对象获取传递过来的参数，将其封装成一个java对象，进行数据库查询操作，若邮箱没有验证或用户密码不正确，需要将提示信息返回给前端，这个时候就需要JSON，将提示语句转成json对象，（注意：在转json时，一定要写response.setContentType('application/json;charset=utf-8”）不然会以文本格式写回前端。）接下来，ajax中得到了json对象，json这个对象实现前端的操作。