我们需要准备几个部分:
1、后端接口【servlet+tomcat】
2、前端页面代码
3、js发起请求部分
后端接口:
@WebServlet("/h1")
public class HController extends HttpServlet {
@Override
protected 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>
运行效果:
到这里,就用原生的js发起请求,在这里面需要注意的就是跨域问题,我采用的是在后端解决。