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

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

从服务器获取数据(Fetchingdatafromtheserver)

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

Ajax(AsynchronousJavaScriptandXML)开始

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

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

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

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

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

XMLHttpRequest

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

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

使用FetchAPI

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

这里我们通过网络获取一个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对象。

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中，Chrome47之前的默认值是follow，从Chrome47开始是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:包括请求的subresourceintegrity值。

常见配置示例如下所示：

很赞哦!（111）