AJAX:Asynchronous JavaScript And XML 异步的JavaScript和XML
作用:1、与服务器进行数据交换,通过AJAX可以给服务器发送请求,并获取服务器响应数据。使用了AJAX和服务器进行通信,就可以使用ajax和html来代替jsp页面了。这样可以实现将前后端进行分离,因为jsp需要依赖浏览器才能运行,所以不能将前后端很好的分离。
2、异步交互:可以在不重新加载该页面的情况下,与服务器进行交换数据并更新部分网页的技术。就是实时部分更新。就比如在用百度搜索时,我们需要完要搜索的内容,还没点搜索或者回车时,网页会自动给出很多类似的搜索内容。
这是写AJAX请求的官网文档:AJAX 简介
你可以通过点下一节来了解写ajax的多个步骤。
编写步骤:1、编写AjaxServlet,并使用response输出字符串。
@WebServlet("/aJAXServlet")
public class AJAXServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.响应数据
response.getWriter().write("hello ajax");
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
2、创建XMLHttpRequest对象:用于和服务器交换数据。
3、向服务器发送请求
4、获取服务器响应数据
<script>
//1.创建核心对象
var xhttp;
if(window.XMLHttpRequest){
xhttp=new XMLHttpRequest();
}else {
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.发送请求
xhttp.open("GET", "/aJAXServlet");
xhttp.send();
//3.获取响应
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
alert(this.responseText);
}
};
</script>
通过上面我们就可以对AJAX发送请求有了一个简单的认识,知道了我们可以运行AJAX简单的实现什么功能和基础代码应该怎么写。同时我们也不难发现AJAX的代码大部分都是重复且很难记住。
所以我们又有了Axios,Axios可以帮助我们简化代码。
Axios异步框架:对原生的AJAX进行封装,简化书写。
Axios使用:1、引入axios的js文件;2、使用axios发送请求,并获取响应数据。
下面这是我在网上找的下载ajax-0.18.0.js的网址:
axios-0.18.0.js 免费下载_axios-0.18.0.js下载-CSDN博客
我们下好文件后,我们最好在webapp项目下创建一个js包,然后把前面下好的文件复制一个到这个包中。
下面是代码的实现:
在使用axios时千万别忘了运用script标签把下载的axios js文件导入!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="/js/axios-0.18.0.js"></script>
<script>
//get
axios({
method:"get",
url:"http://localhost:8080/axiosServlet?username=zhangsan",
}).then(function (resp){
alert(resp.data)
})
//post
axios({
method:"post",
url:"http://localhost:8080/axiosServlet",
data:"username=zhangsan"
}).then(function (resp){
alert(resp.data)
})
</script>
</body>
</html>
发送get请求时,把需要传的参数直接加在url地址后面就行了,多个参数之间用 & 连接。
发送post请求时,需要把传的参数写在data:后面。
然后then中的resp.data 就是我们获取的响应数据。
axios还有一种简洁点的写法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="../js/axios-0.18.0.js"></script>
<script>
//get
axios.get("http://localhost:8080/axiosServlet?username=zhangsan").then(function (resp){alert(resp.data)})
//post
axios.post("http://localhost:8080/axiosServlet","username=zhangsan").then(function (resp){alert(resp.data)})
</script>
</body>
</html>
这样写也是可以的,看个人喜好哪种了。