原生ajax笔记

前言

记录原生ajax使用
尚硅谷 3小时Ajax入门到精通
踩坑 以及一些会忘的点

概述

XMLHttpRequest 对象的部分api

readyState:

值	状态	描述
0	UNSENT	代理被创建，但尚未调用 open() 方法。
1	OPENED	open() 方法已经被调用。
2	HEADERS_RECEIVED	send() 方法已经被调用，并且头部和状态已经可获得。
3	LOADING	下载中；responseText 属性已经包含部分数据。
4	DONE	下载操作已完成。

//创建
const xhr = new XMLHttpRequest();
	//初始化
     xhr.open("GET", "http://127.0.0.1:8000/server");
     //发送
     xhr.send();
     //
        xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
        //状态码
          if (xhr.status >= 200 && xhr.status < 300) {
          }
        }
      };
     

ie缓存

加参数: Date.now()

防抖

加变量isSending判断

axios、fetch

比较常用，不贴了

p14

自定义请求头需要在server端配置Access-Control-Allow-Headers
response.setHeader(“Access-Control-Allow-Headers”, “*”);

同时还会发送一个OPTIONS请求：
对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。

因此还需要OPTION请求的相关配置

p19-20

调abort可以取消请求

let xhr = new XMLHttpRequest();
xhr.abort()

但是延时请求的发送一定是在server端的send处调用setTimeout，延时相应。而非在前端处延时，这样abort函数的那块区域根本不会触发（除非你的手速能快过发送请求的6ms

p27-28

原生jsonp，利用script标签实现跨域

server端：
通过传递函数，在参数中提供数据

app.get("/server", (req, res) => {
  const data = {
    name: "sayoriqwq",
  };

  let json = JSON.stringify(data);
  res.end(`handle(${json})`);
});

前端：
声明刚才的函数

function handle(data) {
	对data进行处理
      }