Ajax-synchronous and asynchronous requests
Data transfer method between browser and server
Synchronously
Asynchronous
What is the difference between the two methods?
Synchronous request, when the server responds, the page refreshes as a whole
Asynchronous request, when the server responds, the page is partially refreshed
What are the advantages of asynchronous requests?
Asynchronous requests can improve user experience
What are the application scenarios of asynchronous request?
a: Username detection
b: Search auto completion
c: partial refresh of the page
Native ajax programming
What is Ajax
- Ajax stands for "Asynchronous Javascript And XML" (asynchronous JavaScript and XML), which refers to a web development technology for creating interactive web applications.
What is the use of Ajax?
- ajax is specifically used for asynchronous request mechanism between browser and server
Ajax programming
Native ajax programming (understand)
Use the jquery framework for programming (emphasis)
(1) Traditional program operation principle
The user sends a request, the server accepts the request, and returns the data after processing. The browser accepts the response data and displays the data. At this time, there will be idle time between processing and acceptance, resulting in user waiting time
(2) The operating principle of Aajx's program is: the user sends a request, after the Ajax engine processes it, sends it to the server to accept the request, and returns the data Ajax after processing. The browser accepts the response data and displays the data. The browser can always interact with Ajax for communication, reducing processing time
[External link image transfer failed. The source site may have an anti-hotlink mechanism. It is recommended to save the image and upload it directly (img-UV95p88C-1600397507993) (C:\Users\Carlos\AppData\Roaming\Typora\typora-user-images\ image-20200918103752418.png)]
##Native Ajax code examples are as follows:
ajax_Test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.3.1.js"></script>
<script type="application/javascript">
// 原生的ajax开发:
// 1）创建Ajax引擎对象
// 2）为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
// 3）绑定提交地址
// 4）发送请求
// 5）接受响应数据
//
function clickFn() {
//1）创建Ajax引擎对象
var xmlHttp = new XMLHttpRequest();
//2)为Ajax引擎对象绑定监听（监听服务器已将数据响应给引擎）
xmlHttp.onreadystatechange = function (ev) {
//如果state值是4，说明收到响应数据
//如果状态码是200.说明服务器正常响应
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
// 5）接受响应数据
//获取响应数据
alert(xmlHttp.responseText); //response.getWriter().write("hello")
}
}
//3）绑定提交地址
//参1：表示请求方式
// 参2：表示服务器的资源访问路径，不用加项目名,
// 参3：表示是否异步，true是异步
xmlHttp.open("get","s1",true);
//4)发送请求
xmlHttp.send();
}
</script>
</head>
<body>
<!--设计一个按钮，一点击这个按钮，就向服务器发出异步请求-->
<input type="button" value="点我，发出异步请求" onclick="clickFn()"/>
</body>
</html>
AjaxServlet:
package com.lbl.servlet;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/s1")
public class AjaxServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
System.out.println("收到了异步请求");
response.getWriter().write("helloworld");
}
}
running result:
Native Ajax programming is no longer needed, the amount of code is large, it is inconvenient to use, encapsulated into a function, directly call