实训成绩管理系统总结（二）——ajax请求

这次项目是前后端分离式，这种方式也是目前做项目的主流，所以数据交互就成了一个棘手的问题，之前假期培训了解了一点ajax，自己也去了解了过，现在对本次用到的东西做个总结以及拓展。

1.数据交互的方式有哪些？

我所了解到的有利用cookie对象、request重定向（requset setAttribute("name","jason")）、ajax进行异步数据请求，所以现在总结一下我对这三种方式的理解。

1.1利用cookie对象

cookie是服务器保存在客户端的一小段数据信息，一般是用户在浏览器网站的时候输入一些文字信息或者选择当用户下一次访问该网站时 , 服务器会先从客户端查看是否有保存下来的cookie信息 , 然后根据cookie的内容 , 呈现特定的页面给用户 ，cookie作用体现在四个方面（对特定对象的追踪、统计网页浏览次数、有效期内记录用户的登录信息、个性化服务）

    function logOut() {

        $.cookie('token', '', {expires: -1});
        window.location = "login.html";
    }

1.2request重定向

location代表地址，特点：

1.url地址栏的值会变，变成我们所填的地址（/xxx/xxx），response.setHeader("location","/xxx/xxx")

2.不会携带request过去

3.是经过两次访问

request.setAttribute("name","jason"),特点：

1.url地址栏不会变

2.会携带request过去

3.是经过一次访问

1.3ajax见标题2

2.如何实现ajax方式的数据交互请求？

首先要明白什么是ajax：“Asynchronous JavaScript and XML”（异步JavaScript和XML），它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象。这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口，使得浏览器可以发出HTTP请求与接收HTTP响应，实现在页面不刷新的情况下和服务端进行数据交互。就是通过form表单，以get或者post方式提交数据，提交到action这个地址，参考代码进行理解。

               <form action="" method="">
                    <div class="form-group">
                        <label>试卷Id</label>
                        <input type="text" class="form-control" disabled="disabled" id="editId">
                    </div>
                </form>

3.为什么前后端要分离？

现有开发模式、前后端界限不明确、开发效率问题、前端发挥的局限等等现实问题，就我个人而言，自己更喜欢写前端的样式，数据交互的实现，认识的大佬们差不多都跟我说过相同的一句话：“我最不喜欢写样式了，头痛。。。。。。”当然，这只是个人原因，这样确实可以提高效率，趋势也是这样的，真正的“攻城狮”是全能的！！！给两篇关于这个问题，看到的比较好的博客与参考。

博客1    git仓库