Ajax和Fetch基础

一、Ajax

1、Ajax 是什么

Ajax 是 Asynchronous JavaScript and XML（异步 JavaScript 和 XML）的简写

Ajax 中的异步：可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据
XML（可扩展标记语言）是前后端数据通信时传输数据的一种格式,XML 现在已经不怎么用了，现在比较常用的是 JSON
Ajax 其实就是浏览器与服务器之间的一种异步通信方式
使用 Ajax 可以在不重新加载整个页面的情况下，对页面的某部分进行更新

2、搭建 Ajax 开发环境

Ajax 需要服务器环境，非服务器环境下，很多浏览器无法正常使用 Ajax

Live Server
windows phpStudy
Mac MAMP

3、Ajax 的使用步骤

创建 xhr 对象
监听事件，处理响应
准备发送请求
发送请求

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

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

     const xhr = new XMLHttpRequest();
     xhr.onreadystatechange = () => {
       if (xhr.readyState !== 4) return;

       if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
         console.log(xhr.responseText);
         console.log(typeof xhr.responseText);
       }
     };
     xhr.open('GET', url, true);  
     xhr.send(null);

5、Get请求

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

const url = '[https://www.imooc.com/api/http/search/suggest?words=js&username=alex&age=18'](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.imooc.com%2Fapi%2Fhttp%2Fsearch%2Fsuggest%3Fwords%3Djs%26username%3Dalex%26age%3D18%27);

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

6、POST请求

携带数据:
- POST 请求主要通过请求体携带数据，同时也可以通过请求头携带
- 如果想发送数据，直接写在 send() 的参数位置，一般是字符串
- 不能直接传递对象，需要先将对象转换成字符串的形式
数据编码： xhr.send(username=${encodeURIComponent('张三')}&age=18);

7、 JSON 是什么

Ajax 发送和接收数据的一种格式

8、为什么需要 JSON

JSON 有 3 种形式，每种形式的写法都和 JS 中的数据类型很像，可以很轻松的和 JS 中的数据类型互相转换

9、JSON 的 3 种形式

简单值形式
- JSON 的简单值形式就对应着 JS 中的基础数据类型：数字、字符串、布尔值、null
- 注意事项
  ① JSON 中没有 undefined 值
  ② JSON 中的字符串必须使用双引号
  ③ JSON 中是不能注释的
对象形式
- JSON 的对象形式就对应着 JS 中的对象
- 注意事项
  ① JSON 中对象的属性名必须用双引号，属性值如果是字符串也必须用双引号
  ② JSON 中只要涉及到字符串，就必须使用双引号
  ③ 不支持 undefined
数组形式
- JSON 的数组形式就对应着 JS 中的数组： [1, "hi", null]
- 注意事项
  ① 数组中的字符串必须用双引号
  ② JSON 中只要涉及到字符串，就必须使用双引号
  ③ 不支持 undefined

10、JSON 的常用方法

JSON.parse(): 可以将 JSON 格式的字符串解析成 JS 中的对应值，一定要是合法的 JSON 字符串，否则会报错
JSON.stringify()：可以将 JS 的基本数据类型、对象或者数组转换成 JSON 格式的字符串

11、使用 JSON.parse() 和 JSON.stringify() 封装 localStorage

const storage = window.localStorage;

// 设置
const set = (key, value) => {
  // {
  //   username: 'alex'
  // }
  storage.setItem(key, JSON.stringify(value));
};

// 获取
const get = key => {
  // 'alex'
  // {
  //   "username": "alex"
  // }
  return JSON.parse(storage.getItem(key));
};

// 删除
const remove = key => {
  storage.removeItem(key);
};

// 清空
const clear = () => {
  storage.clear();
};

export { set, get, remove, clear };

12、跨域是什么

向一个域发送请求，如果要请求的域和当前域是不同域，就叫跨域
不同域之间的请求，就是跨域请求

13、什么是不同域，什么是同域

协议、域名、端口号，任何一个不一样，就是不同域
与路径无关，路径一不一样无所谓

14、跨域请求为什么会被阻止

阻止跨域请求，其实是浏览器本身的一种安全策略--同源策略
其他客户端或者服务器都不存在跨域被阻止的问题

15、跨域解决方案

CORS 跨域资源共享
JSONP

优先使用 CORS 跨域资源共享，如果浏览器不支持 CORS 的话，再使用 JSONP

16、JSONP 的原理

script 标签跨域不会被浏览器阻止
JSONP 主要就是利用 script 标签，加载跨域文件

17、使用 JSONP 实现跨域

服务器端准备好 JSONP 接口

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

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

18、XHR 的属性

responseType 和 response 属性：文本形式的响应内容 IE6~9 不支持，IE10 开始支持

 const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
 const xhr = new XMLHttpRequest();
 xhr.onreadystatechange = () => {
   if (xhr.readyState != 4) return;
   if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
     // 文本形式的响应内容
     // responseText 只能在没有设置 responseType 或者 responseType = '' 或 'text' 的时候才能使用
     // console.log('responseText:', xhr.responseText);
     // 可以用来替代 responseText
     console.log('response:', xhr.response);
     // console.log(JSON.parse(xhr.responseText));
   }
 };
 xhr.open('GET', url, true);
 // xhr.responseType = '';
 // xhr.responseType = 'text';
 xhr.responseType = 'json';
 xhr.send(null);

timeout 属性：设置请求的超时时间（单位 ms） IE6~7 不支持，IE8 开始支持

 const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
 const xhr = new XMLHttpRequest();
 xhr.onreadystatechange = () => {
   if (xhr.readyState != 4) return;
   if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
     console.log(xhr.response);
   }
 };
 xhr.open('GET', url, true);
 xhr.timeout = 10000;
xhr.send(null);

withCredentials 属性：指定使用 Ajax 发送请求时是否携带 Cookie IE6~9 不支持，IE10 开始支持

// 使用 Ajax 发送请求，默认情况下，同域时，会携带 Cookie；跨域时，不会 xhr.withCredentials = true;
// 最终能否成功跨域携带 Cookie，还要看服务器同不同意
   const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
   // const url = './index.html';
   const xhr = new XMLHttpRequest();
   xhr.onreadystatechange = () => {
     if (xhr.readyState != 4) return;

     if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
       console.log(xhr.response);
     }
   };
   xhr.open('GET', url, true);
   xhr.withCredentials = true;
   xhr.send(null);

19、XHR 的方法

abort()终止当前请求, 一般配合 abort 事件一起使用

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState != 4) return;
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
  console.log(xhr.response);
}
};
xhr.open('GET', url, true);
xhr.send(null);
xhr.abort();

setRequestHeader()setRequestHeader

// xhr.setRequestHeader(头部字段的名称, 头部字段的值);
const url = 'https://www.imooc.com/api/http/json/search/suggest?words=js';
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState != 4) return;
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
  console.log(xhr.response);
}
};
xhr.open('POST', url, true);
// 请求头中的 Content-Type 字段用来告诉服务器，浏览器发送的数据是什么格式的
// xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.setRequestHeader('Content-Type', 'application/json');
// xhr.send(null);
// xhr.send('username=alex&age=18');
xhr.send(
JSON.stringify({
  username: 'alex'
})
);

20、XHR 的事件

load事件：响应数据可用时触发，　 IE6~8 不支持 load 事件

const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
  const xhr = new XMLHttpRequest();

  xhr.onload = () => {
  if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
   console.log(xhr.response);
   }
  };
  // xhr.addEventListener(
  //   'load',
  //   () => {
  //     if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
  //       console.log(xhr.response);
  //     }
  //   },
  //   false
  // );

  // xhr.open('GET', url, true);

  // xhr.send(null);

error事件：请求发生错误时触发、 IE10 开始支持

  const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
   const url = 'https://www.iimooc.com/api/http/search/suggest?words=js';
   const xhr = new XMLHttpRequest();

  xhr.addEventListener(
    'load',
   () => {
     if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
        console.log(xhr.response);
  }
   },
  false
  );
  // xhr.addEventListener(
  //   'error',
  //   () => {
  //     console.log('error');
  //   },
  //   false
  // );
   xhr.open('GET', url, true);
   xhr.send(null);

abort 事件：调用 abort() 终止请求时触发， IE10 开始支持

 const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
  const xhr = new XMLHttpRequest();
  xhr.addEventListener(
    'load',
   () => {
      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
        console.log(xhr.response);
      }
    },
   false
   );
  // xhr.addEventListener(
  //   'abort',
  //   () => {
  //     console.log('abort');
  //   },
  //   false
  // );
   xhr.open('GET', url, true);
  xhr.send(null);
   xhr.abort();

timeout 事件：请求超时后触发

 const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
  const xhr = new XMLHttpRequest();
  xhr.addEventListener(
    'load',
    () => {
      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
        console.log(xhr.response);
      }
    },
    false
  );
  xhr.addEventListener(
    'timeout',
    () => {
      console.log('timeout');
    },
    false
  );
  xhr.open('GET', url, true);
  xhr.timeout = 10;
  xhr.send(null);

21、axios

axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中,第三方 Ajax 库

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 205,033评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,725评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,473评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,846评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,848评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,691评论 1赞 282
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,053评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,700评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 42,856评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,676评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,787评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,430评论 4赞 321
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,034评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,990评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,218评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,174评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,526评论 2赞 343