JavaScript Ajax 的前世今生

[TomIsion]

JavaScript 异步的前世今生

目录

1. HTTP 基础知识
2. Ajax
3. JSONP
4. CROS
5. Promise
6. 实现与优化

HTTP 基础知识

定义

超文本传输协议（英文：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议

URI

统一资源标识符（英文：Uniform Resource Identifier，缩写：URI），是我们经常提到的统一资源定位符的超集（英文：Uniform Resource Locator，缩写：URL）

URL 通常由这些内容组成：

协议://账号:密码@域名:端口/路径?查询#哈希

目前已经很少有将账号URL上面的情况了

HTTP Request / Response

同源策略

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制

如果协议，端口（如果指定了一个）和域名对于两个页面是相同的，则两个页面具有相同的源

Ajax

Ajax 即 Asynchronous JavaScript and XML ，翻译过来就是 异步的JavaScript与XML技术

其中 X 代表的是 XML 这种数据格式，是因为 Ajax 这项技术刚刚出现的时候，主流用于传递的数据格式是 XML，而今更加普遍的数据格式是 JSON，而 Ajax 的名称保留了下来

因而，Ajax 可以获取的数据类型不单单是 XML，可以获取所有类型的数据资源，同时支持 HTTP 协议之外的 FILE 和 FTP 协议

前端 Ajax 的实现主要是基于 XMLHttpRequest API

现代浏览器都提供了 XMLHttpRequest 类，通过实例化 XMLHttpRequest 对象，以及调用一些实例化方法，可以发送相关的异步请求

简单的 Ajax 请求栗子

下面是个简单的发送 Ajax 请求的栗子

// 创建 XHR 请求对象
var xhr = new XMLHttpRequest()

// 启动请求（注意，此时并不会真正发送请求，而是启动请求以备发送）
xhr.open('GET', 'https://api.github.com/events', true)

// 发送请求
xhr.send()

但是仅仅发送请求无法构成完整的前后端交流，XHR 对象提供了接口和状态以获取服务端的返回状态、返回信息

XHR 对象的 readyState 属性标识了 Ajax 请求的生命周期变化

值	状态	描述
0	UNSET	XHR对象已创建，但是还没有调用 .open()
1	OPENED	.open() 已被调用
2	HEADERS_RECEIVED	.send() 已被调用，同时已经可以获取到响应头的信息
3	LOADING	正在下载响应内容，responseText 属性中可以获取到部分数据
4	DONE	响应结束，异步的生命周期结束

XHR 对象的 status 属性标识了状态码

值	状态	描述
200	OK	请求成功
304	Not Modified	资源未修改，客户端仍然保留之前下载的副本
400	Bad Request	由于明显的客户端错误，服务器没有处理该请求
404	Not Found	请求失败，资源未在服务器上发现
405	Method Not Allowed	对应请求的资源不支持对应的请求方法
500	Internal Server Error	通用的错误消息，服务器遇到了未曾遇到的状况

XHR 对象提供了 .onreadystatechange() 接口以获取生命周期的状态变化，每次属性 readyState 的变化都会触发该接口的执行

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
      // 异步请求成功
      // 获取服务端返回的数据
      var data = xhr.responseText

      // 你就可以根据返回的数据来更新页面啦
    } else {
      // 异步请求失败
    }
  }
}

拓展知识

修改请求头、响应头

GET、POST 在 Ajax 上面的区别

转义

文件上传

首先，文件上传可以通过表单提交，就是在 form 表单中加上 <input type="file" /> 标签，这种上传方式和 JavaScript 的关系不是很大，这里不过多展开

借助 Ajax 也可以实现文件上传，配合 File API 可以实现图片的预览等等

监控请求过程

JSONP

CROS

Promise

Zepto.js 的相关实现

参考资料

• HTTP
• 同源策略