AJAX
Posted xue_yun_xiang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX相关的知识，希望对你有一定的参考价值。
一、概述
AJAX = Asynchronous异步 javascript and XML。四个单词首字母
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过异步加载的形式请求数据，局部刷新界面
异步请求，局部刷新
二、get请求
GetEmpByIdServlet.java
package com.qfedu.servlet;
import com.alibaba.fastjson.JSON;
import com.qfedu.entity.Emp;
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;
/**
* @author xue_yun_xiang
* @create 2021-05-04-12:55
*/
@WebServlet("/GetEmpByIdServlet")
public class GetEmpByIdServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//标记返回json
resp.setContentType("text/json;charset=utf-8");
String idStr = req.getParameter("id");
Emp emp = new Emp(1,"xiaoming",12,"F",3000);
// 返回前端json 数据 ajax 接收数据
resp.getWriter().write(JSON.toJSONString(emp));
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
get.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
id:<input type="number" name="id" id="id">
<button onclick="getEmpById()">获取emp</button>
<p id="content"></p>
<script>
//根据id查询emp
function getEmpById() {
// 创建一个链接/客户端 作用：发起http请求
var xMLHttpRequest = new XMLHttpRequest();
// 配置 xMLHttpRequest 回调函数
//只要xMLHttpRequest 的状态（发送数据，接收数据，创建连接） 发生变化都会 回调
//onreadystatechange监听状态
xMLHttpRequest.onreadystatechange = function(){
//readyState 转态
// 0 请求未初始化
// 1 请求建立链接
// 2 请求已接受
// 3 请求处理中
// 4 请求处理完成 后端响应完成
// xmlhttp.status 200 请求成功 404找不到界面
if (xMLHttpRequest.readyState==4 && xMLHttpRequest.status==200 ){
//获取后端响应数据
alert(xMLHttpRequest.responseText);
//将获取的数据局部刷新 到 前端界面
document.getElementById("content").innerText=xMLHttpRequest.responseText;
}
}
//获取id 为 id的输入值
var id = document.getElementById("id").valueOf().value;
// 第一个参数 请求方式
// 第二个参数 请求路径
// 第三个参数是否异步 true
xMLHttpRequest.open("get","/GetEmpByIdServlet?id=" + id,true);
// 发起请求
xMLHttpRequest.send();
}
</script>
</body>
</html>
三、post请求
GetEmpByIdServlet.java
package com.qfedu.servlet;
import com.alibaba.fastjson.JSON;
import com.qfedu.entity.Emp;
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;
/**
* @author xue_yun_xiang
* @create 2021-05-04-12:55
*/
@WebServlet("/GetEmpByIdServlet")
public class GetEmpByIdServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//标记返回json
resp.setContentType("text/json;charset=utf-8");
String idStr = req.getParameter("id");
Emp emp = new Emp(1,"xiaoming",12,"F",3000);
// 返回前端json 数据 ajax 接收数据
resp.getWriter().write(JSON.toJSONString(emp));
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
}
post.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
id:<input type="number" name="id" id="id">
<button onclick="getEmpById()">获取emp</button>
<p id="content"></p>
<script>
//根据id查询emp
function getEmpById() {
// 创建一个链接/客户端 作用：发起http请求
var xMLHttpRequest = new XMLHttpRequest();
// 配置 xMLHttpRequest 回调函数
//只要xMLHttpRequest 的状态（发送数据，接收数据，创建连接） 发生变化都会 回调
//onreadystatechange监听状态
xMLHttpRequest.onreadystatechange = function(){
//readyState 转态
// 0 请求未初始化
// 1 请求建立链接
// 2 请求已接受
// 3 请求处理中
// 4 请求处理完成 后端响应完成
// xmlhttp.status 200 请求成功 404找不到界面
if (xMLHttpRequest.readyState==4 && xMLHttpRequest.status==200 ){
//获取后端响应数据
alert(xMLHttpRequest.responseText);
//将获取的数据局部刷新 到 前端界面
document.getElementById("content").innerText=xMLHttpRequest.responseText;
}
}
//获取id 为 id的输入值
var id = document.getElementById("id").valueOf().value;
// 第一个参数 请求方式
// 第二个参数 请求路径
// 第三个参数是否异步 true
//第一种：携带数据是在url中
// xMLHttpRequest.open("post","/GetEmpByIdServlet?id=" + id,true);
// 发起请求
//xMLHttpRequest.send();
xMLHttpRequest.open('post','/GetEmpByIdServlet',true);
//注意：设置格式要放在打开链接的下面
//设置xML的请求方式为post，将数据放到body中，必须设置header
//对body进行编码
xMLHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//第二种：安全
//ajax以body形式发送请求
xMLHttpRequest.send('id=' + id);
}
</script>
</body>
</html>
以上是关于AJAX的主要内容，如果未能解决你的问题，请参考以下文章