(本文摘录于阮一峰老师所写文章,https://wangdoc.com/javascript/basic/index.html,作个人学习使用。)
window
1、浏览器里面,window对象指当前的浏览器窗口。它也是当前页面的顶层对象,即最高一层的对象,所有其他对象都是它的下属。一个变量如果未声明,那么默认就是顶层对象的属性。
Cookie
2、Cookie 是服务器保存在浏览器的一小段文本信息,每个 Cookie 的大小一般不能超过4KB。浏览器每次向服务器发出请求,就会自动附上这段信息。
Cookie 主要用来分辨两个请求是否来自同一个浏览器,以及用来保存一些状态信息。它的常用场合有以下一些。
对话(session)管理:保存登录、购物车等需要记录的信息。
个性化:保存用户的偏好,比如网页的字体大小、背景色等等。
追踪:记录和分析用户行为。
有些开发者使用 Cookie 作为客户端储存。这样做虽然可行,但是并不推荐,因为 Cookie 的设计目标并不是这个,它的容量很小(4KB),缺乏数据操作接口,而且会影响性能。客户端储存应该使用 Web storage API 和 IndexedDB。
Cookie 包含以下几方面的信息:
(1)Cookie 的名字
(2)Cookie 的值(真正的数据写在这里面)
(3)到期时间
(4)所属域名(默认是当前域名)
(5)生效的路径(默认是当前网址)
浏览器的同源政策规定,两个网址只要域名相同和端口相同,就可以共享 Cookie。
3、
a)HTTP回应:从服务器到浏览器
服务器如果希望在浏览器保存 Cookie,就要在 HTTP 回应的头信息里面,放置一个Set-Cookie字段,里面可以附加Cookie的属性。
b)HTTP请求:Cookie发送
浏览器向服务器发送 HTTP 请求时,每个请求都会带上相应的 Cookie。也就是说,把服务器早前保存在浏览器的这段信息,再发回服务器。这时要使用 HTTP 头信息的Cookie字段。
服务器收到浏览器发来的 Cookie 时,有两点是无法知道的:
(1)Cookie 的各种属性,比如何时过期。
(2)哪个域名设置的 Cookie,到底是一级域名设的,还是某一个二级域名设的。
4、Cookie的属性:
(1)如果同时指定了Expires和Max-Age,那么Max-Age的值将优先生效。
如果Set-Cookie字段没有指定Expires或Max-Age属性,那么这个 Cookie 就是 Session Cookie,即它只在本次对话存在,一旦用户关闭浏览器,浏览器就不会再保留这个 Cookie。
(2)Domain属性指定浏览器发出 HTTP 请求时,哪些域名要附带这个 Cookie。如果没有指定该属性,浏览器会默认将其设为当前域名,这时子域名将不会附带这个 Cookie。
Path属性指定浏览器发出 HTTP 请求时,哪些路径要附带这个 Cookie。只要浏览器发现,Path属性是 HTTP 请求路径的开头一部分,就会在头信息里面带上这个 Cookie,前提是域名必须一致。
5、各个属性的写入注意点如下。
(1)path属性必须为绝对路径,默认为当前路径。
(2)domain属性值必须是当前发送 Cookie 的域名的一部分。比如,当前域名是example.com,就不能将其设为foo.com。该属性默认为当前的一级域名(不含二级域名)。
(3)max-age属性的值为秒数。
(4)expires属性的值为 UTC 格式,可以使用Date.prototype.toUTCString()进行日期格式转换。
XMLHttpRequest
6、AJAX 这个词第一次正式提出,它是 Asynchronous JavaScript and XML 的缩写,指的是通过 JavaScript 的异步通信,从服务器获取 XML 文档从中提取数据,再更新当前网页的对应部分,而不用刷新整个网页。后来,AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词,也就是说,只要用脚本发起通信,就可以叫做 AJAX 通信。
具体来说,AJAX 包括以下几个步骤。
(1)创建 XMLHttpRequest 实例
(2)发出 HTTP 请求
(3)接收服务器传回的数据
(4)更新网页数据
综上,AJAX 通过原生的XMLHttpRequest对象发出 HTTP 请求,得到服务器返回的数据后,再进行处理。现在,服务器返回的都是 JSON 格式的数据,而不是XML。
注意,AJAX 只能向同源网址(协议、域名、端口都相同)发出 HTTP 请求,如果发出跨域请求,就会报错。
7、XMLHttpRequest 的实例属性
(1)xhr.readyState等于4时,表明脚本发出的 HTTP 请求已经完成。其他情况,都表示 HTTP 请求还在进行中。
(2)XMLHttpRequest.onreadystatechange属性指向一个监听函数。readystatechange事件发生时(实例的readyState属性变化),就会执行这个属性。
(3)XMLHttpRequest.response属性表示服务器返回的数据体(即 HTTP 回应的 body 部分)。
(4)XMLHttpRequest.responseType属性可以等于以下值。
""(空字符串):等同于text,表示服务器返回文本数据。
"arraybuffer":ArrayBuffer 对象,表示服务器返回二进制数组。
"blob":Blob 对象,表示服务器返回二进制对象。
"document":Document 对象,表示服务器返回一个文档对象。
"json":JSON 对象。
"text":字符串。
8、XMLHttpRequest 的实例方法
(1)XMLHttpRequest.open()方法用于指定 HTTP 请求的参数,或者说初始化 XMLHttpRequest 实例对象。它一共可以接受五个参数。
(2)XMLHttpRequest.send()方法用于实际发出 HTTP 请求。它的参数是可选的,如果不带参数,就表示 HTTP 请求只有一个 URL,没有数据体,典型例子就是 GET 请求;如果带有参数,就表示除了头信息,还带有包含具体数据的信息体,典型例子就是 POST 请求。
9、readyState属性的值发生改变,就会触发 readyStateChange 事件。
我们可以通过onReadyStateChange属性,指定这个事件的监听函数,对不同状态进行不同处理。尤其是当状态变为4的时候,表示通信成功,这时回调函数就可以处理服务器传送回来的数据。
10、用户卸载网页的时候,有时需要向服务器发一些数据。很自然的做法是在unload事件或beforeunload事件的监听函数里面,使用XMLHttpRequest对象发送数据。但是,这样做不是很可靠,因为XMLHttpRequest对象是异步发送,很可能在它即将发送的时候,页面已经卸载了,从而导致发送取消或者发送失败。
浏览器引入了Navigator.sendBeacon()方法。这个方法还是异步发出请求,但是请求与当前页面线程脱钩,作为浏览器进程的任务,因此可以保证会把数据发出去,不拖延卸载流程。
同源
11、所谓“同源”指的是“三个相同”。
协议相同、域名相同、端口相同。
(1) 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB。
(2) 无法接触非同源网页的 DOM。
(3) 无法向非同源地址发送 AJAX 请求(可以发送,但浏览器会拒绝接受响应)。
12、对于完全不同源的网站,目前有两种方法,可以解决跨域窗口的通信问题。
(1)片段识别符(fragment identifier):URL 的#号后面的部分,比如http://example.com/x.html#fragment的#fragment。如果只是改变片段标识符,页面不会重新刷新。父窗口可以把信息,写入子窗口的片段标识符。同样的,子窗口也可以改变父窗口的片段标识符。
(2)跨文档通信API(Cross-document messaging):新增了一个window.postMessage方法,允许跨窗口通信,不论这两个窗口是否同源。举例来说,父窗口aaa.com向子窗口bbb.com发消息,调用postMessage方法就可以了。通过window.postMessage,读写其他窗口的 LocalStorage 也成为了可能。
13、同源政策规定,AJAX 请求只能发给同源的网址,否则就报错。
除了架设服务器代理(浏览器请求同源服务器,再由后者请求外部服务),有三种方法规避这个限制。
JSONP、WebSocket、CORS(跨源资源分享(Cross-Origin Resource Sharing))
Storage
14、Storage 接口用于脚本在浏览器保存数据。两个对象部署了这个接口:window.sessionStorage和window.localStorage。
sessionStorage保存的数据用于浏览器的一次会话(session),当会话结束(通常是窗口关闭),数据被清空;localStorage保存的数据长期存在,下一次访问该网站的时候,网页可以直接读取以前保存的数据。除了保存期限的长短不同,这两个对象的其他方面都一致。
(1)Storage.setItem()两个参数都是字符串。如果不是字符串,会自动转成字符串,再存入浏览器。
(2)Storage.getItem()方法用于读取数据。它只有一个参数,就是键名。如果键名不存在,该方法返回null。