ajax

AJAX: Async JS And XML 异步的js和数据模型 XML 标记型语言 json

原生ajax请求：

请求步骤：

1. 创建XHR对象
2. open()
3. send()
4. readyState == 4

获取请求结果：

1. 在第四步中监听readyState结果为4时
2. 即请求完成
3. 结果在xhr.responseText字段中

npm: node package manager node 包管理器 服务器在国外，访问比较慢

cnpm / pnpm 是国内主要的两个镜像网站 服务器在国内，访问较快

cnpm 淘宝镜像

安装：npm instal安装：l cnpm -g --registry=https://registry.npm.taobao.org

yarn 国内的一个高效率包管理工具，自成系统，不是镜像

安装：npm add yarn -g

axios在前端和后端的用法

一个 express/vue 脚手架项目分前端和后端两部分

首先使用包管理器下载安装 axios 模块

cnpm i axios

第一部分：

后端 nodejs 服务器部分，给项目提供一个本地服务器环境，作用类似于 live server

包含：/bin, /routes, app.js

后端 nodejs 语法使用 commonjs 语法标准 模块化使用 require()

导入 axios：var axios = require("axios");

第二部分：

前端 js 部分，也是项目的主要展示内容

包含：/piblic, /views

前端使用的语法标准是 ES6 模块化使用 import

导入 axios：import axios from "axios";

使用 axios 发起 ajax 请求

1. get 请求

   axios.get(url路径?参数).then(res=>{})
   axios.get("https://autumnfish.cn/search?keywords=海阔天空").then((res) => {
       console.log(res.data);
   });
   
   axios.get(url路径, {params:{参数}}).then(res=>{})
   axios
       .get("https://autumnfish.cn/search", {
           params: { keywords: "海阔天空" },
       })
       .then((res) => {
           console.log(res.data);
       });
   

2. post请求

   axios.post(url路径, {参数}).then(res=>{})
   axios
       .post("https://autumnfish.cn/search", { keywords: "海阔天空" })
       .then((res) => {
           console.log(res.data);
       });