JQuery的Ajax实现+SpringMVC

来源：互联网发布：linux 查看登陆信息编辑：程序博客网时间：2024/05/29 17:30

Ajax概述

Ajax是Asynchronous JavaScript and XML的缩写，也叫做异步的JavaScript和XML。

同步和异步的区别

同步：当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面进入假死状态，当这个AJAX执行完毕后才会继续运行其他代码，页面假死状态才会解除。也就是说，如果用ajax的话，同步那就没有什么意义了。

异步：当JS代码加载到当前的AJAX的时候，这时候浏览器在发送请求的同时，也在解析页面的代码，也就是说浏览器同时在做两件事。

JQuery中的ajax

我们都知道JQuery是对js的一种封装，通过它可以很熟练的使用jQuery来操作DOM对象，实现对页面的动态渲染。同样的JQuery中也对原生态的js中的Ajax进行了封装，封装成了一个方法ajax()。通过各这个方法传递参数，就可以实现异步请求。至于方法中的参数，大家可以去查阅资料JQuery中的Ajax，在这里就是使用一些常见的方法参数。

测试页面testAjax1.jsp：

方法与之前的不不变，只是页面中进行了修改

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>My JSP 'login.jsp' starting page</title>    <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.9.1.min.js"></script><!--<link rel="stylesheet" type="text/css" href="styles.css">--><script type="text/javascript">$(function() {$("#username").blur(function() {$.ajax({type: "POST",url: "${pageContext.request.contextPath}/ajax/testAjax.do?time=" + new Date(),data: {username: $("#username").val(),},async: true,dataType: "text",success: function(result) {$("#red").html(result);}});});});</script>  </head>    <body>    <form>    username:<input type="text" name="username" id="username"><span id="red"></span><br />    password:<input type="password" name="password"><br />    address:<input type="text" name="address"><br />    <input type="submit" value="login">    </form>  </body></html>

总结：

注意引入JQuery的js文件，否则会报错的。
async：true，表示是异步请求，也只有为true的时候，ajax才会有意义。
后台请求路径的方法和原生态的js中的Controller是同一个方法
至于Struts2中的异步请求和这个一样，只是修改路径和页面。

0 0