游戏开发之旅-JavaScript服务器Ajax技术
qiyuwang 2024-11-01 14:42 10 浏览 0 评论
本节是第四讲的第二十一小节,上一节课为大家简单介绍了文档操作模型(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,更多示例请参见网站示例。跟着张员外讲编程,学习更轻松,不花钱还能学习真本领。
相关推荐
- 铭说 | 一句话木马的多种变形方式
-
今天来和大家聊一聊,一句话木马...
- 某教程学习笔记(一):13、脚本木马原理
-
我和她说,如果有天你要离开我,你就跟我掰手腕,赢了你就让你走,她说我那么瘦小怎么会赢。后来她真的要和我分手,我把右手放在桌子上,眼看我要赢的时候,她把左手放到右手上,我抬头看她咬着牙眼里含着泪,我知道...
- 年中盘点:详细分析2019年上半年爆发的macOS恶意软件
-
概述自从我们在去年12月对2018年的macOS恶意软件进行年终盘点以来,我们发现新型macOS恶意软件的爆发数量有所增加。一些旧恶意软件家族产生了新的变种,一些恶意软件使用了新的技巧,同时还产生了一...
- Webshell免杀研究(webshell免杀马)
-
前言不想当将军的士兵不是好士兵,不想getshell的Hacker不是好Hacker~有时候我们在做攻防对抗时经常会碰到可以上传webshell的地方,但是经常会被安全狗、D盾、护卫神、云锁等安全软件...
- 一个合格的seoer应该掌握的基本技能和知识点!
-
1.301重定向2.404错误页面3.url表转化4.三导航5.树桩结构6.网站目录优化7.网站内连接8.更新带动器9.Gzip压缩技术的意义!10.http状态码是否正常11.URL静态化12.网站...
- Cacti监控服务器配置教程(基于CentOS+Nginx+MySQL+PHP环境搭建)
-
具体案例:局域网内有两台主机,一台Linux、一台Windows,现在需要配置一台Cacti监控服务器对这两台主机进行监控...
- php opcache 的工作原理(php aop 实现原理)
-
opcachePHP扩展实现了各种功能,以透明的方式加速PHP。顾名思义,它的起源和主要目的是操作码缓存,但现在它还包含一个优化器和即时编译器。然而,这篇博文将只关注操作码缓存方面。...
- win7下apache+mysql+php安装配置(mysql在win7下安装)
-
一.首先下载好要用的apache版本:http://httpd.apache.org/download.cgimysql版本:http://dev.mysql.com/downloads/mys...
- Ubuntu linux 上的 Nginx 和 Php 安装
-
教程-在UbuntuLinux上安装Nginx1.安装Nginx服务器和所需的包。apt-getupdatebrapt-getinstallnginx...
- 只需要四步,就能完成PHP搭建(如何搭建php运行环境)
-
搭建php的方法主要分为独立安装和集成安装两种,独立安装需要分别下载apache,mysql和php,而集成只需要下载一个软件安装包,比较简单,很适合新手。集成安装包有WampServer、appse...
- 判断元素是否在数组内的几种方法对比
-
数组是很常用的一个数据结构,而且经常需要判断某个元素是否在数组中,这在...
- 如何从 PHP 过渡到 Golang?(php转go还是java)
-
我是PHP开发者,转Go两个月了吧,记录一下使用Golang怎么一步步开发新项目。本着有坑填坑,有错改错的宗旨,从零开始,开始学习。因为我司没有专门的Golang大牛,所以我也只能一步步自己去...
- Thinkphp3.2.3及以下版本漏洞整理
-
欢迎搜索公众号:白帽子左一每天分享更多黑客技能,工具及体系化视频教程...
- 【php学习笔记】php中str_split()方法使用笔记
-
PHP是一种广泛应用的编程语言,它有许多内置函数和方法,用来方便我们对数据进行处理和操作。其中,字符串处理是PHP中常见的任务之一。str_split()是PHP中的一个字符串方法,它用来将字符串分割...
- Redis中BitMap是如何储存的,以及PHP如何处理
-
setbit,getbit这些命令在redis是如何储存和获取的呢?直接通过get获取到的值我们如何判断对应的位是0或者1?...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- navicat无法连接mysql服务器 (65)
- 下横线怎么打 (71)
- flash插件怎么安装 (60)
- lol体验服怎么进 (66)
- ae插件怎么安装 (62)
- yum卸载 (75)
- .key文件 (63)
- cad一打开就致命错误是怎么回事 (61)
- rpm文件怎么安装 (66)
- linux取消挂载 (81)
- ie代理配置错误 (61)
- ajax error (67)
- centos7 重启网络 (67)
- centos6下载 (58)
- mysql 外网访问权限 (69)
- centos查看内核版本 (61)
- ps错误16 (66)
- nodejs读取json文件 (64)
- centos7 1810 (59)
- 加载com加载项时运行错误 (67)
- php打乱数组顺序 (68)
- cad安装失败怎么解决 (58)
- 因文件头错误而不能打开怎么解决 (68)
- js判断字符串为空 (62)
- centos查看端口 (64)