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 | 返回用戶的操作系統(tǒng)信息 | |
| 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() | 激活指定當前窗口，使其獲得焦點 | 當前窗口獲得焦點時，會觸發(fā)focus事件；失去焦點會觸發(fā)blur事件 |
| getSelection() | 表示用戶現在選中的文本 | 返回一個Selection對象 |
| 事件 | ||
| load事件 | 發(fā)生在文檔在瀏覽器窗口加載完畢時 | |
| window.onload屬性 | 可以指定這個事件的回調函數 | |
| error事件 | 腳本發(fā)生錯誤時觸發(fā) | |
| 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對象）出現變化時，就會觸發(fā)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只能在加密協(xié)議HTTPS下發(fā)送到服務器 | 只是一個開關，不需要指定值。如果通信是HTTPS協(xié)議，該開關自動打開 |
| 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請求當前所處的狀態(tài) | 只讀0-UNSENT，1-OPENED，2-HEADERS_RECEIVED，3-LOADING，4-DONE |
| onreadystatechange | 指向一個回調函數，當readystatechange事件發(fā)生的時候，這個回調函數就會調用 | 且XMLHttpRequest實例的readyState屬性也會發(fā)生變化 |
| response | 返回接收到的數據體（即body部分） | 只讀 |
| responseType | 指定服務器返回數據的類型 | ”“：字符串（默認值）、 “arraybuffer”、 “blob” 、“document”、“json”、“text” |
| responseText | 返回從服務器接收到的字符串 | 如果本次請求沒有成功或者數據不完整，該屬性就會等于null，只讀 |
| responseXML | 返回從服務器接收到的Document對象 | 只讀 |
| status | 表示本次請求所得到的HTTP狀態(tài)碼，它是一個整數 | 一般來說，如果通信成功的話，這個狀態(tài)碼是200。只讀 |
| statusText | 返回一個字符串，表示服務器發(fā)送的狀態(tài)提示 | 不同于status屬性，該屬性包含整個狀態(tài)信息，比如”200 OK“。只讀 |
| timeout | 等于一個整數，表示多少毫秒后 | 如果請求仍然沒有得到結果，就會自動終止。如果該屬性等于0，就表示沒有時間限制 |
| 事件監(jiān)聽接口 | ||
| onloadstart | 請求發(fā)出 | |
| onprogress | 正在發(fā)送和加載數據 | |
| onabort | 請求被中止，比如用戶調用了abort()方法 | |
| onerror | 請求失敗 | |
| onload | 請求成功完成 | |
| ontimeout | 用戶指定的時限到期，請求還未完成 | |
| onloadend | 請求完成，不管成果或失敗 | |
| withCredentials | 布爾值，表示跨域請求時，用戶信息是否會包含在請求之中 | 默認為false |
| XMLHttpRequest實例的方法 | ||
| abort() | 終止已經發(fā)出的HTTP請求 | onreadystatechange回調函數也會被調用 |
| getAllResponseHeaders | 返回服務器發(fā)來的所有HTTP頭信息 | 格式為字符串，每個頭信息之間使用CRLF分隔，如果沒有受到服務器回應，該屬性返回null |
| getResponseHeader | 返回HTTP頭信息指定字段的值 | 如果還沒有收到服務器回應或者指定字段不存在，則該屬性為null |
| open | 指定發(fā)送HTTP請求的參數 | 參數（method、url、sync、user、password） |
| end | 用于實際發(fā)出HTTP請求 | 若不帶參數，表示HTTP請求只包含頭信息，只有一個URL例GET請求；若帶有參數，表示除了頭信息，還帶有包含具體數據的信息體，例POST請求 |
| setRequestHeader | 設置HTTP頭信息 | 該方法必須在open()之后、send()之前調用 |
| overrideMimeType() | 指定服務器返回數據的MIME類型 | 在send()之前調用 |
| XMLHttpRequest實例的事件 | ||
| readyStateChange事件 | readyState屬性的值發(fā)生改變，就會觸發(fā) | |
| 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 | 靜態(tài)方法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 | 它的值是一個布爾值，表示是否允許發(fā)送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 | 用來指定本次預檢請求的有效期，單位為秒 | 該字段可選 |
