Ajax

# 概述

它是一种 Web 数据交互方式。
使用 Ajax 技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

# 基础用法

Ajax 要在服务器上运行
异步的 javascript 和 xml (数据传输格式)
【注】ajax 是前后端数据交互的搬运工，都可以异步执行。
ajax 只能下载同源的数据，跨源的数据是禁止下载。
跨源的方式： 1、修改 ajax 同源协议 (不建议) 2、委托 php 文件进行跨源 3、JSONP

JSONP 跨域的使用流程：

• 1、先去声明一个函数，这个函数有一个形参，这个形参会拿到我们想要下载的数据，使用这个参数做后续数据的处理
• 2、在需要下载数据的时候，动态创建 script 标签，将标签 src 属性设置成，下载数据的链接
• 3、当 script 插入到页面上的时候，就会调用已经封装好的函数，将我们需要的数据传过来。

# try_catch 和 try_throw_catch 方法

/* try{
    尝试执行的代码
}catch(error){
    error 错误对象，try括号中代码执行的异常信息;
    补救代码;
}
执行过程：
    1、先去执行try中的代码
    2、如果try中的代码执行正常，catch中的代码就不执行了
    3、如果try中的代码执行异常，直接执行catch中的代码进行补救
【注】更多的用在代码调试和后期维护。

try_throw_catch
throw 手动抛出异常
格式：
try{
    尝试执行的代码
    throw new Error("异常信息文本")
}catch(error){
    error 错误对象，try括号中代码执行的异常信息;
    补救代码;
} */

var num = 10;
try {
  alert("异常信息之前");
  //  throw new Error("这是演习，不要紧张");
  alert("异常信息之后");
  alert(3);
  if (num != 5) {
    throw new Error("num的值不是5");
  }
} catch (error) {
  alert("补救代码，Error:" + error);
}
// 之前 之后 3 补救代码，Error:Error: num的值不是5

# 案例：下载数据

var oBtn = document.getElementById("btn1");
oBtn.onclick = function () {
  // XMLHttpRequest  IE8以下不兼容
  // IE8以下声明ajax的方法是:ActiveXObject("Microsoft.XMLHTTP");

  //1、创建ajax对象
  var xhr = null;
  try {
    xhr = new XMLHttpRequest();
  } catch (error) {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }

  //2、调用open
  /*   第一个参数： 请求方式  get post
       第二个参数：url
       第三个参数： 是否异步  true 异步 false同步 */
  xhr.open("get", "1.txt", true);

  //3、调用send
  xhr.send(); //相当于Form的submit

  //4、等待数据响应
  /*readystatechange 事件类型
      xhr.readyState  发生变化的时候调用
      0(初始化)  调用open方法之前
      1(载入)  调用你send方法之后，发送请求
      2(载入完成)  send方法完成，已经接受到所有的响应内容
      3(解析)  正在解析下载到的数据
      4(完成)  解析完成 */

  // ajax 状态码 ajax.status
  // 200:交易成功
  // 404:没有发现文件，查询或URL
  // 400:错误请求,如语法错误

  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      //判断本次下载的状态码都是多少
      if (xhr.status == 200) {
        // 如需获得来自服务器的响应
        // 请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
        // responseText	获得字符串形式的响应数据。
        // responseXML	获得 XML 形式的响应数据。
        alert(xhr.responseText);
      } else {
        alert("Error:" + xhr.status);
      }
    }
  };
};

# ajax 的 get 和 post 请求的区别

# get

//2、调用open
xhr.open("get", "1.get.php?username=yyy&age=19&password=123abc", true);

//3、调用send
xhr.send();

# post

//2、调用open
xhr.open("post", "1.post.php", true);

//必须在send方法之前，去设置请求的格式
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");

/* post提交的数据，需要通过send方法进行提交
  ?name1=value&name2=value2  search
  name1=value&name2=value2   querystring */

//3、调用send
xhr.send("username=yyy&age=19&password=123abc");

# axios 的 Ajax 请求

# get 请求

传参可以直接写到？部分，也可直接写在对象的第二个参数对象内，但需要写在对象内的 params 属性下

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>;
axios
  .get("http://localhost:3008/posts", { params: { id: 1 } })
  // 成功
  .then((res) => {
    // res.data 才是真正的数据
    console.log(res.data);
  })
  // 失败
  .catch((err) => {
    console.log(err);
  });

# post 请求

axios
  .post("http://localhost:3008/posts", {
    title: "vue源码解析",
    author: "cxh",
  })
  .then((res) => {
    console.log(res.data);
  })
  .catch((err) => {
    console.log(err);
  });

# axios 并发多个请求 axios.all

// 有两个请求，我们想要在两个请求全部结束之后再去执行其他操作
axios.get("http://localhost:3008/posts?id=1").then((res) => {
  console.log(res, "我是先发的请求");
});
axios.get("http://localhost:3008/posts?id=6").then((res) => {
  console.log(res, "我是后发的请求");
});
// 上边的没法分先后

// 需要将多个请求添加到数组中，然后使用axios.all 并发
axios
  .all([
    axios.get("http://localhost:3008/posts?id=1"),
    axios.get("http://localhost:3008/posts?id=6"),
  ])
  .then((res) => {
    // 这个res是两个请求返回的结果组成的数组
    console.log(res[0].data[0]);
    console.log(res[1].data[0]);
  });

# 提取公共的 axios 配置

// 配置 axios 的默认值
axios.defaults.baseURL = "http://localhost:3008";

axios.get("/posts?id=1").then((res) => {
  console.log(res.data);
});

# axios 拦截器

// 添加请求拦截器
axios.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    // axios 请求的配置,可以根据配置去对应的修改一些配置然后将新修改之后的配置 return
    console.log(config);
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);
axios.get("http://localhost:3008/posts?id=2").then((res) => {
  console.log(res.data);
});

// 响应拦截器
// 添加响应拦截器
axios.interceptors.response.use(
  function (response) {
    // 对响应数据做点什么
    // response 指的就是请求的结果(axios 封装之后结果)
    // return 一个新的数据就会修改请求的结果
    return response.data;
    // 这里也可以retrun"哈哈哈哈" return什么结果就是什么
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);
axios.get("http://localhost:3008/posts?id=2").then((res) => {
  console.log(res);
  //因为上边return的是response.data 所以这里不用谢data
});

# 原生 ajax 服务器 (json-server)

使用 json-server 模拟本地数据库

• 安装 JSON 服务器

npm install -g json-server

• 创建 data.json 包含一些数据的文件

{
  "posts": [
    {
      "id": 1,
      "title": "ajax 基础教程",
      "author": "cxh"
    },
    {
      "id": 2,
      "title": "vue 基础教程",
      "author": "cxh"
    },
    {
      "id": 3,
      "title": "react 基础教程",
      "author": "cxh"
    }
  ]
}

• 启动 JSON 服务器 (在上边创建的文件所在的文件夹中打开 git bash here)

json-server --watch data.json -p 3008(端口号)

# JSON

json 数据传输格式 (字符串的一种格式)
JSON 也是一个对象

# JSON 方法

# JSON.stringify()

数据结构 (数组，对象) => json 格式字符串

var arr = [100, true, "hello"];
var str = JSON.stringify(arr);
alert(arr); //100,true,hello
alert(str); //'[100,true,"hello"]'

var obj = {
  username: "钢铁侠",
  age: 18,
  sex: "男",
};
var str = JSON.stringify(obj);
alert(obj); //[object Object]
alert(str); //'{"username":"钢铁侠","age":18,"sex":"男"}'

# JSON.parse()

json 格式字符串 => 数据结构

var str = '[100,true,"hello"]';
var arr = JSON.parse(str);
alert(arr[1]); //true

var str = '{"username":"钢铁侠","age":18,"sex":"男"}';
var obj = JSON.parse(str);
// 通过 对象.属性 的方式输出
alert(obj.username); //钢铁侠

# 后台的两个方法

后台也有两个方法可以将 数据结构和字符串 相互转换

json_encode()  将数据结构转成字符串
json_decode()  将字符串转成对应的数据机构

# TCP 和 UDP 以及 IP

IP：网络层上的协议，可以定位到世界上的哪一台电脑发出的数据且知道数据要发到哪里去

TCP：面向链接协议。（快递，外卖）
传输数据：1、建立链接  三次握手 2、传输数据 3、断开链接  四次挥手
优点：1、安全 2、准确度非常高
缺点：1、传输效率低 2、耗资源

UDP：无连接协议（适用于对于及时性要求高，但是对于数据准确度要求不高）例如：视频聊天。
传输数据：直接传，根本不管是否收到数据。
缺点：1、不安全 2、准确度非常低 3、经常丢包
优点：1、及时性非常高 2、消耗资源少