菜鸟教程 传送门
AJAX 优点：在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容
XMLHttpRequest 对象 传送门
（一） [JQuery]定时发送ajax请求
（二） [JQuery]发送ajax时客户端服务端进行数据传递
（三） [原生JS]使用原生js代码完成ajax请求
[JQuery]定时发送ajax请求 JQuery.ajax()文档
<%@ 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>
package com.Gary.controller; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/ajaxrequest") public class AjaxServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //System.out.println("发送ajax请求"); response.setContentType("text/html; charset=utf-8"); response.getWriter().append("ajax数据"); } }
客户端发送get请求由AjaxServlet.java中doGet去接收
[JQuery]发送ajax时客户端服务端进行数据传递
<%@ 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 // 发送中文需要对中文做一个编码使用encodeURI() url:encodeURI("${pageContext.request.contextPath }/ajaxrequest?data=我是客户端发送过来的数据"), 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>
package com.Gary.controller; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/ajaxrequest") public class AjaxServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //System.out.println("发送ajax请求"); System.out.println("收到了ajax请求："+request.getParameter("data")); response.setContentType("text/html; charset=utf-8"); response.getWriter().append("ajax数据"); } }
中文编码处理时使用encodeURI()方法
服务端数据的交互也通过AjaxServlet.java中的doGet去接收
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //System.out.println("发送ajax请求"); System.out.println("收到了ajax请求："+request.getParameter("data")); response.setContentType("text/html; charset=utf-8"); response.getWriter().append("ajax数据"); }
【原生js】使用原生js代码完成ajax请求
<%@ 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(){ //alert("123123"); var xmlhttp = new XMLHttpRequest(); //xmlHttp.open("post", url, true); 第三个：是否是异步请求 加随机数去处理缓存 xmlhttp.open("GET",encodeURI("${pageContext.request.contextPath }/ajaxrequest?data=我是客户端发送的数据&"+Math.random()),true); xmlhttp.send(); xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState==4 && xmlhttp.status==200){ //得到了服务器端的响应 $("#msg").append(xmlhttp.responseText); } } } </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>
package com.Gary.controller; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; @WebServlet("/ajaxrequest") public class AjaxServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //System.out.println("发送ajax请求"); System.out.println("收到了ajax请求："+request.getParameter("data")); response.setContentType("text/html; charset=utf-8"); response.getWriter().append("ajax数据"); } }
setInterval("callAjax()",2000);
function callAjax(){
//alert("123123");
var xmlhttp = new XMLHttpRequest();
//xmlHttp.open("post", url, true); 第三个：是否是异步请求 加随机数去处理缓存
xmlhttp.open("GET",encodeURI("${pageContext.request.contextPath }/ajaxrequest?data=我是客户端发送的数据&"+Math.random()),true);
xmlhttp.send();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
//得到了服务器端的响应
$("#msg").append(xmlhttp.responseText);
}
}
}