好发信息网站建设,WordPress静态主题,济南建设公司网站,轻骑铃木摩托车官网1#xff0c;Ajax
1.1 概述
AJAX (Asynchronous JavaScript And XML)#xff1a;异步的 JavaScript 和 XML。
我们先来说概念中的 JavaScript 和 XML#xff0c;JavaScript 表明该技术和前端相关#xff1b;XML 是指以此进行数据交换。而这两个我们之前都学习过。
1.1.…1Ajax
1.1 概述
AJAX (Asynchronous JavaScript And XML)异步的 JavaScript 和 XML。
我们先来说概念中的 JavaScript 和 XMLJavaScript 表明该技术和前端相关XML 是指以此进行数据交换。而这两个我们之前都学习过。
1.1.1 作用
AJAX 作用有以下两方面 与服务器进行数据交换通过AJAX可以给服务器发送请求服务器将数据直接响应回给浏览器。如下图
我们先来看之前做功能的流程如下图 如上图Servlet 调用完业务逻辑层后将数据存储到域对象中然后跳转到指定的 jsp 页面在页面上使用 EL表达式 和 JSTL 标签库进行数据的展示。
而我们学习了AJAX 后就可以使用AJAX和服务器进行通信以达到使用 HTMLAJAX来替换JSP页面了。如下图浏览器发送请求servletservlet 调用完业务逻辑层后将数据直接响应回给浏览器页面页面使用 HTML 来进行数据展示。 异步交互可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术如搜索联想、用户名是否可用校验等等… 上图所示的效果我们经常见到在我们输入一些关键字例如 奥运后就会在下面联想出相关的内容而联想出来的这部分数据肯定是存储在百度的服务器上而我们并没有看出页面重新刷新这就是 更新局部页面 的效果。再如下图 我们在用户名的输入框输入用户名当输入框一失去焦点如果用户名已经被占用就会在下方展示提示的信息在这整个过程中也没有页面的刷新只是在局部展示出了提示信息这就是 更新局部页面 的效果。
1.1.2 同步和异步
知道了局部刷新后接下来我们再聊聊同步和异步: 同步发送请求过程如下 浏览器页面在发送请求给服务器在服务器处理请求的过程中浏览器页面不能做其他的操作。只能等到服务器响应结束后才能浏览器页面才能继续做其他的操作。 异步发送请求过程如下 浏览器页面发送请求给服务器在服务器处理请求的过程中浏览器页面还可以做其他的操作。
1.2 快速入门
1.2.1 服务端实现
在项目的创建 com.itheima.web.servlet 并在该包下创建名为 AjaxServlet 的servlet
WebServlet(/ajaxServlet)
public class AjaxServlet extends HttpServlet {Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1. 响应数据response.getWriter().write(hello ajax~);}
Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}
1.2.2 客户端实现
在 webapp 下创建名为 01-ajax-demo1.html 的页面在该页面书写 ajax 代码 创建核心对象不同的浏览器创建的对象是不同的 var xhttp;
if (window.XMLHttpRequest) {xhttp new XMLHttpRequest();
} else {// code for IE6, IE5xhttp new ActiveXObject(Microsoft.XMLHTTP);
} 发送请求 //建立连接
xhttp.open(GET, http://localhost:8080/ajax-demo/ajaxServlet);
//发送请求
xhttp.send(); 获取响应 xhttp.onreadystatechange function() {if (this.readyState 4 this.status 200) {// 通过 this.responseText 可以获取到服务端响应的数据alert(this.responseText);}
};
完整代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
script//1. 创建核心对象var xhttp;if (window.XMLHttpRequest) {xhttp new XMLHttpRequest();} else {// code for IE6, IE5xhttp 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);}};
/script
/body
/html
1.2.3 测试
在浏览器地址栏输入 http://localhost:8080/ajax-demo/01-ajax-demo1.html 在 01-ajax-demo1.html加载的时候就会发送 ajax 请求效果如下 我们可以通过 开发者模式 查看发送的 AJAX 请求。在浏览器上按 F12 快捷键 这个是查看所有的请求如果我们只是想看 异步请求的话点击上图中 All 旁边的 XHR会发现只展示 Type 是 xhr 的请求。如下图 1.3 案例
需求在完成用户注册时当用户名输入框失去焦点时校验用户名是否在数据库已存在 1.3.1 分析 前端完成的逻辑 给用户名输入框绑定光标失去焦点事件 onblur 发送 ajax请求携带username参数 处理响应是否显示提示信息 后端完成的逻辑 接收用户名 调用service查询User。此案例是为了演示前后端异步交互所以此处我们不做业务逻辑处理 返回标记
整体流程如下 1.3.2 后端实现
在 com.ithiema.web.servlet 包中定义名为 SelectUserServlet 的servlet。代码如下
WebServlet(/selectUserServlet)
public class SelectUserServlet extends HttpServlet {Overrideprotected 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);}
Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}
1.3.3 前端实现
将 04-资料\1. 验证用户名案例\1. 静态页面 下的文件整体拷贝到项目下 webapp 下。并在 register.html 页面的 body 结束标签前编写 script 标签在该标签中实现如下逻辑
第一步给用户名输入框绑定光标失去焦点事件 onblur
//1. 给用户名输入框绑定 失去焦点事件
document.getElementById(username).onblur function () {}
第二步发送 ajax请求携带username参数
在 第一步 绑定的匿名函数中书写发送 ajax 请求的代码
//2. 发送ajax请求
//2.1. 创建核心对象
var xhttp;
if (window.XMLHttpRequest) {xhttp new XMLHttpRequest();
} else {// code for IE6, IE5xhttp new ActiveXObject(Microsoft.XMLHTTP);
}
//2.2. 发送请求
xhttp.open(GET, http://localhost:8080/ajax-demo/selectUserServlet);
xhttp.send();
//2.3. 获取响应
xhttp.onreadystatechange function() {if (this.readyState 4 this.status 200) {//处理响应的结果}
};
由于我们发送的是 GET 请求所以需要在 URL 后拼接从输入框获取的用户名数据。而我们在 第一步 绑定的匿名函数中通过以下代码可以获取用户名数据
// 获取用户名的值
var username this.value; //this 给谁绑定的事件this就代表谁
而携带数据需要将 URL 修改为
xhttp.open(GET, http://localhost:8080/ajax-demo/selectUserServlet?usernameusername);
第三步处理响应是否显示提示信息
当 this.readyState 4 this.status 200 条件满足时说明已经成功响应数据了。
此时需要判断响应的数据是否是 true 字符串如果是说明用户名已经占用给出错误提示如果不是说明用户名未被占用清除错误提示。代码如下
//判断
if(this.responseText true){//用户名存在显示提示信息document.getElementById(username_err).style.display ;
}else {//用户名不存在 清楚提示信息document.getElementById(username_err).style.display none;
}
综上所述前端完成代码如下
//1. 给用户名输入框绑定 失去焦点事件
document.getElementById(username).onblur function () {//2. 发送ajax请求// 获取用户名的值var username this.value;
//2.1. 创建核心对象var xhttp;if (window.XMLHttpRequest) {xhttp new XMLHttpRequest();} else {// code for IE6, IE5xhttp new ActiveXObject(Microsoft.XMLHTTP);}//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) {//alert(this.responseText);//判断if(this.responseText true){//用户名存在显示提示信息document.getElementById(username_err).style.display ;}else {//用户名不存在 清楚提示信息document.getElementById(username_err).style.display none;}}};
}
2axios
Axios 对原生的AJAX进行封装简化书写。
Axios官网是https://www.axios-http.cn
2.1 基本使用
axios 使用是比较简单的分为以下两步 引入 axios 的 js 文件 script srcjs/axios-0.18.0.js/script 使用axios 发送请求并获取响应结果 发送 get 请求 axios({method:get,url:http://localhost:8080/ajax-demo1/aJAXDemo1?usernamezhangsan
}).then(function (resp){alert(resp.data);
}) 发送 post 请求 axios({method:post,url:http://localhost:8080/ajax-demo1/aJAXDemo1,data:usernamezhangsan
}).then(function (resp){alert(resp.data);
});
axios() 是用来发送异步请求的小括号中使用 js 对象传递请求相关的参数 method 属性用来设置请求方式的。取值为 get 或者 post。 url 属性用来书写请求的资源路径。如果是 get 请求需要将请求参数拼接到路径的后面格式为 url?参数名参数值参数名2参数值2。 data 属性作为请求体被发送的数据。也就是说如果是 post 请求的话数据需要作为 data 属性的值。
then() 需要传递一个匿名函数。我们将 then() 中传递的匿名函数称为 回调函数意思是该匿名函数在发送请求时不会被调用而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象通过 resp.data 可以获取到响应的数据。
2.2 快速入门
2.2.1 后端实现
定义一个用于接收请求的servlet代码如下
WebServlet(/axiosServlet)
public class AxiosServlet extends HttpServlet {Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println(get...);//1. 接收请求参数String username request.getParameter(username);System.out.println(username);//2. 响应数据response.getWriter().write(hello Axios~);}
Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println(post...);this.doGet(request, response);}
}
2.2.2 前端实现 引入 js 文件 script srcjs/axios-0.18.0.js/script 发送 ajax 请求 get 请求 axios({method:get,url:http://localhost:8080/ajax-demo/axiosServlet?usernamezhangsan
}).then(function (resp) {alert(resp.data);
}) post 请求 axios({method:post,url:http://localhost:8080/ajax-demo/axiosServlet,data:usernamezhangsan
}).then(function (resp) {alert(resp.data);
})
整体页面代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
script srcjs/axios-0.18.0.js/script
script//1. get/* axios({method:get,url:http://localhost:8080/ajax-demo/axiosServlet?usernamezhangsan}).then(function (resp) {alert(resp.data);})*/
//2. post 在js中{} 表示一个js对象而这个js对象中有三个属性axios({method:post,url:http://localhost:8080/ajax-demo/axiosServlet,data:usernamezhangsan}).then(function (resp) {alert(resp.data);})
/script
/body
/html
2.3 请求方法别名
为了方便起见 Axios 已经为所有支持的请求方法提供了别名。如下 get 请求 axios.get(url[,config]) delete 请求 axios.delete(url[,config]) head 请求 axios.head(url[,config]) options 请求 axios.option(url[,config]) post 请求axios.post(url[,data[,config]) put 请求axios.put(url[,data[,config]) patch 请求axios.patch(url[,data[,config]) 而我们只关注 get 请求和 post 请求。
入门案例中的 get 请求代码可以改为如下
axios.get(http://localhost:8080/ajax-demo/axiosServlet?usernamezhangsan).then(function (resp) {alert(resp.data);
});
入门案例中的 post 请求代码可以改为如下
axios.post(http://localhost:8080/ajax-demo/axiosServlet,usernamezhangsan).then(function (resp) {alert(resp.data);
})
