Ajax（day28 保姆级攻略）

大家好，今天给大家分享一下我最近学习的一些有关JavaScript的知识。如果你觉得这些知识也很有用，那就请点个赞并收藏本文吧，让更多的朋友也能受益于这些知识。如果有任何错误，请告知我。谢谢大家的支持!

一、前后端交互

1. 前端：

• 发送请求（request，req）
• 接收响应（response，res）

2. 后端：

• 接收请求（request，req）
• 发送响应（response，res）

3. 交互：发送，接收

• 交互工具，载体
• 前端：ajax：XMLHttpRequest
• 后端：node.js中http和https模块

二、同步和异步

1. 同步：等，依次执行，不同时执行

• 除了异步都是同步

2. 异步：不等，同时执行

• 计时器
• 事件
• Promise

3. 程序，进程，线程（烧香）

• 程序：功能（烧一柱香）
• 进程：一个功能从开始执行到执行结束（烧一柱香耗费的时间）
• 线程：一个功能从开始执行到执行结束的过程中的每个分支（点两头，多线程）
  • 线程越多速度越快

4. javascript的执行机制

• 单线程异步的弱类型的脚本语言
• 事件循环机制（Event Loop）
  • 宏任务
    • 所有的同步都是宏任务
    • 除了同步
  • 微任务
  • 同级情况下宏任务执行完毕后才会执行微任务

1. 这JavaScript中同步就是：你不执行完上面的代码，那么下面的代码你就别执行；一步一步执行，这就是同步。
2. 异步就是可以一起执行的代码；

三、程序进程线程

1. 程序：功能
2. 进程：进程不是程序，是程序执行的过程
3. 线程：是程序执行过程中开启的每个分支

• • 多线程异步执行，可以提高程序的效率

四、Ajax的概念

1. ajax是前后端数据交互的重要手段
2. Ajax 全称为：“Asynchronous JavaScript and XML”（异步 JavaScript 和 XML），它并不是 JavaScript 的一种单一技术，而是利用了一系列交互式网页应用相关的技术所形成的结合体。使用Ajax，我们可以无刷新状态更新页面，并且实现异步提交，提升了用户体验。
3. Ajax 这个概念是由 JesseJamesGarrett 在 2005 年发明的。它本身不是单一技术，是一串技术的集合，主要有：

• • 异步JavaScript，通过用户或其他与浏览器相关事件捕获交互行为
  • XMLHttpRequest 对象，通过这个对象可以在不中断其它浏览器任务的情况下向服务器发送请求；
  • 服务器上的文件，以 XML、HTML 或 JSON 格式保存文本数据；
  • 其它 JavaScript，解释来自服务器的数据（比如 PHP 从 MySQL 获取的数据）并将其呈现到页面上。

1. 由于 Ajax 包含众多特性，优势与不足也非常明显。优势主要以下几点：

• • 不需要插件支持（一般浏览器且默认开启 JavaScript 即可）；
  • 用户体验极佳（不刷新页面即可获取可更新的数据）；
  • 提升 Web 程序的性能（在传递数据方面做到按需发送，不必整体提交）；
  • 减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）；

1. 而 Ajax 的不足由以下几点：

• • 不同版本的浏览器对 XMLHttpRequest 对象支持度不足(比如 IE5 之前)；
  • 前进、后退的功能被破坏（因为 Ajax 永远在当前页，不会记录前后页面）；
  • 搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容）；

1. Ajax：Asynchronous javascript and 服务端的数据（html，css，js，json，txt，xml，jpg，…）

• 异步的js和服务器数据：使用异步的js代码获取服务端的数据
• 是前后端的交互工具，载体，承载前端和后端的交互数据
• 不是一个技术，一组技术的集合
  • 异步的js：请求事件
  • 载体对象（xhr）：XMLHttpRequest
  • 服务端数据：html，css，js，json，txt，xml，jpg，…
  • 同步的js：数据的解析
• 特点：异步
  • 不中断浏览器其他任务的情况下，获取新数据（无刷新加载新数据）
  • 破坏了浏览器的前进后退功能（无法通过前进后退获取之前或之后的数据）
  • 破坏了搜索引擎优化（搜索引擎爬虫无法获取由js引起的数据变化）
  • 提升了用户体验（提升了页面的首屏加载速度）

五、Ajax的使用

Ajax的使用 - 打电话

1. 创建载体对象（电话）

• const xhr = new XMLHttpRequest()

2. 配置载体对象（拨号）

• xhr.open(“get”, url, true);

3. 发送（拨号）

• xhr.send(“”)

4. 监听状态（等待结果）

xhr.onreadystatechange = function(){
  console.log(xhr.readyState);
  console.log(xhr.status);
  console.log(xhr.responseText);
}

Ajax的使用

1. 创建xhr对象：

• • const xhr = new XMLHttpRequest( );

1. 设置请求参数

• • xhr.open('get', 'data/test.json', true);
• • • 参数1：请求方式：POST || GET
    • 参数2：要请求的url
    • 参数3：true异步，false同步

1. 观察状态（是否接通）

• • onreadystatechange：当xhr.readyState发生改变时触发
  • onload：当xhr.readyState为 4 时触发

1. 发送

• • xhr.send(null);

1. ajax使用get方式和post发送请求的主要区别：

• • open的第一个参数
  • 发送请求数据的位置
• • • get数据在url后拼接
    • post数据传给send方法
• • 发送数据的格式
• • • get数据默认格式为：**querystring**
    • post数据需要手动设置为：**application/x-www-form-urlencoded**
• • • • ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

xhr 状态码：xhr.readyState

状态码	含义
0	（未初始化）还没有调用send()方法
1	（载入）已调用send()方法，正在发送请求
2	（载入完成）send()方法执行完成，已经接收到全部响应内容
3	（交互）正在解析响应内容
4	（完成）响应内容解析完成，可以在客户端调用了

http 状态码：xhr.status

状态码	含义
1**	请求收到，继续处理
2**	操作成功收到，分析、接收
3**	完成此请求必须进一步处理
4**	请求包含一个错误语法或不能完成
5**	服务器执行一个完全有效请求失败

100——客户必须继续发出请求

101——客户要求服务器根据请求转换HTTP协议版本

200——交易成功

201——提示知道新文件的URL

202——接受和处理、但处理未完成

203——返回信息不确定或不完整

204——请求收到，但返回信息为空

205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件

206——服务器已经完成了部分用户的GET请求

300——请求的资源可在多处得到

301——删除请求数据

302——在其他地址发现了请求数据

303——建议客户访问其他URL或访问方式

304——客户端已经执行了GET，但文件未变化

305——请求的资源必须从服务器指定的地址得到

306——前一版本HTTP中使用的代码，现行版本中不再使用

307——申明请求的资源临时性删除

400——错误请求，如语法错误

401——请求授权失败

402——保留有效ChargeTo头响应

403——请求不允许

404——没有发现文件、查询或URl

405——用户在Request-Line字段定义的方法不允许

406——根据用户发送的Accept拖，请求资源不可访问

407——类似401，用户必须首先在代理服务器上得到授权

408——客户端没有在用户指定的饿时间内完成请求

409——对当前资源状态，请求不能完成

410——服务器上不再有此资源且无进一步的参考地址

411——服务器拒绝用户定义的Content-Length属性请求

412——一个或多个请求头字段在当前请求中错误

413——请求的资源大于服务器允许的大小

414——请求的资源URL长于服务器允许的长度

415——请求资源不支持请求项目格式

416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段

417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求

500——服务器产生内部错误

501——服务器不支持请求的函数

502——服务器暂时不可用，有时是为了防止发生系统过载

503——服务器过载或暂停维修

504——端口过载，服务器使用另一个端口或服务来响应用户，等待时间设定值较长

505——服务器不支持或拒绝支持请求头中指定的HTTP版本

六、发送数据的数据格式 - Content-Type

Content-Type（MediaType），即是Internet Media Type，互联网媒体类型，也叫做MIME类型。在互联网中有成百上千中不同的数据类型，HTTP在传输数据对象时会为他们打上称为MIME的数据格式标签，用于区分数据类型。最初MIME是用于电子邮件系统的，后来HTTP也采用了这一方案。

在HTTP协议消息头中，使用Content-Type来表示请求和响应中的媒体类型信息。它用来告诉服务端如何处理请求的数据，以及告诉客户端（一般是浏览器）如何解析响应的数据，比如显示图片，解析并展示html等等。

1. Content-Type的格式：

• • Content-Type: type/subtype;parameter
• • • type：主类型，任意的字符串，如text，如果是*号代表所有；
    • subtype：子类型，任意的字符串，如html，如果是*号代表所有，用“/”与主类型隔开；
    • parameter：可选参数，如charset，boundary等。
• • 例如：
• • • Content-Type: text/html;
    • Content-Type: application/json;charset:utf-8;

1. 常见的媒体格式类型如下：

• • text/html ： HTML格式
  • text/plain ：纯文本格式
  • image/gif ：gif图片格式
  • image/jpeg ：jpg图片格式
  • image/png：png图片格式
  • application/xml：XML数据格式
  • application/json：JSON数据格式
  • application/pdf：pdf格式
  • application/x-www-form-urlencoded ： 中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）
  • multipart/form-data：需要在表单中进行文件上传时，就需要使用该格式

七、将ajax的get和post封装成一个函数，通过参数，区分get或post

//get.js
function ajaxGet({ url, data = {}, success, error }) {
  // 解析请求时要携带的数据
  let str = "";
  for (let i in data) {
    str += `${i}=${data[i]}&`;
  }
  // 拼接到url
  url += "?" + str.slice(0, -1);
  // 开启ajax
  const xhr = new XMLHttpRequest();
  xhr.open("get", url);
  xhr.send();
  xhr.onload = function () {
    if (xhr.status === 200) {
      // 请求成功，执行成功功能
      success(xhr);
    } else {
      // 请求失败，执行失败功能
      error(xhr.status);
    }
  }
}

//post.js
function ajaxPost({ url, data = {}, success, error }) {
  let str = "";
  for (let i in data) {
    str += `${i}=${data[i]}&`;
  }
  const xhr = new XMLHttpRequest;
  xhr.open("post", url, true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send(str.slice(0, -1));
  xhr.onload = function () {
    if (xhr.status === 200) {
      success(xhr);
    } else {
      error(xhr.status);
    }
  }
}

//ajax.js

// ajax({
//   method: "get",
//   data: {},
//   url: "",
//   timeout: 100,
//   success(xhr){},
//   error(code){},
//   beforeSend(){},
//   async: true
// })


function ajax({ method = "get", data = {}, url, timeout = 10000, success, error, beforeSend, async = true }) {
  // 初始立即执行请求之前的功能
  beforeSend && beforeSend();
  // 解析数据
  // key=val&key=val
  let str = "";
  for (let i in data) {
    str += `${i}=${data[i]}&`;
  }
  str = str.slice(0, -1);
  // 判断是否是get请求，如果是，将数据拼接到url后
  if (method === "get") {
    url += "?" + str;
  }
  // 开启ajax
  const xhr = new XMLHttpRequest;
  xhr.open(method, url, async);
  xhr.timeout = timeout;
  if (method === "get") {
    xhr.send();
  } else {
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(str);
  }
  xhr.onload = function () {
    if (xhr.status === 200) {
      success(xhr);
    } else {
      error && error(xhr.status);
    }
  }
  xhr.ontimeout = function () {
    error && error("timeout");
  }
}

八、补充

1. POST和GET的区别

1. POST主要用来发送数据，GET主要用来获取数据；
2. POST发送数据的安全性较好，而GET较差；
3. POST发送数据不限制大小，而GET大小受限2~100k。
4. 在数据获取时用GET方式，在操作数据时应使用POST方式。

2. AJAX的兼容问题

1. 正常浏览器：new XMLHttpRequest();
2. IE5：new ActiveXObject("Microsoft.XMLHTTP");

3. 个别设备中ajaxGet请求的缓存问题

1. 某次请求走缓存的条件：get请求，重复地址

• • 后果：提升速度，无法实时获取服务器最新数据

1. 不想走缓存：可以通过在url后拼接时间戳的方式解决

• • url = url + "?" + str + "__t__=" + Date.now()

4. XMLHttprequest常见事件

1. readyStateChange事件：表示readyState属性的值发生改变。
2. load事件：表示服务器响应数据接收完毕。
3. abort事件：表示请求被中断。可通过xhr.abort()方法中断xhr请求。
4. timeout事件：表示服务器响应超时。可通过xhr.timeout属性设置超时时间，单位为毫秒。
5. error事件：表示请求出错。
6. progress 事件：上传文件时，不断返回上传的进度。