AJAX和Axios异步框架

AJAX:Asynchronous JavaScript And XML 异步的JavaScript和XML

作用:1、与服务器进行数据交换,通过AJAX可以给服务器发送请求,并获取服务器响应数据。使用了AJAX和服务器进行通信,就可以使用ajax和html来代替jsp页面了。这样可以实现将前后端进行分离,因为jsp需要依赖浏览器才能运行,所以不能将前后端很好的分离。

2、异步交互:可以在不重新加载该页面的情况下,与服务器进行交换数据并更新部分网页的技术。就是实时部分更新。就比如在用百度搜索时,我们需要完要搜索的内容,还没点搜索或者回车时,网页会自动给出很多类似的搜索内容。

这是写AJAX请求的官网文档:AJAX 简介

你可以通过点下一节来了解写ajax的多个步骤。

编写步骤:1、编写AjaxServlet,并使用response输出字符串。

java 复制代码
@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、获取服务器响应数据

html 复制代码
<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文件导入!

html 复制代码
<!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还有一种简洁点的写法:

html 复制代码
<!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>

这样写也是可以的,看个人喜好哪种了。

相关推荐
牧羊狼的狼1 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手2 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲3 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell3 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮5 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel5 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip6 小时前
JavaScript事件流
前端·javascript
赵得C6 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
wow_DG6 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(一):响应式原理
前端·javascript·vue.js
weixin_456904276 小时前
UserManagement.vue和Profile.vue详细解释
前端·javascript·vue.js