Ajax 前端后端数据交互

Ajax 前端/后端数据交互

一 概述

• ​ 同步: 一请求一响应,全局刷新
• ​ 异步: 多请求多响应,局部刷新 (默认为异步,效率高)
• ​ 场景: 浏览网页时,未全局刷新,能更新数据的页面基本都使用了Ajax技术

二 Ajax数据交互

2.1 案例一 获取后台Date

​ 演示:

流程:依据浏览器获取其Ajax核心对象—>请求准备—>设置监听函数–>发送请求—>请求码==4 &&响应码200—>获取date

code

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>


    
        
        
        
    
    
        
        
    

@Controller
public class AjaxController {
    @ResponseBody  //必加
    @RequestMapping("/date")
    public String date() {
        return new Date().toLocaleString(); //获取当前时间的字符串
    }
}

2.2 案例二 验证登录

​ 演示:

需求简述: document.获取用户填入标签值,使用Ajax异步发送请求至服务器进行数据验证,true 成功跳转页面,false给出提示

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>


    
        
        
        
    
    
        

            username:
            password:
              <--绑定事件-->