HTTP 和 Ajax初始前后端通信前后端通信是什么前端和后端数据交互的过程浏览器和服务器之间的数据交互的过程后

初始前后端通信

前后端通信是什么
- 前端和后端数据交互的过程
- 浏览器和服务器之间的数据交互的过程
后端向前端发送数据
- 访问页面
前端向后端发送数据
- 用户注册

前后端通信的过程与概念解释

前后端通信的国策会给你
- 前后端的通信是在‘请求’，‘响应’中完成的
概念解释
- 前端：浏览器端
- 客户端：只要能和服务器通信的就叫客户端
- 后端：服务器端

前后端的通信方式

使用浏览器访问页面
- 在浏览器地址栏中输入网址，按下回车
HTML标签
- 浏览器在解析HTML标签的时候，遇到一些特殊的标签，会再次向服务器发送请求
- link、img、script、iframe
- 还有一些标签，浏览器解析的时候，不会向服务器发送请求，但是用户就可以使用他们向服务器发送请求
- Ajax和fetch
- HyperText Transfer Protocol
- 超文本传输协议
- 超文本：原先一个个单一的文本，通过超链接将其连接起来，由原先的单一的文本变成了可无心啊延伸，扩展的超文本，立体文本
- HTML,JS,CSS,图片,字体,音频,视频等等文件、都是在通过HTTP(超文本传输协议)在服务器和浏览器之间传输
- 每一次前后端通信，前端需要主动向后端发送请求，后端接受到前端的请求后，可以给出响应
- HTTP 是一个请求，响应协议
HTTP请求响应的过程

HTTP报文

HTTP 报文是什么
- 浏览器向服务器发送请求时，请求本身就是信息，叫请求报文
- 服务器向浏览器发送响应时传输的信息，叫响应报文
- HTTP报文的格式
- 请求头：起始行+首部
- get请求，没有请求体，数据通过请求头携带
- post请求，有请求体，数据通过请求头携带
- 响应头：起始行+首部

HTTP方法

常用的HTTP方法
- 浏览器发送请求时采用的方法，和响应无关
- GET、POST、PUT、DELETE
- 用来定义对于资源采取什么样的操作，有各自的语义
HTTP方法的语义
- GET获取数据、获取资源（文件）
- POST创建数据、注册
- PUT更新数据、修改个人信息，修改密码
- DELETE删除数据、删除一条评论
- 这些方法虽然有各自语义，但是并不是强制性的
RESTful接口设计、
- 一种接口设计风格，充分利用HTTP方法的语义
- 通过用户ID获取个人信息，使用GET方法
- 注册新用户，使用POST方法
- 修改一个用户,使用POST方法
- 删除一个用户,使用POST方法

GET和POST方法的对比

语义
- GET 获取数据
- POST 创建数据
发送数据
- GET通过地址在请求头中携带数据
- 能携带的数据量和地址的长度有关系，一般最多就几k
- POST既可以通过地址在请求头中携带数据，也可以通过请求体携带数据
- 能携带的数据量理论上是无限的
- 携带少量数据，可以使用GET请求，大量的数据可以使用POST请求
缓存
- GET可以被缓存，POST不会被缓存
安全性
- GET和POST都不安全
- 发送密码或其他敏感信息时不要使用GET，主要是避免直接被他人窥屏或通过历史记录找到你的密码

HTTP状态码

HTTP状态是什么
- 定义服务器对请求的处理结果，是服务器返回的
HTTP状态码的语义
- 100-199消息：代表请求已被接受，需要继续处理
- 200-299成功
- 300-399重定向
- 301 Moved Permanently
- 302 Move Temporarily
- 303 Not Modified
- 400-499请求错误
- 404Not Found
- 500-599服务器错误
- 500 Internal Server Error

初始Cookie

Cookie是什么
- Cookie全称 HTTP COokie,简称Cookie
- 是浏览器存储数据的一种方式
- 因为存储在用户本地，而不是存储在服务器上，是本地存储、
- 一般会自动随着浏览器每次请求发送到服务器端
Cookie有什么用
- 利用Cookie跟踪统计用户访问该网站的习惯，比如什么时间访问，访问了哪些页面，在每个网页的停留时间等
在浏览器中操作Cookie
- 不要在Cookie中保存密码等敏感信息

Cookie的基本用法

写入Cookie
- document.cookie = "username=zs";
- 不能一起设置，只能一个一个设置
读取 Cookie
- console.log(document.cookie);
读取的是一个由名值对构成的字符串，每个名值对之间由';'（一个分号和一个空格）隔开

Cookie的属性

Cookie的名称（name）和值（value）
- 最终要的两个属性，创建Cookie时必须填写，其他属性可以使用默认值
- Cookie的名称或值如果包含非英文字母，则写入时需要写入encodeURLComponent()编码，读取时使用decodeURLComponent()解码
- 一般名称使用英文字母，不要用中文，值可以用中文，但是要编码
失效（到期）时间
- 对于失效的Cooki，会被浏览器清除
- 如果没有设置失效（到期）时间，这样的Cookie，称为会话Cookie
- 它存在内存当中，党徽还结束，也就是浏览器关闭是，Cookie消失
- 想长时间存在，设置Expires或Max-Age
- Expires 值为Date类型
- document.cookie = `username=zxc;expires=${new Date(2023 - 3 - 21)}`;
- Max - Age 值为数组，表示当前时间+多少秒后过期，单位是秒
- 如果max-age的值是0或负数，则Cookie会被删除
- document.cookie = "username=zxasdc;max-age=5";
Domain 域
- Domain 限定了访问Cookie的范围
- 使用JS只能读写当前域和父域的Cookie，无法读写其他域的Cookie
Path路径
- Path限定了访问Cookie的范围，（同一个域名下）
- 使用JS只能读写当前路径和上级路径的Cookie，无法读写下级路径的Cookie
- 当name，domain，Path这3个属性都相同的时候，才是同一个Cookie
HttpOnly
- 设置了HttpOnly属性的Cookie不能通过js去访问
Secure安全标志
- Secure限定了只能在使用https而不是http的情况下才可以发送给服务端-
Domain,path.Secure都要满足条件，还不能过期的Cookie才能随着请求发送到服务器端

Cookie的封装

// 写入Cookie
let set = (name, value, { maxAge, domain, path, secure } = {}) => {
  let cookieText = `${encodeURIComponent(name)}=${decodeURIComponent(value)}`;
  if (typeof maxAge === "number") {
    cookieText += `;max-age=${maxAge}`;
  }
  if (domain) {
    cookieText += `;domain=${domain}`;
  }
  if (path) {
    cookieText += `;path=${path}`;
  }
  if (secure) {
    cookieText += `;secure`;
  }
  document.cookie = cookieText;
};
// 通过name获取Cookie的值
let get = (name) => {
  name = encodeURIComponent(name);
  let cookies = document.cookie.split(";");
  for (let item of cookies) {
    let [cookieName, cookieValue] = item.split("=");
    if (cookieName === name) {
      return decodeURIComponent(cookieValue);
    }
  }
  return;
};

//   根据name,domain和path删除Cookie
let remove = (name, { domain, path } = {}) => {
  set(name, "", { domain, path, maxAge: -1 });
};
export { set, get, remove };

复制代码

Cookie的注意事项

前后端都可以创建Cookie
Cookie有数量限制
- 每个域名下的Cookie数量有限
- 当超过单个域名限制之后，在设置Cookie,浏览器就会清除一起拿设置的Cookie
Cookie有大小限制
- 每个Cookie的存储容量很小，最多只有4KB左右

初始localStorage

loaclStroage是什么
- localStorage 也是一种浏览器存储数据的方式（本地存储），他只是存储子啊本地，不会发送到服务器端
- 单个域名下的localStorage总大小有限制
在浏览器中操作localStorage
localStorage的基本用法
- setIte，m 设置
  - localStorage.setItem("username", "zxc");
- getItem，获取，获取不存在的值返回null
  - console.log(localStorage.getItem("username"));
- removeItem，删除，删除不存在的可以，不报错
  - console.log(localStorage.removeItem("username"));
- clear()，清除全部
  - localStorage.clear();

使用localStorage实现自动填充

   <form id="login" action="https://www.baidu.com/" method="post">
      <input type="text" name="username" />
      <input type="password" name="password" />
      <input type="submit" id="btn" value="登录" />
    </form>
复制代码

let login = document.querySelector("#login");
      let btn = document.getElementById("btn");

      let username = localStorage.getItem("username");
      if (username) {
        login.username.value = username;
      }
      login.addEventListener("click", (e) => {
        //   阻止默认事件
        e.preventDefault();
        localStorage.setItem("username", login.username.value);
        // login.submit();
      });
复制代码

localStorage的注意事项

localStorage的存储期限
- localStorage 是持久化的本地存储，除非手动清除（比如通过js删除，或者清除浏览器缓存）否则数据是永远不会过期的
sessionStorage
- 当会话结束（比如关闭浏览器）的时候，sessionStorage中的数据会被清空
localStorage 键和值的类型
- localStorage存储的键和值只能是字符串类型
- 不是字符串，也会先转化为字符串再存进去
不同域名下能否公用localStorage
- 不同域名不能共用localStorage
localStorage 的兼容性
- IE7及以下版本不支持localStorage，IE8开始支持

初识Ajax

Ajax是什么
- Ajax是Asynchronous JavaScript and XML（异步 JavaScrip 和XML）的简写
- Ajax 中的异步：可以异步地想服务器发送请求，在等待响应的过程中，不会阻塞当前页面，浏览器可以做自己的事情，直到成功获取响应后，浏览器次啊开始处理响应数据
- XML （可扩展标记语言）是前后端数据通信时传输数据的一种格式
- XML 现在已经不怎么用了，现在比较常用的是JSON
- Ajax其实就是浏览器与服务器之间的一种异步通信方式
- 使用Ajax可以在不重新加载整个页面的情况下，对页面的某部分进行更新
- ①注册检测
- ②搜索提示
搭建Ajax开发环境
- Ajax需要服务器环境，非服务器环境下，很多浏览器无法正常使用Ajax
- live Server 插件

Ajax的基本用法

XMLHttResquest
- Ajax想要实现浏览器与服务器之间的异步通信，余姚依靠XMLhttpRequest,他是一个构造函数
- 不论是XMLHttpRequest，还是Ajax，都没有和具体的某种数据格式绑定
Ajax的使用步骤
- 创建xhr对象
  - let xhr = new XMLHttpRequest();
- 监听事件，处理响应
  - 当获取到响应后，会触发xhr对象的readystatechange事件，可以在该事件中对相应进行处理
```
if (xhr.readyState !== 4) return;

//   HTTP CODE状态码
//   获取到响应后，响应的内容会自动填充xhr对象的属性
//   xhr.status:HTTP 状态码 200 404
//   xhr.statusText:HTTP 状态说明 OK Not Found
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
 //   console.log("正常使用响应数据");
 //   响应数据放到xhr.responseText
 console.log(xhr.responseText);
} else {
 //   console.log("错误处理");
}
};```

复制代码
```
- 准备发送请求
  - xhr.open("HTTP方法 GET,POST,PUT,DELETE", "地址", true);
  - 调用open并不会真正发送请求，而只是做好发送请求前的准备工作
- 发送请求
  - 调用send()正式发送请求
  - send()的参数是通过请求体携带数据
  - xhr.send(null);
- readystatechange事件也可以配合addEventListener使用，不过要注意，IE6-8不支持addEventListener
- 为了兼容性，readystatechange中不使用this,而直接使用xhr
- 由于兼容性的原因，最好放在open之前
- readystatechange事件监听readyState这个状态的变化
他的值从0-4，一共5个状态
- 0:未初始化，尚未调用open()
- 1:启动。已经调用open()，但尚未调用send()
- 2:发送。已经调用send()，但尚未接收到响应
- 3.接收。已经接收到部分响应数据
- 4.完成。已经接收到全部响应数据，而且已经可以在浏览器中使用了

使用Ajax完成前后端通信通信

使用Ajax完成前后端通信

      let url = "https://www.imooc.com/api/http/search/suggest?words=js";
      let xhr = new XMLHttpRequest();
      xhr.onreadystatechange = () => {
        if (xhr.readyState !== 4) return;

        if ((xhr.status >= 200 && xhr.status < 300) || xhr === 304) {
          console.log(xhr.responseText);
          console.log(typeof xhr.responseText);
        }
      };
      xhr.open("GET", url, true);
      xhr.send();
复制代码

GET请求

携带数据
- GET请求不能通过请求体携带数据，但可以通过请求头携带

数据编码

如果携带的数据是非英文字母的话，比如说汉字，就需要编码只收在发送给后端，不然会早成乱码问题
可以使用encideURLComponent()编码

let url = `https://www.imooc.com/api/http/search/suggest?name=${encodeURIComponent(
    "前端"
  )}}`;
  let xhr = new XMLHttpRequest();
  xhr.onreadystatechange = () => {
    if (xhr.readyState !== 4) return;
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
      console.log(xhr.statusText);
    }
  };

  xhr.open("GET", url);
  xhr.send(null);
  //   不会报错，并不会发送数据
  //   xhr.send("username");
复制代码

POST请求

携带数据
- POST请求主要通过请求体携带数据，同时也可以通过请求头携带

let url = "https://www.imooc.com/api/http/search/suggest?words=js";

      let xhr = new XMLHttpRequest();
      xhr.onreadystatechange = () => {
        if (xhr.readyState !== 4) return;
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
          console.log(xhr.responseText);
        }
      };
      xhr.open("POST", url, true);
复制代码

如果想发送数据，直接写在send()的参数位置，一般是字符串
xhr.send("username");
不能直接传递对象，需要先将对象转换成字符穿的形式
xhr.send("username");
数据编码
- xhr.send(`username=${encodeURIComponent("张三")}`);

初始JSON

JSON是什么
- Ajax发送和接收数据的一种格式
- JSON全称是JavaScrip Object Notation
为什么需要JSON
- JSON有3钟格式，每种形式的写法都和JS中的数据类型很像，可以很轻松的和JS中的数据类型互相转换

JSON的3种形式

简单之形式
- JSON的简单值形式就对应着JS中的基本数据类型
- 数字，字符串，布尔值，null
- 注意事项
  - ①JSON职工没有undefined值
  - ②JSON中的字符串必须使用双引号
  - ③JSON中是不能注释的
对象形式
- JSON的对象形式就对应着JS中的对象
- 注意事项JSON中的属性名必须用双引号，属性值如果是字符串也不行用双引号
- JSON中只要涉及到字符串，就必须使用双引号
数组形式
- JSON的数组形式就对应着JS职工的数组

JSON的常用方法

JSON.parse()
- JSON.parse()可以将JSON格式的字符串解析成JS中的对应值
- 一定是合法的JSON字符串，否则会报错
JSON.stringify()
- JSON.stringify()可以将JS的基本数据类型，对象或数组转换成JSON格式的字符串
使用JSON.parse()和JSON.stringify()封装localStorage

//   设置
let set = (key, value) => {
  localStorage.setItem(key, JSON.stringify(value));
};

//   获取
let get = (key) => {
  return JSON.parse(localStorage.getItem(key));
};
//   删除
let remove = (key) => {
  localStorage.removeItem(key);
};
//   清空
let clear = () => {
  localStorage.clear();
};

export { set, get, remove, clear };

初始跨域

跨域是什么
- 同域，不是跨域
- 不同于，跨域，会被浏览器阻止
- 像一个域发送请求，如果请求的域和当前域是不同域，就叫跨域不同域之间的请求，就是跨域请求
什么是不同域，什么是同域
- http (协议) ://www.imooc.com (域名) :443 (端口号) /course/list (路径)
- 协议，域名，端口号，任何一个不一样，就是不同域
- 与路径无关,路径一不一样无所谓
跨域请求为什么被阻止
- 阻止跨域请求，其实是浏览器本身的一种安全策略--同源策略
- 其他客户端或者服务器都不存在跨域被阻止的问题
跨域解决方案
- ①CORS跨域资源共享
- ②JSONP script
有限使用CORS跨域资源共享，如果浏览器不支持CORS的话，在使用JSONP

CORS跨域资源共享

CORS是什么
- Access-Control-Allow-Origin:*
- 表明允许所有的域名来跨域请求他，*是通配符，没有任何限制
- 只允许指定域名的跨域请求
- Access-Control-Allow:http://127.0.0.1:5500
使用CORS跨域的过程
- ①浏览器发送跨域请求
- ②后端在响应头中添加Access-Control-Allow头信息
- ③浏览器接受到响应
- ④如果是同域下的请求，浏览器不会额外做什么，这次前后端通信就圆满完成了
- ⑤如果是跨域请求，浏览器会从响应头中查找是否允许跨域
- ⑥如果润鑫跨域，通信圆满完成
- ⑦如果没找到或不包含想要跨域的域名，就丢弃响应结果
CORS的兼容性
- IE10及以撒花姑娘版本的浏览器可以正常使用CORS

JSONP

JSONP的原理
- script标签跨域不会被阻止
- JSONP主要就是利用script标签，加载跨域文件
使用JSONP实现跨域
- 服务器端春被好JSONP接口

      let script = document.createElement("script");
      script.src =
        "https://www.imooc.com/api/http/jsonp?callback=handleResponse";
      document.body.appendChild(script);

      // 声明函数
      let handleResponse = (data) => {
        console.log(data);
      };