Ajax & Axios框架
一 、Ajax
-
同步与异步
Ajax本身就是Asynchronous JavaScript And XML的缩写，直译为：异步的JavaScript和XML。
在实际应用中Ajax指的是：不刷新浏览器窗口，不做页面跳转，局部更新页面内容的技术。
**『同步』和『异步』**是一对相对的概念，那么什么是同步，什么是异步呢？
同步
多个操作按顺序执行，前面的操作没有完成，后面的操作就必须等待。所以同步操作通常是串行的。
异步
多个操作相继开始并发执行，即使开始的先后顺序不同，但是由于它们各自是在自己独立的进程或线程中完成，所以互不干扰，**谁也*不用等*谁。
-
实现异步的关键 - XMLHttpRequest对象
// 声明一个XMLHttpRequest对象 var xmlHttpRequest; // 该方法用于针对不同的浏览器，创建正确的XMLHttpRequest对象。该方法会被封装在Axios框架内 function createXMLHttpRequest() { // 针对符合DOM2标准的浏览器 if (window.XMLHttpRequest) { xmlHttpRequest = new XMLHttpRequest(); // 针对不符合DOM2标准的且不同版本的IE浏览器 } else if (window.ActiveXObject) { try { xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } } } -
实现异步的步骤
function ckUname(uname) { // 第1步：获取XMLHttpRequest对象 createXMLHttpRequest(); // 第2步：确定发送请求的路径和方式 var url = "user.do?operate=ckUname&uname="+uname; // 第一个参数：以什么样的方式发送；第二个参数：给谁发请求；第三个参数：是否为异步方式 xmlHttpRequest.open("GET",url,true); // 第3步：设置回调函数,并创建。 readyState有0-4这几种状态 xmlHttpRequest.onreadystatechange = ckUnameCB; // 第4步：发送请求 xmlHttpRequest.send(); } // 第5步：创建回调函数，并判断XMLHttpRequest对象的状态：readyState（0-4） status（200） function ckUnameCB() { if (xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200) { // xmlHttpRequest.responseText：服务器端响应给我的文本内容 alert(xmlHttpRequest.responseText); if (xmlHttpRequest.responseText == "{'uname':'1'}") { alert("用户可以注册"); } else { alert("用户已存在"); } } } -
服务器端的方法
public String ckUname(String uname) { // 在t_user表根据uname进行查询并返回值 User user = userService.getUser(conn,uname); if (user == null) { // 在组件内进行提取f，并传入response中 return "json:{'uname':'1'}"; } else { // 用户名已存在 return "json:{'uname':'0'}"; } } -
DispatchServlet类内
if (retrunStr.startsWith("redirect:")) { String redirectStr = retrunStr.substring("redirect:".length()); resp.sendRedirect(redirectStr); } else if (retrunStr.startsWith("json:")) { String jsonStr = retrunStr.substring("json:".length()); // 将json后的内容发给客户端 PrintWriter out = resp.getWriter(); out.print(jsonStr); out.flush(); }else { // 5.3 将controller内返回的模板传入父类的模板处理方法 super.processTemplate(retrunStr,req,resp); }
二、Axios
-
简介
Axios是目前最流行的前端Ajax框架
使用原生的JavaScript程序执行Ajax极其繁琐，使用Axios可简化执行Ajax的过程。
-
发送普通的参数
前端
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Title</title> <script language="JavaScript" src="script/vue.js"></script> <script language="JavaScript" src="script/axios.min.js"></script> <script language="JavaScript"> window.onload=function (){ var vue = new Vue({ el:"#app", data:{ uname:"lina", pwd:"ok" }, methods:{ axios1:function (){ // 相当于Ajax中的open函数，明确请求路径和请求参数，普通文本用params axios({ method:"POST", url:"axios1.do", params:{ uname:vue.uname, pwd:vue.pwd } }) // 相当于Ajax中的回调函数，接收返回值 .then(function (value) { console.log(value); }) .catch(function (reason){ console.log(reason); }) } } }); } </script> </head> <body> <div id="app"> uname:<input type="text" v-model="uname" /><br/> pwd:<input type="text" v-model="pwd" /><br/> <input type="button" value="axios" @click="axios1" /> </div> </body> </html>后端
@WebServlet("/axios1.do") public class AxiosServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf-8"); // 获取客户端发来的请求中的参数值 String uname = req.getParameter("uname"); String pwd = req.getParameter("pwd"); // 设置响应的文本编码格式 resp.setCharacterEncoding("utf-8"); resp.setContentType("text/html;character=utf-8"); // 响应给客户端普通的文本值 PrintWriter out = resp.getWriter(); out.write(uname + "_" + pwd); // throw new NullPointerException("故意抛一个空指针异常"); } }浏览器端的参数查看
属性名 作用 config 调用axios(config对象)方法时传入的JSON对象 data 服务器端返回的响应体数据 headers 响应消息头 request 原生JavaScript执行Ajax操作时使用的XMLHttpRequest status 响应状态码 statusText 响应状态码的说明文本 异常查看
三、JSON
-
概念
JavaScript Object Notation, JS 对象简谱， 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
-
转换工具：gson.jar
-
JavaScript内的Object - String之间的转换
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Title</title> <script language="JavaScript"> function axios4(){ // 将String转换为Object对象 var str = "{\"uname\":\"lina\",\"age\":20}"; var user1 = JSON.parse(str); alert(typeof user1); alert(user1.uname+"_"+user1.age); // 将Object对象转换为String var user2 = {"uname":"lina","age":29}; alert(typeof user2); var userStr = JSON.stringify(user); alert(typeof userStr); alert(userStr); } </script> </head> <body> <div id="app"> <input type="button" value="axios" onclick="axios4()" /> </div> </body> </html> -
前后端分离的基础
数据可以以Json String形式在前后端之间互传，而且在前后端内均可将Json数据转换为对象类型
四、Axios异步请求，发送json数据
-
前端
axios体内用data表示json数据
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Title</title> <script language="JavaScript" src="script/vue.js"></script> <script language="JavaScript" src="script/axios.min.js"></script> <script language="JavaScript"> window.onload=function (){ var vue = new Vue({ el:"#app", data:{ uname:"lina", pwd:"ok" }, methods:{ axios1:function (){ // 传输json文本用data axios({ method:"POST", url:"axios2.do", data:{ uname:vue.uname, pwd:vue.pwd } }) .then(function (value) { var data = value.data; console.log(data); }) .catch(function (reason){ console.log(reason); }) } } }); } </script> </head> <body> <div id="app"> uname:<input type="text" v-model="uname" /><br/> pwd:<input type="text" v-model="pwd" /><br/> <input type="button" value="axios" @click="axios1" /> </div> </body> </html>2.后端
@WebServlet("/axios2.do") public class AxiosServlet1 extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 由于请求体数据有可能很大，所以Servlet标准在设计API的时候要求我们通过输入流来读取 // 1.获取从客户端传来的数据 BufferedReader bufferedReader = req.getReader(); // 2.将获取的数据存入buffer StringBuffer stringBuffer = new StringBuffer(""); String str = null; // 获取整个请求体 while ((str=bufferedReader.readLine())!=null) { stringBuffer.append(str); } str = stringBuffer.toString(); // 创建gson对象的另一种形式：Gson gson = new Gson(); // 3.Gson对象用于解析json数据 Gson gson = new GsonBuilder().create(); // 4.fromJson:将json字符串转换为Java Object User user = gson.fromJson(str, User.class); // 5.给user对象的属性赋值 user.setUname("鸠摩智"); user.setPwg("123456"); // 6.假设user是从数据库中获取的，现需将其转换为json格式，响应给客户端 // toJson:将Java Object 转换成为json字符串 String userJson = gson.toJson(user); resp.setCharacterEncoding("utf-8"); // MIME-TYPE(在HTTP内容中) resp.setContentType("application/json;charset=utf-8"); // 7.将json格式的数据响应给客户端 resp.getWriter().write(userJson); } }3.浏览器端参数查看
500
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
