Ajax

****# 异步与同步

Tip:

  • 像正常的表单submit提交都是同步请求，若要发送异步请求则无序设置action提交路径，只要给普通按钮button绑定单击事件并设置异步Axios请求逻辑即可
  • 增删改一般POST，查询是GET
  • 异步请求往往传的是JSON数据，而这是不能被request.getParameta()所识别的，我们需要直接获取getReader()再readline()获取请求体的字符串内容再将JSON字符串转换成对象（使用readline()是因为浏览器发送请求的数据永远都会被压缩成一行）

概念
AJAX(Asynchronous JavaScript And XML):异步的JavaScript和XML

作用

1.与服务器进行数据交换:通过AJAX可以给服务器发送请求，并获取服务器响应的数据使用了AJAX和服务器进行通信，就可以使用HTML+AJAX来替换JSP页面了——>实现前后端分离

  1. 异步交互:可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如:搜索联想、用户名是否可用校验，等等...

官方文档
AJAX 简介 (w3school.com.cn)
事实上我们开发几乎不会使用原生的AJAX代码，因为较为繁琐，举个例子

  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();

快速入门

无非就是创建xhttp对象，使用open方法设置属性和访问路径，用send方法进行发送请求
通过Stage获取状态码信息...而且创建xhttp对象的方法根据浏览器环境版本的不同也会不一样总之并不间接...

Axios

一般来说我们都是使用封装好的Axios框架来完成Ajax异步请求

使用之前记得要在HTML文档先引入Axios.js文件，里边完成了对Ajax语法的封装，这是使用前提

基本使用

注意事项

资源路径必须完整，因为真正的前后端分离的项目都是分别部署到不同的服务器上的。

请求方式别名

为了方便起见,Axios 已经为所有支持的请求方法提供了别名。

小结

  1. Axios其实就分成两部分：发送请求和设置回调函数
  2. 通过js对象设置请求方式，请求资源路径和请求参数
  3. 通过.then()方法设置回调函数，响应收到之后就会自动执行，里边接收一个resp对象，它的data属性就是真正返回的结果
  4. 请求方式别名虽然更简洁，但阅读性没有js对象的写法阅读性好

注意事项

  • 发送请求的时候this可以直接指向当前的Vue对象
  • .then()设置回调函数的时候
    • 若使用传统写法那么this无法直接指向当前的Vue对象，需要在外部定义全局变量作为中间变量_this=this来达到作用域提升的效果
    • 若使用ES6最新标准的箭头函数，this可以直接指向当前的Vue对象。因为此时的this是根据上下文语义判断的
Interactive Graph
Table Of Contents
Ajax
Axios