前端工程化之模块化基础

简介

浏览器与服务器之间采用 HTTP 协议通信，用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出 HTTP 请求。

1999年，微软公司发布 IE 浏览器5.0版，第一次引入新功能：允许 JavaScript 脚本向服务器发起 HTTP 请求。这个功能当时并没有引起注意，直到2004年 Gmail 发布和2005年 Google Map 发布，才引起广泛重视。

2005年2月，Ajax (Asynchronous JavaScript and XML) 这个词第一次正式提出，指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。W3C 在2006年发布了它的国际标准。

XML 与 HTML 类似，都是一种基于标签的标记语言，不过 XML 没有预定义标签，一般用来存储数据。现在 XML 格式已经过时了，服务器返回的都是 JSON 格式的数据，AJAX 这个词的字面含义已经消失了，但它已成为 JavaScript 脚本发起 HTTP 通信的代名词，也就是说，只要用脚本发起通信，就可以叫做 AJAX 通信。

Ajax 的优点包括：

• 允许只更新一个 HTML 页面的部分 DOM，而无须重新加载整个页面
• 允许异步工作，这意味着当网页的一部分正试图重新加载时，您的代码可以继续运行（相比之下，同步会阻止代码继续运行，直到这部分的网页完成重新加载）。

存在的问题包括：

• 没有浏览历史(无法后退)
• 存在跨域问题(A网站向B网站发送内容)
• 对SEO优化不友好

通过交互式网站和现代 Web 标准，AJAX 正在逐渐被 JavaScript 框架中的函数和官方的 Fetch API 标准取代

Ajax 通过 xhr 对象实现，实现步骤为：

// 1. 创建 XMLHttpRequest 实例
const xhr = new XMLHttpRequest()
// 2. 发出 HTTP 请求
xhr.open('GET', 'http://127.0.0.1:3000/server?page=1')
xhr.send()
// 3. 接收服务器传回的数据
xhr.onreadystatechange = () => {// 4. 更新网页数据if(xhr.readyState === XMLHttpRequest.DONE || xhr.status===200) {document.getElementById('target').innerHTML = xhr.responseText}
} 
1
2
3
4
5
6
7
8

XHR

XHR (XMLHttpRequest) 是一种创建 Ajax 请求的 JavaScript API。实际上 XHR 可以用于获取任何类型的数据，而不仅仅是 XML。它甚至支持 HTTP 以外的协议（包括 file:// 和 FTP），尽管可能受到更多出于安全等原因的限制。

规范：xhr.spec.whatwg.org/

构造函数 XMLHttpRequest，可以使用 new 命令生成实例，没有任何参数。

const xhr = new XMLHttpRequest() 
1

Open & Send

生成实例后，就可以使用 open() 方法初始化一个请求

/**
 * method: 要使用的 HTTP 方法，比如 GET、POST、PUT、DELETE
 * url: 一个 DOMString 表示要向其发送请求的 URL
 * async: 可选，表示是否异步执行操作，默认为true
 * user: 可选，用户名用于认证用途；默认为 null
 * password: 可选，密码用于认证用途，默认为 null
 */
xhr.open(method, url)
xhr.open(method, url, async)
xhr.open(method, url, async, user)
xhr.open(method, url, async, user, password) 
1
2
3
4
5
6
7
8
9
10
11

然后使用 send() 方法发送请求

/**
 * body: 可选参数，默认为null
 * 返回值：undefined
 */
XMLHttpRequest.send(body) 
1
2
3
4
5

body 参数接受的类型包括：

• null
• Document 对象，在发送之前被序列化
• XMLHttpRequestBodyInit

type XMLHttpRequestBodyInit = Blob | BufferSource | FormData | URLSearchParams | string; 
1

异常情况：

• InvalidStateError：send() 方法已经被调用但该请求还未结束
• NetworkError：请求发送资源类型是 Blob，但请求方法不是 GET

请求头

setRequestHeader()

用于设置浏览器发送的 HTTP 请求的头信息。该方法必须在 open() 之后、send() 之前调用。如果该方法多次调用，设定同一个字段，则每一次调用的值会被合并成一个单一的值发送。

xhr.setRequestHeader('Content-Type', 'application/json')
xhr.setRequestHeader('Content-Length', JSON.stringify(data).length)
xhr.send(JSON.stringify(data)) 
1
2
3

getResponseHeader()

返回响应指定字段的值，如果还没有收到服务器回应或者指定字段不存在则返回 null࿰