Axios是Ajax的一个框架，简化Ajax操作
一、基本操作
Axios执行Ajax的操作：
1. 添加axios的js文件
<script language="JavaScript" src="script/axios.min.js"></script>2.1 客户端向服务端异步发送普通参数值
格式：
axios().then().catch()-示例：
axios()({
methods:"POST"
url:"...." //发送数据信息至....(后端代码“艺名”)
params:({
key1:value,
key2:value
.
.
.
})
})
.then(function(value){ }) //axios发送成功后给予的回应
.catch(function(reason){ }) //axios发送失败后的回应，reason.response.data可以获取到相应内容
reason.message / reason.stack 可以查看错误的信息2.2 客户端向服务器发送JSON格式的数据
- JSON：是一种数据格式，如XML
- XML表示两组数据格式：（格式较为清晰）
<students>
<student sid="s001">
<sname>jim</sname>
<age>18</age>
</student>
<student sid="s002">
<sname>tom</sname>
<age>16</age>
</student>
</students>JSON格式：（JSON表达更为简洁，更能够节约网络带宽）
[{sid:"s001",age:18},{sid:"s001",age:16}]完整代码：
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript" src="script/vue.js"></script>
<script language="JavaScript">
window.onload=function(){
var vue = new Vue({
"el":"#div0",
data:{
msg:1
},
methods:{
changeMsg:function(){
this.msg = this.msg + 1 ;
}
},
/*vue对象创建之前*/
beforeCreate:function(){
console.log("beforeCreate:vue对象创建之前---------------");
console.log("msg:"+this.msg);
},
/*vue对象创建之后*/
created:function(){
console.log("created:vue对象创建之后---------------");
console.log("msg:"+this.msg);
},
/*数据装载之前*/
beforeMount:function(){
console.log("beforeMount:数据装载之前---------------");
console.log("span:"+document.getElementById("span").innerText);
},
/*数据装载之后*/
mounted:function(){
console.log("mounted:数据装载之后---------------");
console.log("span:"+document.getElementById("span").innerText);
},
beforeUpdate:function(){
console.log("beforeUpdate:数据更新之前---------------");
console.log("msg:"+this.msg);
console.log("span:"+document.getElementById("span").innerText);
},
updated:function(){
console.log("Updated:数据更新之后---------------");
console.log("msg:"+this.msg);
console.log("span:"+document.getElementById("span").innerText);
}
});
}
</script>
</head>
<body>
<div id="div0">
<span id="span">{{msg}}</span><br/>
<input type="button" value="改变msg的值" @click="changeMsg"/>
</div>
</body>
</html>后端代码
package com.xx.axios;
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.io.PrintWriter;
@WebServlet("/axios01.do")
public class Axios01Servlet extends HttpServlet {
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String uname = request.getParameter("uname");
String pwd = request.getParameter("pwd");
System.out.println("uname = " + uname + "\n" + "pwd = " + pwd);
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charast=utf-8");
PrintWriter out = response.getWriter();
out.println(uname + "_" + pwd); //返回至客户端（then中）
throw new NullPointerException("故意抛出空指针异常！");
}
}
2.2 客户端向服务端异步发送JSON格式数据
1）客户端中params需要修改为 data；
2）服务器获取参数值不再是 request.getParameter（若使用此方法，则无法接收到数据）
而是：
//stringbuffer是可变字符串，本质是一个可变的字符数组
StringBuffer stringBuffer = new StringBuffer("");
//StringBuilder stringBuilder = new StringBuilder();
//由于请求数据有可能很大，所以使用Sevlet标准在设计API时，通过输入流来获取
BufferedReader reader = request.getReader();
//声明临时变量
String str = null;
//循环读取str中读取的数据
while ((str = reader.readLine()) != null){
stringBuffer.append(str);
}
//累加的结果即为整个请求体
str = stringBuffer.toString();则str的内容如下：
3）将（JSON格式的）String转化为User Object ( 需要使用第三方GSON )
2.3 服务器端给客户端响应JSON格式字符串，然后客户端需要将字符串转化为js Object
MIME类型参考：
<mime-mapping>
<extension>mp4</extension>
<mime-type>video/mp4</mime-type>
</mime-mapping>
<mime-mapping>
<extension>doc</extension>
<mime-type>application/msword</mime-type>
</mime-mapping>
<mime-mapping>
<extension>json</extension>
<mime-type>application/json</mime-type>
</mime-mapping>
<mime-mapping>
<extension>html</extension>
<mime-type>text/html</mime-type>
</mime-mapping>
