JAVA 之 Ajax

1.什么是Ajax？

        AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即是用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

Ajax实际上是下面这几种技术的融合：

• (1)XHTML和CSS的基于标准的表示技术
• (2)DOM进行动态显示和交互
• (3)XML和XSLT进行数据交换和处理
• (4)XMLHttpRequest进行异步数据检索
• (5)Javascript将以上技术融合在一起

客户端与服务器，可以在【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术

2.同步交互和异步交互

• 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；

• 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

3.为什么要使用Ajax？

在我们之前的开发，每当用户向服务器发送请求，哪怕只是需要更新一点点的局部内容，服务器都会将整个页面进行刷新。

• 性能会有所降低(一点内容，刷新整个页面！)
• 用户的操作页面会中断(整个页面被刷新了)

Ajax就是能够做到局部刷新！

4.Ajax核心（XMLHttpRequest）

        XMLHttpRequest对象是Ajax中最重要的一个对象。使用Ajax更多的是编写客户端代码，而不是服务端的代码。

1.XMLHttpRequest 工作原理

        传统的web前端与后端的交互中，浏览器直接访问Tomcat的Servlet来获取数据。Servlet通过转发把数据发送给浏览器。

        当我们使用AJAX之后，浏览器是先把请求发送到XMLHttpRequest异步对象之中，异步对象对请求进行封装，然后再与发送给服务器。服务器并不是以转发的方式响应，而是以流的方式把数据返回给浏览器

        MLHttpRequest异步对象会不停监听服务器状态的变化，得到服务器返回的数据，就写到浏览器上【因为不是转发的方式，所以是无刷新就能够获取服务器端的数据】

2.创建XMLHttpRequest对象 

要创建XMLHttpRequest对象是要分两种情况考虑的：

• 在IE6以下的版本
• 在IE6以上的版本以及其他内核的浏览器(Mozilla)等

<script type="text/javascript">
    var httpRequest;
    if(window.XMLHttpRequest) {
        //在IE6以上的版本以及其他内核的浏览器(Mozilla)等
        httpRequest = new XMLHttpRequest();
    }else if(window.ActiveXObject) {
        //在IE6以下的版本
        httpRequest = new ActiveXObject();
    }
</script>

5.创建第一个Ajax应用

在输入验证码的时候，当我们点击输入框外面的时候，就进行了比较并将结果反馈在验证码后面， 

 

如上图这样，这就是一个经典的ajax异步交互例子

html代码

        <div class="form-inline">
            <label for="vcode">验证码：</label>
            <input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="请输入验证码" style="width: 120px;"/>
            <a href="javascript:refreshCode()" ><img src="<%=request.getContextPath()%>/checkCode" title="看不清点击刷新" id="vcode"/></a>
            <span id="yzm"></span>
        </div>

js代码

<script>
//验证码实时验证
       $(function(){
           $("#verifycode").blur(function(){
               var tess=$("#verifycode").val();
               $.post("/AjsxServlet",{"verifycode":tess},function (resq) {
                   var parse = JSON.parse(resq);
                   if(parse==="验证码正确!"){
                       $("#yzm").css("color","green");
                       $("#yzm").html(parse);
                   }else{
                       $("#yzm").css("color","red");
                       $("#yzm").html(parse)
                   }
               })
           });
       });
    </script>

 Java代码

import com.alibaba.fastjson.JSON;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;

@WebServlet(name = "AjsxServlet",value = "/AjsxServlet")
public class AjsxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        request.setCharacterEncoding("UTF-8");
        //获取input内容
        String verifycode = request.getParameter("verifycode");
        //获取域对象
        HttpSession session = request.getSession();
        //获取验证码
        String checkcode = session.getAttribute("CHECKCODE_SERVER").toString();
        String stats="";
        //将验证码和输入框的内容作比较
        if(verifycode!=null && !verifycode.equalsIgnoreCase(checkcode)){
            stats="验证码错误!";
            //转换为JSON对象发给页面
            String s = JSON.toJSONString(stats);
            response.getWriter().println(s);
        }
        else{
            stats="验证码正确!";
            //转换为JSON对象发给页面
            String s = JSON.toJSONString(stats);
            response.getWriter().println(s);
        }
    }
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}