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);
}
}
更多推荐
JAVA 之 Ajax
发布评论