(一)AJAX:是异步的JavaScript和XML
异步说明:我可以同时干很多事情;JavaScript是前端的语言;XML是指以此进行数据交换
Ajax:可以通过局部刷新页面,将信息传递到后端进行操作,方便快捷,十分人性化
例如:
(二)Ajax介绍和运用:
最早->Servlet返回页面
直接返回JSP
Servlet(查询数据) + jsp(返回和响应) 单体项目-->后端
html+ajax:前后端分离项目
之前做的项目
使用Ajax是前后端能够使前后端分成两个部分,只需要进行前后端的数据交互就可以,避免粘连,方便操作。
学习之后:
先写前端的ajax代码:(可以导入axios包简便书写)
//1. 创建核心对象
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//2. 发送请求
xhttp.open("GET", "http://localhost:8080/ajax-demo/ajaxServlet");
xhttp.send();
//3. 获取响应
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
}
};
导入包后:
axios({ method:"get", url:"http://localhost:8080/Ajax/SelAllServlet", }).then(function (resp){ _this.brands=resp.data })
后端:
@WebServlet("/selectUserServlet")
public class SelectUserServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 接收用户名
String username = request.getParameter("username");
//2. 调用service查询User对象,此处不进行业务逻辑处理,直接给 flag 赋值为 true,表明用户名占用
boolean flag = true;
//3. 响应标记
response.getWriter().write("" + flag);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
(三)JSON
前后端规定的一种传输数据的格式----本质是字符串
JSON 串的键要求必须使用双引号括起来,而值根据要表示的类型确定。value 的数据类型分为如下
-
数字(整数或浮点数)
-
字符串(使用双引号括起来)
-
逻辑值(true或者false)
-
数组(在方括号中)
-
对象(在花括号中)
-
null
那么如何获取:
如何输出:
如果传出的数据不是字符串类型要调用方法
===============知识回顾======
(1)
throw:一般写在catch中,自定义的异常(一般不用自定义的异常)
throws:写在方法后,官方的异常
(2)
get :请求行中,速度快,有3KB的大小限制,在地址栏中以键值对的形式显示,不安全
post:请求体中,速度慢,无大小限制,不在地址栏中显示信息,较安全