JavaWeb_Ajax通过JQuery和原生js异步传输数据

　　菜鸟教程　　传送门

　　AJAX 优点：在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容

　　XMLHttpRequest 对象　　传送门

　　（一） [JQuery]定时发送ajax请求

　　（二） [JQuery]发送ajax时客户端服务端进行数据传递

　　（三） [原生JS]使用原生js代码完成ajax请求

　　（四）通过Ajax检测用户注册信息重复

[JQuery]定时发送ajax请求　　JQuery.ajax()文档

JavaWeb_Ajax通过JQuery和原生js异步传输数据

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js"></script>

<script type="text/javascript">

//2000ms调用一次这个方法
setInterval("callAjax()",2000);
function callAjax(){
    $.ajax({
//         alert("ajax");ajaxrequest
        url:"${pageContext.request.contextPath }/ajaxrequest",
        cache:false,    //去除缓存
        type:"get",
        success:function(msg){
            //将数据刷新到页面上
            $("#msg").append(msg);
        }
    });
}


</script>

</head>
<body>

<form action="${pageContext.request.contextPath}/login_do" method="post">
用户名：<input type="text" name="username" /><br/>
密码：<input type="password" name="password" /><br/>
<input type="submit" value="登录" />
</form>

<div id ="msg"></div>

</body>
</html>

ajax.jsp