黑马程序员学习笔记：AJAX快速入门

什么是Ajax？

• ajax = 异步的（JavaScript + XML）
• JavaScript是Web页面的一个脚本语言。而XML是可拓展标记语言，本质上是一种数据格式，可以存储复杂的数据结构。
• 作用：
  • 数据交换：服务器和web页面之间的数据请求交流
  • 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想，用户名是否可用的校验等等。
• 同步和异步
• 

怎么用Ajax？（Axios）

• axios对原生的Ajax进行封装，简化书写，快速开发。
• 官网：Axios官网与教程

步骤：

• 引入Axios的js文件（参考官网）

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

• 使用Axios发送请求，并获取响应结果

//GET→获取数据，Post→操作数据
axios({
  method: 'get',//method：请求方式，GET/POST
  url: 'http://your lujing',//URL：请求路径
}).then(function (result) => {//成功回调函数
    console.log(result.data); //这里实际换成你需要的操作
  }).catch((err) =>{//失败回调函数
  	alert(err); //这里实际换成你需要的操作
  });	

• 简化格式（更推荐）

  • 格式：axios.请求方式（url [,data[,config]]）
  • 实例：

  axios.get('http://your lujing').then(result)=> {//成功回调函数
  	console.log(result.data);
  }).catch((err)=>{//失败回调函数
  	console.log(err);
  });	
  

  axios.post('http://your lujing').then(result)=> {//成功回调函数
  	console.log(result.data);
  }).catch((err)=>{//失败回调函数
  	console.log(err);
  });	
  

  注释：VScode中你可以在（url）后面打上thec，会自动补全成功与失败回调函数。

  补充

  异步实例

  axios.get('http://your lujing').then(result)=> {//成功回调函数
  	console.log(result.data); //后输出这个
  })；
  console.log("====================================");//先输出这个
  })
  

上面的原因是，因为异步，后面输出的那个，去请求服务器去了。然后程序继续往下执行

异步改为同步

因为上面异步不方便维护，而且降低了代码的可读性，所以真实企业开发中，一般都会将异步改为同步。