JavaWeb-Ajax/Axios/Json

目录

一、Ajax

1.1 服务端渲染

 1.2 Ajax渲染（局部更新）

二、Json

2.1 Json的格式

2.2 JavaScript中常用方法

2.3 Java中常用方法

三、Axios

3.1 基本使用（传参与回参）

3.2 传递Json数据

---

一、Ajax

1.1 服务端渲染

 1.2 Ajax渲染（局部更新）

        在实际应用中Ajax指的是：不刷新浏览器窗口，不做页面跳转，局部更新页面内容的技术。

        Ajax请求是异步的，有自己的线程。

        前后端分离就彻底舍弃了服务器端渲染，数据全部通过Ajax方式以JSON格式来传递。

         使用原生的JavaScript程序执行Ajax极其繁琐，所以一定要使用框架来完成。而Axios就是目前最流行的前端Ajax框架。

二、Json

        json是一种轻量级的数据交换格式。数据交换指的是客户端和服务器间业务数据的传递格式。

2.1 Json的格式

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

var jsonObj = {
	"key1":12,
	"key2":"abc",
	"key3":true,
	"key4":[11,"arr",false],
	"key5":{
			"key5_1" : 551,
			"key5_2" : "value"
		} 
}

2.2 JavaScript中常用方法

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

2.3 Java中常用方法

Gson gson=new Gson();
    gson.toJson();      将其他格式转换为Json格式
    gson.fromJson();    将Json格式转换为其他格式

三、Axios

        使用Axios和使用Vue一样，导入对应的*.js文件即可。官方提供的script标签引入方式为：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

3.1 基本使用（传参与回参）

        客户端向服务器发送信息，服务器返回信息。

<script language="JavaScript">
        window.onload=function () {
            var vue= new Vue({
                el:"#test",
                data:{
                    message:"你好，我是客户端",
                },
                methods:{
                    testAxios:function () {
//三要素：
    1、axios()         axios({
                            method:"POST",//请求方式
                            url:"test/AjaxServlet",//对应处理请求的serlvet
                            params:{
                                msg:vue.message,//要传过去的参数
                            }

                        })
    2、.then()
                        //获取服务器返回的参数
                        .then(function (value) {
                            console.log(data)
                        })
                        //出错时返回一些信息
    3、.catch()         .catch(function (error) {
                            console.log(error); //error就是出错时服务器端返回的响应数据
                            console.log(error.response); 
                            console.log(error.response.status); 
                            console.log(error.response.statusText); 
                            console.log(error.response.data);   
                        })
                    }
                }
                });
</script>


<div id="test">

    <input type="text" v-model="message"><br/>
    <input type="button" @click="testAxios"> //单击事件，执行testAxios函数
</div>

@WebServlet("/AjaxServlet")
public class demoServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        String msg= request.getParameter("msg");//获取参数


        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.write("你好，我是服务器");

    }
}

        axios程序接收到的响应对象结构：

3.2 传递Json数据

<script language="JavaScript">
     window.onload=function () {
     var vue= new Vue({
          el:"#test",
          data:{
                id:"1",
                name:"lisa",
                subJectList:[{
                        "subjectName": "java",
                        "subjectScore": 50.55
                    },
                    {
                        "subjectName": "php",
                        "subjectScore": 30.26
                    }]
                },
        "methods":{
        "requestBodyJSON":function () {
            axios({
                method:"post",
                url:"/demo/AjaxServlet?method=requestBodyJSON",
                //"data":{}
                params:{
                    id:vue.id,
                    name:vue.name,
                    subJectList:vue.subJectList
                }
            }).then(function (response) {
                           var data = value.data;
                                vue.id=data.id;
                                vue.name=data.name;
                                vue.subJectList=data.subJectList
                   //此处value中的data返回的是 js object，因此可以直接点出属性
                   //js语言中 也有字符串和js对象之间互转的API
                   //string JSON.stringify(object)     object->string
                   //object JSON.parse(string)         string->object
            }).catch(function (error) {
                    console.log(error);
            });
    }
}
</script>
...
<button @click="requestBodyJSON">请求体JSON</button>

protected void requestBodyJSON(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//一、接收数据
    // 1.由于请求体数据有可能很大，所以Servlet标准在设计API的时候要求我们通过输入流来读取
    BufferedReader reader = request.getReader();

    // 2.创建StringBuilder对象来累加存储从请求体中读取到的每一行
    StringBuilder builder = new StringBuilder();

    // 3.声明临时变量
    String bufferStr = null;

    // 4.循环读取
    while((bufferStr = reader.readLine()) != null) {
        builder.append(bufferStr);
    }
    // 5.关闭流
    reader.close();

    // 6.累加的结果就是整个请求体
    String requestBody = builder.toString();

    // 7.创建Gson对象用于解析JSON字符串
    Gson gson = new Gson();

    // 8.将JSON字符串还原为Java对象
    Student student = gson.fromJson(requestBody, Student.class);

//二、发送数据
    // 1.准备数据对象
    Student student = new Student(10,"sia",
    new SubjectList(new Subject("java", 95.5), new Subject("php", 93.3)));
  
    // 2.创建Gson对象
    Gson gson = new Gson();

    // 3.将Java对象转换为JSON对象
    String json = gson.toJson(student);

    // 4.设置响应体的内容类型
    response.setContentType("application/json;charset=UTF-8");
    response.getWriter().write(json);
}