简述
AJAX(Asynchronous JavaScript And XML):异步的JavaScript和XML,可以利用AJAX完成网页请求的异步操作。
创建 XMLHttpRequest 对象
用于与服务器交换数据,但不同浏览器的差异,还需判断创建不同的对象;
var xmlHttp;
var xmlHttp = new XMLHttpRequest() ;
if(window.XMLHttpRequest){
// code for IE7+、Firefox、Chrome、Oprea、Safari
xmlHttp = new XMLHttpRequest();
}
else{
// code for IE6、IE5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
异步请求步骤
- 绑定相关事件
xmlHttp.onreadystatechange = function(){
//这里是异步请求成功的条件
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
//这里是异步请求成功后的处理,一般都会直接获取响应的内容,
console.log(xmlHttp.responseText);
}
}
- 开始请求
xmlHttp.open("GET",url);
xmlHttp.send();
Axios框架
Axios框架实现了对原生AJAX代码的封装,简化书写。
引入Axios框架
<script src = "js/axios-0.27.2.js"></script>
使用Axios框架
axios({
method:"POST",
url:"CheckUsernameServlet",
data:"username=zhangsan",
}).then(function (resp) {
//回调函数,处理响应的数据
})
请求方式别名
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]])
使用JSON作为AJAX的数据载体
//json 对象的定义
var json = {
"key1":value1,
"key2":value2,
...
"keyn":valuen
}
JSON字符串与Java对象互转
Maven项目先引入坐标,阿里巴巴提供的高性能功能完善的json库
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.62</version>
</dependency>
String json = JSON.toJSONString(obj);
User user = JSON.parseObject(json,User.class);