axios
- 服务器和客户端传输数据
- 动态展示数据
<script>
// 创建 XMLHttpRequest 对象
var xhttp = new XMLHttpRequest();
// 发送请求
xhttp.open("GET", "http://localhost:8080/ServletAjax");
xhttp.send();
//获取响应
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText)
}
};
</script>
axios
首先引入axios.js包
axios-0.18.0.js
<script src="js/axios-0.18.0.js">
其次
/* axios({
method:"get",
url:"http://localhost:8080/axiosServlet?username=zhangsan"
}).then(function (response) {
alert(response.data);
})*/
axios({
method:"post",
url:"http://localhost:8080/axiosServlet",
data:"username=zhangsan"
}).then(function (response) {
alert(response.data);
})
例子，两种不同方式动态获取用户名是否存在
判断是否有这个用户名，然后返回true或者false
axios接收响应，因为””+flag flag是boolean类型没有放在字符池中，==需要在字符常量池中来找，toString可以将它放在里面，记住一定要.toString或者后面不要用 “true”
<span id="username_err" class="err_msg" style="display: none">用户名已存在</span>
<script src="js/axios-0.18.0.js">
</script>
<script>
document.getElementById("username").onblur= function () {
var username = this.value;
// 创建 XMLHttpRequest 对象
/* var xhttp = new XMLHttpRequest();
// 发送请求
xhttp.open("GET", "http://localhost:8080/registerServlet?username=" + username);
xhttp.send();
//获取响应
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
if (this.responseText == "true") {
//用户名存在显示提示信息
document.getElementById("username_err").style.display='';
}
else {
//用户名不存在显示提示信息
document.getElementById("username_err").style.display='none';
}
}
};*/
axios({
method:"get",
url:"http://localhost:8080/registerServlet?username="+username
}).then(function (response) {
var s = (response.data).toString();
if ( s == "true") {
//用户名存在显示提示信息
document.getElementById("username_err").style.display='';
}
else {
//用户名不存在显示提示信息
document.getElementById("username_err").style.display='none';
}
})
}
</script>
Json
<script>
var json = {
"name": "kang",
"id": 4,
"aihao": ["游泳","足球"]
};
alert(json.aihao);
</script>
