ajax request can be made without refreshing the page, the request back-end server
To demonstrate the effect of adding a video in jsp, and then play the video when the request back to see results.
- Common form submission data is returned, it will refresh the page so that the video will be played over again .
jsp in
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<video src="videos/2.MP4" controls width="500px"></video>
<form action="CommentServlet" method="post">
<input type="text" name="comment" id="c"/>
<input type="submit" value="表单提交">
</form>
<div id="result">
表单提交返回数据:${comment}
</div>
</body>
</html>
servlet中
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String string = request.getParameter("comment");
System.out.println("comment:"+string);
request.setAttribute("comment", string);
request.getRequestDispatcher("ajax.jsp").forward(request, response);
}
- Use XMLHttpRequest () object, ajax request, the page does not refresh
the jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<video src="videos/2.MP4" controls width="500px"></video>
<form action="CommentServlet" method="post">
<input type="text" name="comment" id="c"/>
<input type="button" onclick="getAjax()" value="ajax提交">
</form>
<div id="result">
</div>
</body>
</html>
<script>
function getAjax() {
var xhr=new XMLHttpRequest();
var comment=document.getElementById("c").value;
// 设置为get请求，将参数连接到请求路径后 false参数规定请求是同步请求处理。
xhr.open('get','CommentServlet?comment='+comment,false);
xhr.send();
/* 接收服务器返回的数据 */
var result=document.getElementById("result").innerText="ajax接收的数据："+xhr.responseText;
}
</script>
NOTE:
to true: default asynchronous request, send will not block the other normal code execution, asynchronous request processing in response to an event used to obtain, in response to this trigger event is returned, performs the corresponding function xhr.οnlοad = function () {xhr .responseTest;}
earliest event processing is returned in response xhr.onreadstatechange = function () {xhr.readyState}
transmission request trigger is triggered when the response is returned, in response to trigger fully retracted
state value change
xhr created when 0
xhr.send 0 ->. 1
XHR l-> 2 2->. 3 (the server process).
3-> 4 represents the response when fully retracted, is determined as follows on the line only
if (xhr.readyState == 4) {}
false: synchronous request-response does not return before the page code pause, send method blocks during this period.
post and get requests
get: 请求只有请求行和请求头
post: 请求行，请求头，请求体
xhr.open("post",url,true);
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");//告诉服务器请求体格式为表单格式
xhr.send("请求体内容")//参数名1=参数值&参数名2=参数值
servlet, direct response response is like.
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String string = request.getParameter("comment");
System.out.println("comment:"+string);
response.getWriter().print(string);
}
- In jquery ajax request
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<video src="videos/2.MP4" controls width="500px"></video>
<form action="CommentServlet" method="post">
<input type="text" name="comment" id="c" />
<input type="button" onclick="getAjax()" value="ajax提交">
</form>
<div id="result"></div>
</body>
</html>
<script>
function getAjax() {
var data={};
/* 获取输入框中的值 */
var c=$("#c").val();
data.comment=c;
$.get("CommentServlet", data, function(data) {
/* document.getElementById("result").innerText=data; */
$("#result").html(data)
});
}
</script>
servlet中
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String string = request.getParameter("comment");
System.out.println("comment:"+string);
response.getWriter().print(string);
}
- jquery abbreviated jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<video src="videos/2.MP4" controls width="500px"></video>
<form action="CommentServlet" method="post">
<input type="text" name="comment" id="c" />
<input type="button" onclick="getAjax()" value="ajax提交">
</form>
<div id="result">
</div>
</body>
</html>
<script>
function getAjax() {
$.ajax({
url:'CommentServlet',
data:{
comment:$("#c").val()
},
success: function(data){
console.log(data)
$("#result").html(data)
}
});
}
</script>
Thank you!