AJAX快速学习笔记
AJAX
AJAX概念
-
概念:AJAX (Asynchronous JavaScript And XML):异步的JavaScript和XML
-
AJAX作用:
- 与服务器进行数据交换:通过AJAX可以给服务器发送请求,并获取服务器响应的数据:使用了AJAX和服务器进行通信,就可以使用HTML+AJAX来替换JSP页面了
- 异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用校验,等等…
-
同步和异步
AJAX快速入门
- 服务端编写AjaxServlet,并使用response输出字符串
- 客户端创建XMLHttpRequest对象:用于和服务器交换数据
var xmlhttp;
if (window.XMLHttpRequest){
//code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}else {
//code for lE6,IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
- 客户端向服务器发送请求
xmlhttp.open("GET,"url");
xmlhttp.send();//发送请求
- 客户端获取服务器响应数据
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
alert(xmlhttp.responseText);
}
}
Axios
Axios异步框架
Axios 对原生的AJAX进行封装,简化书写
Axios快速入门
- 引入axios的js文件
<script src="jslaxios-0.18.0.js"></script>
- 使用axios发送请求,并获取响应结果
axios({
method:"get",
url:"http:llocalhost:8080lajax-demo1/aJAXDemo1?username=zhangsan"
}).then(function (resp){
alert(resp.data);
})
axios({
method:"post",
url:"http:/l/localhost:8080/ajax-demo1/aJAXDemo1",
data:"username=zhangsan"
}).then(function (resp){
alert(resp.data);
});
Axios请求方式别名
- 发送get请求
axios.get(“url")
.then(function (resp){
alert(resp.data);
});
- 发送post请求
axios.post("url","参数")
.then(function (resp){
alert(resp.data);
});
JSON
- 概念: JavaScript Object Notation。JavaScript 对象表示法
- 由于其语法简单,层次结构鲜明,现多用于作为数据载体,在网络中进行数据传输
JSON基础语法
- 定义:
var 变量名 = {
"key1": value1,
"key2": value2,
...
};
示例:
var json = {
"name: "zhangsan",
"age": 23,
"addr":["北京","上海"","西安"]
};
- 获取数据:
变量名.key
json.name
- value的数据类型为:
- 数字(整数或浮点数)
- 字符串(在双引号中)
- 逻辑值 (true或false)
- 数组 (在方括号中)
- 对象(在花括号中)
- null
JSON数据和Java对象转换
- 请求数据:JSON字符串转为Java对象
- 响应数据:Java对象转为JSON字符串
Fastjson是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库,是目前Java语言中最快的JSON库,可以实现Java对象和JSON字符串的相互转换。
- 使用:
- 导入坐标
<dependency>
<groupld>com.alibaba</groupld>
<artifactld>fastjson</artifactld>
<version>1.2.62</version>
</dependency>
- Java对象转JSON
String jsonStr = JSON.toJSONString(obj);
- JSON字符串转Java对象
User user = JSON.parseObject(jsonStr, User.class);