Ajax
概念
- AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML
作用
- 与服务器举行数据交换：通过AJAX可以给服务器发送哀求，并获取服务器相应的数据
- 后台发送：欣赏器的哀求是后台js发送给服务器的，js会创建单独的线程发送异步哀求，这个线程不会影响欣赏器的线程运行
- 局部刷新：欣赏器吸取到结果以后举行页面局部刷新
未利用Ajax和利用Ajax后对比
- 欣赏器发送HTTP返回的是一个完备的网页,欣赏器会表现这个网页- 欣赏器会期待服务器的相应(同步哀求)
- AJAX返回的是部门数据,欣赏器内容不会厘革
- 后台发送,不影响欣赏器的操纵(异步哀求)
例子
利用了AJAX和服务器举行通讯，就可以利用 HTML+AJAX来更换JSP页面了
- 登录的时间输入用户名，失去焦点的时间，就会利用AJAX发送一个异步哀求到后台，然后返回用户存在与否的结果
Ajax原生API
- 创建 XMLHttpRequest 对象：用于和服务器交换数据
let xmlhttp = new XMLHttpRequest()
xmlHttp.onreadystatechange=function (){ if(xmlHttp.readyState==4 && xmlHttp.status=200){ alert(xmlHttp.responseText); }}
//设置哀求方式和资源地点xmlhttp.open("GET",“url");//发送哀求xmlhttp.send();
属性形貌onreadystatechange界说了当 readyState 属性发生改变时所调用的函数。readyState生存了 XMLHttpRequest 的状态。
0: 哀求未初始化
1: 服务器毗连已创建
2: 哀求已吸取
3: 正在处理处罚哀求
4: 哀求已完成且相应已停当status200: "OK"
403: "Forbidden"
404: " age not found"statusText返回状态文本（比方 "OK" 或 "Not Found"）Ajax快速入门
学习网站：https://www.w3school.com.cn/
步调
- 编写AjaxServlet，并利用response输出字符串
/** * Ajax 异步的JavaScript和XML */@WebServlet(value = "/ajaxServlet")public class AjaxServlet extends HttpServlet { private static final long serialVersionUID = -2594113160049777689L; @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.getWriter().write("hello ajax"); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); }}
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Ajax快速入门</title></head><body><script> //创建Ajax的焦点对象 let xmlHttpRequest = new XMLHttpRequest(); //设置监听，获取哀求的相应数据（onreadystatechange 就是在状态厘革时举行回调） xmlHttpRequest.onreadystatechange = function () { //readyState == 4 表示哀求完成，而且可以返回了相应数据到欣赏器 //status == 200 表示相应码，200为哀求乐成，就可以获取相应数据 if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) { alert(xmlHttpRequest.responseText); } } //哀求方式和URL的配置，并发送哀求 xmlHttpRequest.open('GET', "ajaxServlet"); xmlHttpRequest.send();</script></body></html>Axios异步框架
- Axios 对原生的AJAX举行封装，简化誊写
- 官网：https://www.axios-http.cn
注意：axios会自动将字符串的true和false转换为boolean类型
Axios快速入门
步调：
- 编写AxiosServlet，吸取哀求参数，并利用response输出字符串
@WebServlet(value = "/axiosServlet")public class AxiosServlet extends HttpServlet { private static final long serialVersionUID = 7336379928784176967L; @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String username = request.getParameter("username"); String password = request.getParameter("password"); System.out.println("吸取到axios的哀求：" + username + "=" + password); response.getWriter().write("hello " + username); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); }}
<script src="js/axios-0.18.0.js"></script>
axios({ method: "GET", url: "axiosServlet?username=zhangsan&password=333"}).then(resp => { //resp 表示相应对象，resp.data，表示相应数据 alert(resp.data)});
axios({ method: "OST", url: "axiosServlet", data: "username=lisi&password=444"}).then(resp => { alert(resp.data)});
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Axios快速入门</title> <script src="js/axios-0.18.0.js"></script></head><body><button >GET哀求</button><button >ost哀求</button><script> //利用Axios的GET哀求 function testGet() { axios({ method: "GET", url: "axiosServlet?username=zhangsan&password=333" }).then(resp => { //resp 表示相应对象，resp.data，表示相应数据 alert(resp.data) }); } //利用Axios的POST哀求 function testPost() { axios({ method: "OST", url: "axiosServlet", data: "username=lisi&password=444" }).then(resp => { alert(resp.data) }); }</script></body></html>Axios 哀求方式别名
- 为了方便起见， Axios 已经为全部支持的哀求方法提供了别名
axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(url[, config])axios.options(url[, config])axios.post(url[, data[, config]])axios.put(url[, data[, config]])axios.patch(url[, data[, config]])
方法名作用get(url)发起GET方式哀求post(url,哀求参数)发起POST方式哀求
axios.get("axiosServlet?username=zhangsan&password=333").then(resp => { //resp.data 代表相应的数据 alert(resp.data)});
axios.post("axiosServlet", "username=wangwu&password=555").then(resp => { alert(resp.data)});
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Axios别名</title> <script src="js/axios-0.18.0.js"></script></head><body><button >GET哀求</button><button >ost哀求</button><script> //利用Axios的别名，举行GET哀求 function testGet() { //参数：哀求路径和哀求参数（存放在哀求行） axios.get("axiosServlet?username=zhangsan&password=333") .then(resp => { //resp.data 代表相应的数据 alert(resp.data) }); } //利用Axios的别名方式，举行POST哀求 function testPost() { //第一个参数：哀求路径（存放在哀求行） //第二个参数：哀求参数（存放在哀求体） axios.post("axiosServlet", "username=wangwu&password=555") .then(resp => { alert(resp.data) }); }</script></body></html> |
