Ajax——同步请求与异步请求
浏览器和服务器之间数据传输方式
同步方式
异步方式
两种方式有什么不同?
同步请求,服务器响应时,页面整体刷新
异步请求,服务器响应时,页面局部刷新
异步请求有什么优点?
异步请求可以提高用户的体验性
异步请求应用场景有哪些?
a:用户名检测
b:搜索的自动补全
c:页面的局部刷新
原生的ajax编程
什么是Ajax
- Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
Ajax有什么用?
- ajax专门用于浏览器和服务器之间的异步请求机制
Ajax编程
原生的ajax编程(了解)
使用jquery框架进行编程(重点)
(1)传统的程序运行原理
用户发送请求,服务器接受请求,处理后返回数据,浏览器接受响应数据,进行显示数据,这个时间就会有处理和接受之间的空闲,导致用户的等待时间
(2) Aajx的程序运行原理是:用户发送请求,到Ajax引擎处理后,发送给服务器接受请求,处理后返回数据Ajax,浏览器接受响应数据,进行显示数据,在者期间浏览器可以一直和Ajax进行交流,减少处理时间
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UV95p88C-1600397507993)(C:\Users\Carlos\AppData\Roaming\Typora\typora-user-images\image-20200918103752418.png)]
##原生Ajax代码案例如下:
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");
}
}
运行效果:
原生Ajax编程已经不用了,代码量大,使用不方便,封装成函数,直接调用