本文共 4210 字，大约阅读时间需要 14 分钟。

SpringMVC——异步交互技术AJAX

一、AJAX简介

AJAX ：Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），AJAX并不是一门新的编程语言，而是一种使用现有标准的新方法。AJAX最大的特点就是能在不加载整个页面的情况下，能够与服务器交换数据并更新部分网页内容。

传统的网页（不使用Ajax技术的网页）想要更新内容或者提交一个表单，都需要重新加载整个网页。使用Ajax技术的网页，通过后台服务器进行少量的数据交换就可以实现异步局部更新。 使用Ajax用户可以创建接近本地桌面应用的直接、高可用、更丰富的Web用户解面。

我们使用Ajax技术可以做到：

注册时，输入用户名自动检测用户是否已经存在。登陆时，提示用户名密码错误。删除数据行时，将行ID发送到后台，后台在数据库中删除，数据库删除成功后，在页面DOM中将数据行也删除。

二、使用iframe伪造Ajax效果

controller

@Controllerpublic class HelloAjax {
       @RequestMapping("/hello")    public String hello(){
           return "hello";    }}

页面

    
       
   
    
    
请输入要加载的地址：
    
    
                    
   
   
    
    
加载页面位置：
    
    
   

测试：效果

点击提交后触发事件

三、简单实现Ajax异步交互

这里我们不使用JS实现AJAX，直接使用jQuery提供的。

Ajax的核心时 XMLHttpRequest对象(XHR)。XHR向服务器发送请求和解析服务器响应提供了接口，能够以异步方式获从服务器获取新数据。 jQuery提供了多个AJAX有关的方法，通过这些方法，我们能够使用Get和Post从远程服务器上请求文本、HTML、XML或者JSON同时您能够把这些外部数据直接载入网页的被选元素中。

使用jQuery需要先导入jQuery的包

我们来看看jQuery的Ajax方法

1. jQuery.get(...)       所有参数：              url: 待载入页面的URL地址             data: 待发送 Key/value 参数。          success: 载入成功时回调函数。         dataType: 返回内容格式，xml, json,  script, text, html2.jQuery.post(...)       所有参数：              url: 待载入页面的URL地址             data: 待发送 Key/value 参数          success: 载入成功时回调函数         dataType: 返回内容格式，xml, json,  script, text, html3.jQuery.getJSON(...)       所有参数：              url: 待载入页面的URL地址             data: 待发送 Key/value 参数。          success: 载入成功时回调函数。4.jQuery.getScript(...)       所有参数：              url: 待载入页面的URL地址             data: 待发送 Key/value 参数。          success: 载入成功时回调函数。5.jQuery.ajax(...)       部分参数：              url：请求地址             type：请求方式，GET、POST（1.9.0之后用method）          headers：请求头             data：要发送的数据      contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")            async：是否异步          timeout：设置请求超时时间（毫秒）       beforeSend：发送请求前执行的函数(全局)         complete：完成之后执行的回调函数(全局)          success：成功之后执行的回调函数(全局)            error：失败之后执行的回调函数(全局)          accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型         dataType：将服务器端返回的数据转换成指定类型            "xml": 将服务器端返回的内容转换成xml格式           "text": 将服务器端返回的内容转换成普通文本格式           "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。         "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式           "json": 将服务器端返回的内容转换成相应的JavaScript对象          "jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数

controller

@Controller@RequestMapping("/ajax")public class HelloAjax {
       //方式一：使用response    @RequestMapping("/a1")    public void hello(String name, HttpServletResponse response) throws IOException {
           if (name.equals(name)){
               response.getWriter().print("true");        }else {
               response.getWriter().print("false");        }    }}

jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>        <%--导入jQuery--%>        <%--onblur:失去焦点触发事件--%>用户名：

测试：

鼠标点进去再移出去

注意事项： 1.一定要导入jQuery的js文件，并且放在webapp下 2.记得导入jstl的包

       
         
    
     javax.servlet
          
    
     jstl
          
    
     1.2
        
   

四、SpringMVC实现展示集合对象

controller

@RequestMapping("/a1")    @ResponseBody    public List
   
     hello2(){
           ArrayList
    
      list = new ArrayList<>();        list.add(new User("张三1",1));        list.add(new User("张三2",2));        list.add(new User("张三3",3));        list.add(new User("张三4",4));        return list;    }
    
   

jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>    
   
        
     
              
姓名
              
年龄
              
性别
         
        
    
        
   

测试：

点击获取数据

五、案例：注册提示

controller

@RequestMapping("/a3")    @ResponseBody    public String  hello3(String name,String pwd){
           String msg="";        if (name!=null){
               if ("admin".equals(name)){
                   msg = "OK";            }else {
                   msg = "用户名输入错误";            }        }        if (pwd!=null){
               if ("123456".equals(pwd)){
                   msg = "OK";            }else {
                   msg = "密码输入有误";            }        }        return msg;    }

jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>    
    用户名:    
    密码:    

测试：

转载地址：http://ytiwi.baihongyu.com/