详解Ajax请求（一）前言——同步请求的原理

我们知道，ajax是一种异步请求的方式，想要了解异步请求，就必须要先从同步请求说起。常见的同步请求的方式是form表单的提交，我们先从一种同步请求的示例说起。

我们希望输入姓名可以从后台得到身份证号。

那么用同步请求的方式要这么做

前端代码：

<form action="" id = "formId">
<input type="button" id="testBtn" value="测试按钮" onclick="sentSyn();"/><br>
姓名：<input type="text" name = 'name'  value=""/><br>
身份证号：<input type="text" name = 'ID'  value="${ID }"/><br>
</form>

<script type="text/javascript">alert(111);
function sentSyn(){
    document.getElementById("formId").action = "<%=basePath %>/manage/test/syn";
    document.getElementById("formId").submit();
}
</script>

后台代码：

@RequestMapping("/syn")
    public void testSyn(HttpServletRequest request, HttpServletResponse response){
        try {
            request.setAttribute("ID", "12345");
            request.getRequestDispatcher("/ajax.jsp").forward(request, response);
        } catch (ServletException | IOException e) {
            e.printStackTrace();
        }

    }

姓名输入"小明" 点击按钮页面上的效果是这样的：

         

alert(111)先弹了出来，说明页面重新加载了一次，而且得到小明的身份证号后，名字不见了，原先的数据消失了。要解决这个问题，你用同步请求的方式也是可以的，

在你的后台代码里加上一行：request.setAttribute("name", request.getParameter("name"));就可以实现数据的回显。但是弹框还是会出现，说明页面又一次加载了。

（当然，你这样做输入中文的话，会出现中文乱码的问题，这个问题不在本文的讨论范围之内，有兴趣可以查看我的另一篇博客关于乱码问题的研究：http://www.cnblogs.com/cdf-opensource-007/p/6337448.html）

由此我们可以推断出同步请求是怎么跟服务器进行数据交互的

　　使用同步请求，服务器将响应的数据直接输送给浏览器的内存，导致覆盖浏览器内存中原有的数据，浏览器接收到响应的数据后只能展示服务器端返回的数据，无法展示发送请求之前在浏览器中添加的数据。

　　当你使用同步请求与服务器进行数据交互的时候，浏览器是直接面对服务器的，也就是在服务器处理请求的过程中浏览器处于等待，卡死的状态，你无法在页面上进行其他的操作。而且当页面信息量较大时，你使用同步请求与服务器进行数据交互，又要回显页面上众多的数据时，你的后台代码将会写的很麻烦既要处理数据的回显又要处理请求，增加服务器的压力。当然同步请求也有他的优点，当你页面上需要与服务器的数据交互的操作较少时或者需要回显的数据较少时，推荐使用同步，因为它是直接与服务器进行数据交互的。仁者见仁智者见智，具体问题具体分析，要根据你的使用场景进行选择。

今天就先写道这里已经很晚了，下篇博客将会对ajax异步请求的原理进行分析。