修改时间：2021年2月7日
作者：pp_x
邮箱：[email protected]
Ajax
传统网页更新数据
-
传统的网页如果需要更新内容，必须重载整个网页页面。每当用户向服务器发送请求，哪怕只是需要更新一点点的局部内容，服务器都会将整个页面进行刷新。这种方式的缺点是:
-
性能会有所降低 (一点内容，刷新整个页面！)
-
用户的操作页面会中断(整个页面被刷新了)
-
什么是Ajax
- Ajax 即Asynchronous Javascript And XML，是指一种创建交互式网页应用的网页开发技术
- Ajax = 异步JavaScript 和 XML。
- Ajax是客户端与服务器进行交互时，可以【不必刷新整个浏览器】的情况下，与服务器进行异步通讯的技术
Ajax的作用
- Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新（局部更新）
Ajax的好处
- 减轻服务器负担，按需要获得数据。
- 无刷新更新页面，减少用户的实际和心理的等待时间。
- 只更新部分页面，有效利用带宽
- 主流浏览器都支持Ajax
同步和异步
- 浏览器访问服务器的方式
- 同步访问：客户端必须等待服务器端的响应,在等待过程中不能进行其他操作
- 异步访问：客户端不需要等待服务的响应,在等待期间,浏览器可以进行其他操作
JS方式实现Ajax
- JS的ajax：出现最早。使用一个对象
XmlHttpRequest对象。专门用于进行ajax请求发送，和响应的接收 - 使用ajax发请求，使用ajax接收响应，使用JS进行页
- 此方式的缺点：
- 若使用JS的AJAX技术，为了实现简单功能，就需要书写大量复杂代码
- JS的AJAX代码，浏览器兼容性比较差
- javascript
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>new jsp</title>
<script>
function run() {
//1.创建 核心对象
var xmlhttp;
//2.判断浏览器类型
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//3.建立连接
/**
* 三个参数:
* 1.请求方式 get post
* 2.请求资源的路径
* 3.是否为异步 是 or 否
*/
xmlhttp.open("GET","/login?username=tom",true);
//4.发送请求
xmlhttp.send();
//5.获取响应结果
/**
* 什么时候获取响应数据?
* 在服务器响应成功后获取
*/
//监听readyState状态改变
xmlhttp.onreadystatechange=function() {
//readyState==4 响应已经就绪, 200 访问成功
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
//获取响应数据
var text = xmlhttp.responseText;
alert(text);
}
}
}
</script>
</head>
<body>
<input type="button" value="发送异步请求" onclick="run()"><br>
局部刷新 <input type="text">
</body>
</html>
- servlet
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1.获取请求数据
String username = req.getParameter("username");
//打印 username
System.out.println(username);
resp.getWriter().write(username);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
JQuery方式实现Ajax
- 与ajax操作相关的jquery方法有：
POSTGETAJAX
GET请求方式
$.get(url,data,callback,type)url请求路径data请求时携带的数据 格式：key=valuecallback响应成功后的回调函数type响应的数据类型 text html xml json
//JQuery get方式发送异步请求
function run2() {
//1.参数1 url
var url = "/login";
//2.参数2 数据
var data = {
username:"jack"};
//3.发送get请求
$.get(url,data,function (param) {
//data响应回来的内容体
alert("响应成功! 响应数据: " + param);
},"text");
}
POST请求方式
$.post(url,data,callback,type)和get基本相同
//JQuery post方式发送异步请求
function run3() {
//1.参数1 url
var url = "/login";
//2.参数2 数据
var data = {
username:"lucy"};
//3.发送get请求
$.post(url,data,function (param) {
//data响应回来的内容体
alert("响应成功! 响应数据: " + param);
},"text");
}
Ajax请求方式
- $.ajax()方法可以更加详细的设置底层的参数。该方法通常用于其他方法不能完成的请求
- 语法：
jQuery.ajax({[settings]})settings是一个js字面量形式的对象，格式是键值{name:value,name:value}$.ajax({})contentType：发送信息至服务器时内容编码类型，默认application/x-www-form-urlencodeddataType：预期服务器返回的数据类型
//Ajax方式 发送请求
function run4() {
$.ajax({
url:"/login",
async:true, //是否异步
data:{
username:"tom"},
type:"POST", //请求方式
dataType:"text", //返回数据的数据类型
success:function (param) {
alert("响应成功!! " + param)
},
error:function () {
alert("响应失败!!")
}
});
}