外卖网站建设,wordpress主题幻灯片,网站模版制作教程,高邮城乡建设网站概念:AJAX(Asynchronous JavaScript And XML):异步的JavaScript和XML
AJAX作用#xff1a;
1.与服务器进行数据交换:通过AJAX可以给服务器发送请求#xff0c;并获取服务器响应的数据 使用了AJAX和服务器进行通信#xff0c;就可以使用HTMLAJAX来替换JSP页面了
2#xf…概念:AJAX(Asynchronous JavaScript And XML):异步的JavaScript和XML
AJAX作用
1.与服务器进行数据交换:通过AJAX可以给服务器发送请求并获取服务器响应的数据 使用了AJAX和服务器进行通信就可以使用HTMLAJAX来替换JSP页面了
2 异步交互:可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术如︰搜索联想、用户名是否可用校验等等...
同步与异步 1AJAX快速入门
1.1 编写AjaxServlet并用response输出字符串
//1.响应数据
resp.getWriter().write(hello ajax~~~);
1.2 创建XMLHttpRequest 对象:用于和服务器交换数据
// 创建 XMLHttpRequest 对象
const xhttp new XMLHttpRequest();// 定义回调函数
xhttp.onload function() {
// 您可以在这里使用数据
}
1.3 向服务器发送请求
xhttp.open(GET, url);//url为地址
xhttp.send();
1.4 获取服务器响应数据
xhttp.onreadystatechange function() {if (this.readyState 4 this.status 200) {alert(this.responseText);}
}
2案例
验证用户是否存在 Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//1.接收用户名String username req.getParameter(username);//2.调用service查询User对象boolean flag true;//3.响应标记resp.getWriter().write(flag);}
script//1.给用户输入框绑定失去焦点事件document.getElementById(username).onclickfunction (){//2.发送请求var username this.value;//2.1 创建核心对象// 创建 XMLHttpRequest 对象const xhttp new XMLHttpRequest();// 定义回调函数xhttp.onload function() {// 您可以在这里使用数据}//2.2 发送请求xhttp.open(GET, http://localhost:8080/ajax-demo/selectUserServlet?usernameusername);xhttp.send();//2.3 获取相应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.displaynone;}}}}
/script
3Axios
Axios对原生的AJAX进行封装简化书写
3.1 Axios快速入门
3.1.1 引入axios的js文件
script srcjs/axios-0.18.0.jsscript
3.1.2 使用axios发送请求并获取响应结果
//1.get
axios({method:get,url:http://localhost:8080/ajax-demo/axiosServlet?usernamezhangsan
}).then(function (resp){alert(resp.data);
})
//2.post
axios({method:post,url:http://localhost:8080/ajax-demo/axiosServlet,data:usernamezhangsan
}).then(function (resp){alert(resp.data);
})
3.2 Axios请求方法别名
为了方便起见Axios已经为所有支持的请求方法提供了别名
方法名作用get(url)发起GET方式请求post(url,请求参数)发起POST方式请求
//1.get
axios.get(http://localhost:8080/ajax-demo/axiosServlet?usernamezhangsan).then(function (resp){alert(resp.data);
})
//2.post
axios.post(http://localhost:8080/ajax-demo/axiosServlet,usernamezhangsan).then(function (resp){alert(resp.data);
})
原版的阅读性更高而这种则更加简单
4JSON
概念:JavaScript Object Notation。JavaScript对象表示法
由于其语法简单层次结构鲜明现多用于作为数据载体在网络中进行数据传输 4.1 JSON基础语法
var 变量名 {key1:value1,key2:value2,...};
示例
var json {name:zhansan,age:23,address:[北京,上海,西安]};
获取数据
变量名.key
json.name
value的数据类型为:
数字(整数或浮点数)
字符串(在双引号中)
逻辑值(true 或false)
数组(在方括号中)
对象(在花括号中)
null
4.2 JSON数据和Java对象转换
请求数据:JSON字符串转为Java对象
响应数据:Java对象转为JSON字符串
Fastjson是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库是目前Java语言中最快的JSON库可以实现Java对象和JSON字符串的相互转换
4.2.1 导入坐标
dependencygroupIdcom.alibaba/groupIdartifactIdfastjson/artifactIdversion1.2.62/version
/dependency
4.2.2 Java对象转JSON
//1.将java对象转为json字符串
User user new User();
user.setId(1);
user.setUsername(zhangsan);
user.setPassword(123);String jsonString JSON.toJSONString(user);System.out.println(jsonString);//{id:1,password:123,username:zhangsan}
4.2.3 JSON字符串转Java对象
//2.将JSON转化为java对象
User u JSON.parseObject({\id\:1,\password\:\123\,\username\:\zhangsan\},User.class);
System.out.println(u);//User{id1, usernamezhangsan, password123}
