window对象
| API | MEAN | Ps |
|---|---|---|
| 属性 | ||
| window.window | 指向自身 | |
| window.name | 设置当前浏览器窗口的名字 | |
| window.location | 返回一个location对象，用于获取窗口当前的URL信息 | 等同于document.location对象 |
| closed | 表示窗口是否关闭 | 返回一个布尔值 |
| opener | 返回打开当前窗口的父窗口 | 无父窗口，返回null |
| frames | 返回一个类似数组的对象 | 成员为页面内所有框架窗口，包括frame和iframe |
| length | 返回当前网页包含的框架总数 | 无，返回0 |
| screenX | 返回浏览器窗口左上角相对于当前屏幕左上角（(0, 0)）的水平距离 | 单位为像素 |
| screenY | 垂直距离 | 同上 |
| innerHeight | 返回网页在当前窗口中可见部分的高度 | “视口”（viewport），单位为像素 |
| innerWidth | 宽度 | 包括滚动条的高度和宽度 |
| outerHeight | 返回浏览器窗口的高度 | 单位为像素 |
| outerWidth | 宽度 | 包括浏览器菜单和边框 |
| pageXOffset | 返回页面的水平滚动距离 | px |
| pageYOffset | 垂直 | px |
| window.navigator对象 | 返回浏览器的User-Agent字符串，标示浏览器的厂商和版本信息 | |
| navigator.userAgent | 返回浏览器的User-Agent字符串 | 标示浏览器的厂商和版本信息 |
| navigator.plugins | 返回一个类似数组的对象，成员是浏览器安装的插件 | 如Flash、ActiveX等 |
| platform | 返回用户的操作系统信息 | |
| onLine | 表示用户当前在线还是离线 | 返回一个布尔值 |
| geolocation | 包含用户地理位置的信息 | 返回一个Geolocation对象 |
| javaEnabled() | 表示浏览器是否能运行Java Applet小程序 | 返回一个布尔值 |
| cookieEnabled | 表示浏览器是否能储存Cookie | 返回一个布尔值 |
| window.screen对象 | 包含了显示设备的信息 | |
| screen.height | 显示设备的高度 | 单位为像素 |
| screen.width | 宽度 | 用来了解设备的分辨率 |
| window对象的方法 | ||
| window.moveTo() | 将移动浏览器窗口到指定位置 | 参数(窗口左上角距离屏幕左上角的水平距离,垂直距离)单位为像素 |
| window.moveBy() | 将窗口移动到一个相对位置 | (窗口左上角向右移动的水平距离,向下移动的垂直距离) |
| scrollTo() | 将网页的指定位置，滚动到浏览器左上角 | 参数(相对于整张网页的横坐标,纵坐标)，别名window.scroll |
| scrollBy | 将网页移动指定距离，单位为像素 | (向右滚动的像素，向下滚动的像素) |
| open() | 新建另一个浏览器窗口 | 并返回该窗口对象 |
| print() | 跳出打印对话框 | 同用户点击菜单里面的“打印”命令效果相同 |
| getComputedStyle() | 返回一个包含该HTML元素的最终样式信息的对象 | 接受一个HTML元素作为参数 |
| matchMedia() | 检查CSS的mediaQuery语句 | |
| focus() | 激活指定当前窗口，使其获得焦点 | 当前窗口获得焦点时，会触发focus事件；失去焦点会触发blur事件 |
| getSelection() | 表示用户现在选中的文本 | 返回一个Selection对象 |
| 事件 | ||
| load事件 | 发生在文档在浏览器窗口加载完毕时 | |
| window.onload属性 | 可以指定这个事件的回调函数 | |
| error事件 | 脚本发生错误时触发 | |
| indow.onerror属性 | 对该事件指定回调函数 | |
| URL的编码/解码方法 | ||
| encodeURI | 将元字符和语义字符之外的字符，都进行转义 | 参数是一个字符串，代表整个URL |
| encodeURIComponent | 只转除了语义字符之外的字符，元字符也会被转义 | 参数通常是URL的路径或参数值，而不是整个URL |
| decodeURI | 还原转义后的URL | 是encodeURI方法的逆运算 |
| decodeURIComponent | 还原转义后的URL片段 | 是encodeURIComponent方法的逆运算 |
| 浏览器与用户互动的全局方法 | ||
| alert() | 弹出的对话框，只有一个“确定”按钮,]用来通知用户某些信息 | 参数只能是字符串 |
| prompt | 弹出的对话框，在提示文字的下方，还有一个输入框，要求用户输入信息，并有“确定”和“取消”两个按钮 | 用来获取用户输入的数据 |
| confirm | 弹出的对话框，除了提示信息之外，只有“确定”和“取消”两个按钮 | 用来征询用户的意见 |
| window.postMessage | 允许跨窗口通信，不论这两个窗口是否同源 | 跨文档通信 API |
| window.postMessage | 读写其他窗口的 LocalStorage |
history对象
| API | MEAN | Ps |
|---|---|---|
| history.length | 浏览网址个数 | |
| back() | 移动到上一个访问页面 | 等同于浏览器的后退键。 |
| forward() | 移动到下一个访问页面 | 等同于浏览器的前进键。 |
| go() | 接受一个整数作为参数，移动到该整数指定的页面 | 如go(1)相当于forward()，go(-1)相当于back() |
| history.pushState() | 浏览历史中添加记录 | 参数（state，title，url） |
| replaceState() | 修改记录 | |
| history.state | 该属性返回当前页面的state对象 | |
| popstate事件 | 每当同一个文档的浏览历史（即history对象）出现变化时，就会触发popstate事件 | |
| URLSearchParams API | 用于处理URL之中的查询字符串，即问号之后的部分 | 方法has()、get、getAll、set、delete、append、toString、keys、values、entries |
Cookie
| API | MEAN | Ps |
|---|---|---|
| window.navigator.cookieEnabled | 表示浏览器是否打开 Cookie 功能返回一个布尔值 | |
| document.cookie | 返回当前网页的 Cookie | 可写 |
| Set-Cookie属性 | ||
| value | 它是一个键值对，用于指定Cookie的值 | 必需的 |
| expires | 用于指定Cookie过期时间 | 格式采用Date.toUTCString()的格式 |
| domain | 指定Cookie所在的域名 | 未指定，默认为设定该Cookie的域名 |
| path | 用来指定路径，必须是绝对路径（比如/、/mydir） | 如果未指定，默认为请求该 Cookie 的网页路径 |
| secure | 用来指定Cookie只能在加密协议HTTPS下发送到服务器 | 只是一个开关，不需要指定值。如果通信是HTTPS协议，该开关自动打开 |
| max-age | 用来指定Cookie有效期 | |
| HttpOnly | 用于设置该Cookie不能被JavaScript读取 |
Web Storage：浏览器端数据储存机制
| API | MEAN | Ps |
|---|---|---|
| Web Storage | 使网页可以在浏览器端储存数据 | 分成两类：sessionStorage和localStorage |
| sessionStorage | 保存的数据用于浏览器的一次会话,当会话结束（通常是该窗口关闭），数据被清空 | 参数（"key","value"） |
| localStorage | 保存的数据长期存在 | 下一次访问该网站的时候，网页可以直接读取以前保存的数据 |
| removeItem | 清除某个键名对应的数据 | |
| clear | 清除所有保存的数据 |
AJAX
| API | MEAN | Ps |
|---|---|---|
| XMLHttpRequest对象 | 用来在浏览器与服务器之间传送数据 | |
| XMLHttpRequest实例的属性 | ||
| readyState | 用一个整数和对应的常量表示XMLHttpRequest请求当前所处的状态 | 只读0-UNSENT，1-OPENED，2-HEADERS_RECEIVED，3-LOADING，4-DONE |
| onreadystatechange | 指向一个回调函数，当readystatechange事件发生的时候，这个回调函数就会调用 | 且XMLHttpRequest实例的readyState属性也会发生变化 |
| response | 返回接收到的数据体（即body部分） | 只读 |
| responseType | 指定服务器返回数据的类型 | ”“：字符串（默认值）、 “arraybuffer”、 “blob” 、“document”、“json”、“text” |
| responseText | 返回从服务器接收到的字符串 | 如果本次请求没有成功或者数据不完整，该属性就会等于null，只读 |
| responseXML | 返回从服务器接收到的Document对象 | 只读 |
| status | 表示本次请求所得到的HTTP状态码，它是一个整数 | 一般来说，如果通信成功的话，这个状态码是200。只读 |
| statusText | 返回一个字符串，表示服务器发送的状态提示 | 不同于status属性，该属性包含整个状态信息，比如”200 OK“。只读 |
| timeout | 等于一个整数，表示多少毫秒后 | 如果请求仍然没有得到结果，就会自动终止。如果该属性等于0，就表示没有时间限制 |
| 事件监听接口 | ||
| onloadstart | 请求发出 | |
| onprogress | 正在发送和加载数据 | |
| onabort | 请求被中止，比如用户调用了abort()方法 | |
| onerror | 请求失败 | |
| onload | 请求成功完成 | |
| ontimeout | 用户指定的时限到期，请求还未完成 | |
| onloadend | 请求完成，不管成果或失败 | |
| withCredentials | 布尔值，表示跨域请求时，用户信息是否会包含在请求之中 | 默认为false |
| XMLHttpRequest实例的方法 | ||
| abort() | 终止已经发出的HTTP请求 | onreadystatechange回调函数也会被调用 |
| getAllResponseHeaders | 返回服务器发来的所有HTTP头信息 | 格式为字符串，每个头信息之间使用CRLF分隔，如果没有受到服务器回应，该属性返回null |
| getResponseHeader | 返回HTTP头信息指定字段的值 | 如果还没有收到服务器回应或者指定字段不存在，则该属性为null |
| open | 指定发送HTTP请求的参数 | 参数（method、url、sync、user、password） |
| end | 用于实际发出HTTP请求 | 若不带参数，表示HTTP请求只包含头信息，只有一个URL例GET请求；若带有参数，表示除了头信息，还带有包含具体数据的信息体，例POST请求 |
| setRequestHeader | 设置HTTP头信息 | 该方法必须在open()之后、send()之前调用 |
| overrideMimeType() | 指定服务器返回数据的MIME类型 | 在send()之前调用 |
| XMLHttpRequest实例的事件 | ||
| readyStateChange事件 | readyState属性的值发生改变，就会触发 | |
| progress事件 | 上传文件时会不断返回上传的进度 | |
| load事件 | 服务器传来的数据接收完毕 | |
| error事件 | 表示请求出错 | |
| abort事件 | 表示请求被中断 | |
| loadend事件 | 表示请求结束，但不知道其是否成功 | |
| 文件上传 | ||
| POST方法 | enctype属性设为application/x-www-form-urlencoded | 默认方法 |
| POST | enctype属性设为text/plain | |
| POST | enctype属性设为multipart/form-data | |
| GET方法 | enctype属性将被忽略 | |
| Fetch API | ||
| stream数据流 | ||
| .text() | 返回字符串 | |
| .json() | 返回一个JSON对象 | |
| .formData() | 返回一个FormData对象 | |
| .blob() | 返回一个blob对象 | |
| .arrayBuffer() | 返回一个二进制数组 | |
| fetch() | 返回一个Promise对象，并将一个response对象传给回调函数 | |
| Headers对象 | 用来构造/读取HTTP数据包的头信息 | |
| Request对象 | 用来构造HTTP请求 | 第二个参数，表示配置对象 |
| Response | 属性：status、statusText、ok、headers、url、type | 静态方法Response.error() Response.redirect(url, status) |
| body | 可能的数据类型：ArrayBuffer、ArrayBufferView(Uint8Array等)、Blob/File、string、URLSearchParams、 FormData | 读取的方法：arrayBuffer()、blob()、 json()、text()、 formData() |
CORS通信
| API | MEAN | Ps |
|---|---|---|
| CORS请求相关的字段 | ||
| Access-Control-Allow-Origin | 表示接受任意域名的请求 | 该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个* |
| Access-Control-Allow-Credentials | 它的值是一个布尔值，表示是否允许发送Cookie | 可选 |
| Access-Control-Expose-Headers | CORS请求时，指定拿到其他字段 | 可选 |
| 预检请求的回应 | ||
| Access-Control-Allow-Methods | 返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次“预检”请求 | 该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法 |
| Access-Control-Allow-Headers | 是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在“预检”中请求的字段 | 如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的 |
| Access-Control-Allow-Credentials | 该字段与简单请求时的含义相同 | |
| Access-Control-Max-Age | 用来指定本次预检请求的有效期，单位为秒 | 该字段可选 |
网友评论