游戏开发之旅-JavaScript服务器Ajax技术

本节是第四讲的第二十一小节，上一节课为大家简单介绍了文档操作模型(DOM)的基本操作，本节将介绍获取服务器数据的Ajax技术，包括XmlHttpRequest对象和FetchAPI的基本用法。

从服务器获取数据(Fetching data from the server)

最初加载页面很简单 -- 你为网站发送一个请求到服务器， 只要没有出错你将会获取资源并显示网页到你的电脑上。这个模型的问题是当你想更新网页的任何部分，例如显示一套新的产品或者加载一个新的页面，你需要再一次加载整个页面。这是非常浪费的并且导致了差的用户体验尤其是现在的页面越来越大且越来越复杂。

Ajax(Asynchronous JavaScript and XML)开始

这导致了创建允许网页请求小块数据（例如 HTML, XML, JSON, 或纯文本) 和 仅在需要时显示它们的技术，从而帮助解决上述问题。这是通过使用诸如 XMLHttpRequest 之类的API或者 — 最近以来的 Fetch API 来实现. 这些技术允许网页直接处理对服务器上可用的特定资源的 HTTP 请求，并在显示之前根据需要对结果数据进行格式化。

在早期，这种通用技术被称为Asynchronous JavaScript and XML（Ajax）， 因为它倾向于使用XMLHttpRequest 来请求XML数据。 但通常不是这种情况 (你更有可能使用 XMLHttpRequest 或 Fetch 来请求JSON), 但结果仍然是一样的，术语“Ajax”仍然常用于描述这种技术。

Ajax模型包括使用Web API作为代理来更智能地请求数据，而不仅仅是让浏览器重新加载整个页面。让我们来思考这个意义：去你最喜欢的信息丰富的网站之一，如亚马逊，CNN等，并加载它。

现在搜索一些东西，比如一个新产品。 主要内容将会改变，但大部分周围的信息，如页眉，页脚，导航菜单等都将保持不变。这是一件非常好的事情，因为：页面更新速度更快，您不必等待页面刷新，这意味着该网站体验感觉更快，响应更快。每次更新都会下载更少的数据，这意味着更少地浪费带宽。

为了进一步提高速度，有些网站还会在首次请求时将资产和数据存储在用户的计算机上，这意味着在后续访问中，他们将使用本地版本，而不是在首次加载页面时下载新副本。 内容仅在更新后从服务器重新加载。

XMLHttpRequest

XMLHttpRequest （通常缩写为XHR）现在是一个相当古老的技术 - 它是在20世纪90年代后期由微软发明的，并且已经在相当长的时间内跨浏览器进行了标准化。以下是XMLHttpRequest 常用的获取服务器数据的方法：

let request = new XMLHttpRequest();//使用 XMLHttpRequest() 的构造函数创建一个新的请求对象

request.open(method, url, [async]);//method 要使用的HTTP方法，比如“GET”,”POST”,”PUT”,”DELETE”。

request.responseType = 'text';//常用类型：'json','text','document','blob','arraybuffer'

request.send();//以上的请求通过 send() 完成的.

request.onload = function() {}//当服务器数据返回完成时才执行onload事件

XMLHttpRequest（XHR）对象用于与服务器交互， 在 AJAX 编程中被大量使用。尽管名称如此，XMLHttpRequest 可以用于获取任何类型的数据，而不仅仅是 XML。它甚至支持 HTTP 以外的协议（包括 file:// 和 FTP），尽管可能受到更多出于安全等原因的限制。以下是XMLHttpRequest对象的所有属性以及方法：

XMLHttpRequest.onreadystatechange//当 readyState 属性发生变化时，调用的 EventHandler。

XMLHttpRequest.readyState//返回 一个无符号短整型（unsigned short）数字，代表请求的状态码。

XMLHttpRequest.response//返回一个 ArrayBuffer、Blob、Document，或 DOMString，具体是哪种类型取决于 XMLHttpRequest.responseType 的值。

XMLHttpRequest.responseText //返回一个 DOMString，该 DOMString 包含对请求的响应，如果请求未成功或尚未发送，则返回 null。

XMLHttpRequest.responseType//一个用于定义响应类型的枚举值（enumerated value）。

XMLHttpRequest.responseURL //返回经过序列化（serialized）的响应 URL，如果该 URL 为空，则返回空字符串。

XMLHttpRequest.responseXML//返回一个 Document，其中包含该请求的响应，如果请求未成功、尚未发送或时不能被解析为 XML 或 HTML，则返回 null。

XMLHttpRequest.status//返回一个无符号短整型（unsigned short）数字，代表请求的响应状态。

XMLHttpRequest.statusText//返回一个 DOMString，其中包含 HTTP 服务器返回的响应状态。

XMLHttpRequest.timeout//一个无符号长整型（unsigned long）数字，表示该请求的最大请求时间（毫秒），若超出该时间，请求会自动终止。

XMLHttpRequest.upload //XMLHttpRequestUpload，代表上传进度。

XMLHttpRequest.withCredentials//一个布尔值，用来指定跨域 Access-Control 请求是否应当带有授权信息，如 cookie 或授权 header 头。

XMLHttpRequest.abort()//如果请求已被发出，则立刻中止请求。

XMLHttpRequest.getAllResponseHeaders()//以字符串的形式返回所有用 CRLF 分隔的响应头，如果没有收到响应，则返回 null。

XMLHttpRequest.getResponseHeader()//返回包含指定响应头的字符串，如果响应尚未收到或响应中不存在该报头，则返回 null。

XMLHttpRequest.open()//初始化一个请求。

XMLHttpRequest.overrideMimeType()//覆写由服务器返回的 MIME 类型。

XMLHttpRequest.send()//发送请求。如果请求是异步的（默认），那么该方法将在请求发送后立即返回。

XMLHttpRequest.setRequestHeader()//设置 HTTP 请求头的值。必须在 open() 之后、send() 之前调用 setRequestHeader() 方法。

XMLHttpRequest.onabort//当 request 被停止时触发

XMLHttpRequest.onerror//当 request 遭遇错误时触发。

XMLHttpRequest.onload//XMLHttpRequest请求成功完成时触发。

XMLHttpRequest.onloadend//当请求结束时触发, 无论请求成功 ( load) 还是失败 (abort 或 error)。

XMLHttpRequest.onloadstart//接收到响应数据时触发。

XMLHttpRequest.onprogress//当请求接收到更多数据时，周期性地触发。

XMLHttpRequest.ontimeout//在预设时间内没有接收到响应时触发。

使用 Fetch API

Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

fetch('http://xxx/movies.json')

.then(function(response) {

return response.json();

})

.then(function(myJson) {

console.log(myJson);

});

这里我们通过网络获取一个 JSON 文件并将其打印到控制台。最简单的用法是只提供一个参数用来指明想 fetch() 到的资源路径，然后返回一个包含响应结果的promise（一个 Response 对象）。

当然它只是一个 HTTP 响应，而不是真的JSON。为了获取JSON的内容，我们需要使用 json() 方法。

fetch 规范与XMLHttpRequest主要有三种方式的不同：

当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject， 即使响应的 HTTP 状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。

fetch() 可以接受跨域 cookies；你也可以使用 fetch() 建立起跨域会话。其他网站的 Set-Cookie 头部字段将会被无视。

fetch 不会发送 cookies。除非你使用了credentials 的初始化选项。

支持的请求参数

fetch() 接受第二个可选参数，一个可以控制不同配置的 init 对象。

Promise<Response> fetch(input[, init]);

method: 请求使用的方法，如 GET、POST。

headers: 请求的头信息，形式为 Headers 的对象或包含 ByteString 值的对象字面量。

body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。

mode: 请求的模式，如 cors、 no-cors 或者 same-origin。

credentials: 请求的 credentials，如 omit(浏览器不在请求中包含凭据)、same-origin(请求URL与调用脚本位于同一域) 或者 include(跨域发送包含凭据的请求)。为了在当前域名内自动发送 cookie ， 必须提供这个选项

cache: 请求的 cache 模式: default 、 no-store 、 reload 、 no-cache 、 force-cache 或者 only-if-cached 。

redirect: 可用的 redirect 模式: follow (自动重定向), error (如果产生重定向将自动终止并且抛出一个错误), 或者 manual (手动处理重定向). 在Chrome中，Chrome 47之前的默认值是 follow，从 Chrome 47开始是 manual。

referrer: 一个 USVString 可以是 no-referrer、client或一个 URL。默认是 client。

referrerPolicy: 指定了HTTP头部referer字段的值。可能为以下值之一： no-referrer、 no-referrer-when-downgrade、 origin、 origin-when-cross-origin、 unsafe-url 。

integrity: 包括请求的 subresource integrity 值 。

常见配置示例如下所示：

fetch(url, {

body: JSON.stringify(data), // must match 'Content-Type' header

cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached

credentials: 'same-origin', // include, same-origin, *omit

headers: {

'user-agent': 'Mozilla/4.0 MDN Example',

'content-type': 'application/json'

},

method: 'POST', // *GET, POST, PUT, DELETE, etc.

mode: 'cors', // no-cors, cors, *same-origin

redirect: 'follow', // manual, *follow, error

referrer: 'no-referrer', // *client, no-referrer

})

以上内容部分摘自视频课程04网页游戏编程JavaScript-21服务器数据API，更多示例请参见网站示例。跟着张员外讲编程，学习更轻松，不花钱还能学习真本领。