1.AJAX的引入
JS 缺乏 主动发起 Http请求 的能力,因此需要代码片段让JS发起Http请求,我们称这样的代码片段为——AJAX(Asynchronous JAvaScript by Xml )
AJAX借助 JS 中的一个内置对象:XMLHttpRequest,可简写为xhr
2.AJAX的代码片段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax 请求</title>
</head>
<body>
<script>
<!-- js发送http请求 利用相应的代码片段-->
var xhr=new XMLHttpRequest(); <!-- 初始化js中的内置对象XMLHttpRequest-->
xhr.open("post","/hhhhhhh");<!-- 提供HTTP请求的 方法和url-->
xhr.send();<!-- 发起真正的请求-->
</script>
</body>
</html>
在上面的代码完成后,即完成了由JS构建的请求-响应,接下来需要考虑:当请求-响应完成时(对应事件为 XMLHttpRequest中的load),如何利用JS代码读取响应的数据,这里将用到事件绑定(元素、事件、函数)
前端代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax 请求</title>
</head>
<body>
<script>
// js发送http请求 利用相应的代码片段-->
var xhr=new XMLHttpRequest(); // 初始化js中的内置对象XMLHttpRequest-->
//定义 事件绑定中的函数,定义在xhr实例化之后,因为函数中需要xhr
function success() {
console.log("完成请求-响应啦!!!!!!!") //请求响应成功后再打印
console.log(xhr.responseText) //拿到 响应的响应体信息,响应正文
console.log(xhr.status) //拿到请求的响应状态码
}
xhr.onload=success;//当请求响应完成后,去执行success函数
xhr.open("get","/delay");// 提供HTTP请求的 方法和url-->
xhr.send();// 发起真正的请求-->
console.log("ajax请求已发送")//先打印
</script>
</body>
</html>
后端代码:
package 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;
import java.util.concurrent.TimeUnit;
@WebServlet("/delay")
public class DelayServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//增加延时,在输出响应
try {
TimeUnit.SECONDS.sleep(3);
} catch (InterruptedException e) {
e.printStackTrace();
}
//输出些 响应
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/plain");
resp.getWriter().println("看这里!!!!!!!!!!!");
}
}
3.通过Ajax 向后端传递数据
- 没有Ajax之前向后端传递数据:利用form表单
Ajax在模拟实现第一种方式时,JS在URL中组织queryString即可,但是这种人为规定的模拟实现方法,在字符串切割时往往会存在一定问题。因此需要引入一种标准的结构化数据格式——Json