纯html通过XMLHttpRequest访问java后端接口并将返回结果输出到控制台【建议收藏】-编程知识

纯html通过XMLHttpRequest访问java后端接口并将返回结果输出到控制台【建议收藏】

我们需要准备几个部分：

1、后端接口【servlet+tomcat】

2、前端页面代码

3、js发起请求部分

后端接口：

@WebServlet("/h1")
public class HController extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//设置响应格式，一般我们采用json格式resp.setContentType("application/json");//设置响应的字符集resp.setCharacterEncoding("UTF-8");//后端解决跨域的问题【非常重要，没有这个就访问不了】resp.setHeader("Access-Control-Allow-Origin", "*");//创建一个json字符串String str = "{\"name\":\"xjx\",\"age\":19}";//通过响应对象进行响应PrintWriter out = resp.getWriter();out.print(str);out.flush();}
}

前端+js代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 通过css控制布局和样式 --><style>#app{text-align: center;}button{    background-color: #36D;color: #fff;border: 4px #36D solid;border-radius: 2px;}</style>
</head>
<body><!-- html控制页面元素 --><div id="app"><button onclick="SendXMLHttpRequest()">点我访问</button></div>
</body>
</html>
<script>//创建一个方法function SendXMLHttpRequest(){//创建XMLHttpRequest对象，该对象用于与服务器交互，可以请求特定的URL，获取数据。var xhr = new XMLHttpRequest();//初始化一个请求，第三个参数默认是true，表示是否是异步操作xhr.open("GET", "http://localhost:8080/h1", true);//当 readyState 属性发生变化时，调用的事件处理器。【回调函数】xhr.onreadystatechange = function(a) {//如果返回对象中的状态满足就将返回的数据取出来打印到控制台if (xhr.readyState === 4&&xhr.status===200 ) {//转换成json格式var response = JSON.parse(xhr.responseText);                console.log(response);}};//发送请求xhr.send();}
</script>