JAVA 之 Ajax

admin管理员组

文章数量:1794759

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); } }

 

本文标签： javaajax