WebAPI · Web軟件技術棧隨筆

  [TOC]   * * * * *   ## 1. Web API 概述   概述([https://developer.mozilla.org/en-US/docs/Web/Reference/API](https://developer.mozilla.org/en-US/docs/Web/Reference/API)) Web 提供了各種各樣的 API 來完成各種的任務。這些 API 可以用 JavaScript 來訪問，令你可以做很多事，小到對任意``window``或者``element``做小幅調整，大到使用諸如`` WebGL ``和`` Web Audio``的 API 來生成復雜的圖形和音效。 ### 1.1 Web API分類 - **文檔對象模型（Document Object Model）** DOM 是一個可以訪問和修改當前文檔的 API。通過它可以操作文檔里的Node和Element。HTML，XML 和 SVG 都擴展了基本的 DOM 接口來操作它們各自私有的元素類型。 - **設備 API（Device APIs）** 讓網頁和應用程序使用各種硬件資源。如：環境光感應器API、電池狀態 API、地理位置 API、指針鎖定 API、距離感應 API、設備定向 API、屏幕定向 API、震動 API。 - **通信 API（Communication APIs）** 讓網頁或應用程序和其它的網頁或設備進行通信，如：網絡信息 API、Web 通知、簡單推送 API。 - **數據管理 APIs（Data management APIs）** 用來存儲和管理用戶的數據，如：文件處理 API、IndexedDB。 - **非標準的Mozilla私有API** - 特權 API（Privileged APIs）特權應用程序是那些由用戶給予了特定權限的應用程序。特權 API 包括：TCP Socket API、聯系人 API、設備存儲 API、瀏覽器 API、相機 API。 - 已認證應用程序的私有 API（Certified APIs）已認證的應用程序是那些直接與操作系統（比如 Firefox OS）打交道，執行核心操作的底層應用程序。較低特權的應用程序可以通過 Web Activities 調用這些底層應用程序。這些 API 包括：藍牙 API、手機連接 API、網絡狀態 API、通話 API、短信/彩信 API、WiFi 信息 API、電源管理 API、設置 API、空閑狀態 API、權限 API、時間/時鐘 API。 ### 1.2 EVENT #### 1.2.1 EventListener #### 1.2.2 EventHandler ### 1.2 ### 1.3 EVENT ## 2. Web API 接口   接口列表([https://developer.mozilla.org/en-US/docs/Web/API](https://developer.mozilla.org/en-US/docs/Web/API)) 使用 JavaScript 編寫網頁代碼時，有許多API可供調用，可在開發網站或Web應用程序時使用它們。 ### 2.1 WebSockets #### 2.1.1 什么是WebSockets [https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) WebSockets 是一個可以創建和服務器間進行雙向會話的高級技術。通過這個API你可以向服務器發送消息并接受基于事件驅動的響應，這樣就不用向服務器輪詢獲取數據了。 #### 2.1.2 接口（Interfaces） - **WebSocket** 用于連接WebSocket服務器的主要接口，之后可以在這個連接上發送和接受數據。 1. 構造函數（Constructor） >[info] > WebSocket WebSocket(        in DOMString url,        in optional DOMString protocols ); > >WebSocket WebSocket(         in DOMString url,         in optional DOMString[] protocols ); ``url``要連接的URL，為響應WebSocket的地址。 ``protocols``可選。單個的協議名字字符串或者包含多個協議名字字符串的數組。這些字符串用來表示子協議，這樣做可以讓一個服務器實現多種WebSocket子協議（例如你可能希望通過制定不同的協議來處理不同類型的交互）。如果沒有制定這個參數，它會默認設為一個空字符串。該構造函數拋出的異常（Exception）``SECURITY_ERR``，試圖連接的端口被屏蔽。 2. 方法（Method） > ``void close(in optional unsigned long code, in optional DOMString reason);`` ``code`` (可選)表示連接被關閉的原因的數字代碼。如果這個參數沒有被指定，默認的取值是1000 （表示正常連接關閉）。查看CloseEvent([https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent](https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent ))面的“ list of status codes”來看默認的取值。 ``reason`` (可選)一個可讀的字符串，表示連接被關閉的原因。這個字符串必須是不長于123字節的UTF-8 文本（不是字符）。可能拋出的異常 ``INVALID_ACCESS_ERR`` 選定了無效的code。 ``SYNTAX_ERR`` reason 字符串太長或者含有unpaired surrogates。 > ``void send(in DOMString/ArrayBuffer/Blob data);`` ``data`` 要發送到服務器的數據。可能拋出的異常 ``INVALID_STATE_ERR`` 當前連接的狀態不是OPEN。 ``SYNTAX_ERR`` 數據是一個包含unpaired surrogates的字符串。 3. 屬性（Attributes）屬性名 | 類型 | 描述 ------------| --------|------------------------------ binaryType| DOMString | 一個字符串表示被傳輸二進制的內容的類型。取值應當是"blob"或"arraybuffer"。<br>`blob`表示使用DOMBlob 對象。<br>`arraybuffer`表示使用 ArrayBuffer 對象。 bufferedAmount | unsigned long | **` 只讀`**。調用 `send() `方法將多字節數據加入到隊列中等待傳輸，但是還未發出。該值會在所有隊列數據被發送后重置為 0。而當連接關閉時不會設為0。如果持續調用`send()`，這個值會持續增長。 extensions | DOMString | 服務器選定的擴展。目前這個屬性只是一個空字符串，或者是一個包含所有擴展的列表。 onclose | EventListener| readyState 狀態變為 CLOSED 時會觸發該事件。這個監聽器會接收一個叫`close`的 CloseEvent 對象。 onerror | EventListener | 當錯誤發生時用于監聽error事件的事件監聽器。會接受一個名為`error`的event對象。 onmessage| EventListener | 一個用于消息事件的事件監聽器，這一事件當有消息到達的時候該事件會觸發。這個Listener會被傳入一個名為`message`的 MessageEvent 對象。 onopen | EventListener | 一個用于連接打開事件的事件監聽器。當`readyState`的值變為 "OPEN" 的時候會觸發該事件。該事件表明這個連接已經準備好接受和發送數據。這個監聽器會接受一個名為`open`的事件對象。 protocol | DOMString | 一個表明服務器選定的子協議名字的字符串。這個屬性的取值會被取值為構造器傳入的protocols參數。 readyState | unsigned short | **`只讀`**。連接的當前狀態。取值是 Ready state constants之一。 url| DOMString | **`只讀`**。傳入構造器的URL。它必須是一個絕對地址的URL。 4. 常數（Constants）常量 | 值 | 描述 ------------| --------|------------------------------ CONNECTING | 0 | 連接還沒開啟。 OPEN | 1 | 連接已開啟并準備好進行通信。 CLOSING | 2 | 連接正在關閉的過程中。 CLOSED | 3 | 連接已經關閉，或者連接無法建立。 5. 用法代碼示例： ~~~JavaScript // Create WebSocket connection. const socket = new WebSocket('ws://localhost:8080'); // Connection opened socket.addEventListener('open', function (event) { socket.send('Hello Server!'); }); // Listen for messages socket.addEventListener('message', function (event) { console.log('Message from server ', event.data); }); ~~~ - **CloseEvent** 連接關閉時，WebSocket對象產生的事件。 - **MessageEvent** 從服務器獲得消息時，WebSocket對象產生的事件。 #### 2.1.2 事件（Events） - **open** - **message** - **error** - **close** #### 2.1.3 編寫WebSocket 客戶端應用 WebSocket 客戶端應用使用WebSocket API通過WebSocket協議與WebSocket servers建立通訊。建立的通訊是連續的、全雙工的通訊連接。瀏覽器是一個典型的 WebSocket 客戶端，但WebSocket協議是獨立于平臺的。 - Chrome/Firefox/高版本IE/Safari等瀏覽器內置了JS語言的WebSocket客戶端 - 微信小程序開發框架內置的WebSocket客戶端 - 異步的PHP程序中可以使用``Swoole\Http\Client``作為WebSocket客戶端 - apache/php-fpm或其他同步阻塞的PHP程序中可以使用swoole/framework提供的同步WebSocket客戶端 - 非WebSocket客戶端不能與WebSocket服務器通信 1. 創建 WebSocket 對象示例1： ~~~javascript var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne"); ~~~ 創建了一個新的 WebSocket，連接到地址為 ws://www.example.com/socketserver 的服務器。請求中命名了一個自定義的協議 "protocolOne"(這一部分可以省略)。返回后，exampleSocket.readyState 參數為 CONNECTING。一旦連接可以傳送數據，readyState 就會變成 OPEN 。示例2： ~~~javascript var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]); ~~~ 建立一個支持協議可選的連接，可以指定協議的列表。一旦連接建立了（也就是說 readyState 是 OPEN） exampleSocket.protocol 就會顯示服務器選擇了哪個協議。上面的例子中``ws``替代了``http``，同樣地``wss ``也會替代``https``. 建立WebSocket鏈接有賴于 HTTP Upgrade mechanism([https://developer.mozilla.org/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism](https://developer.mozilla.org/en-US/docs/Web/HTTP/Protocol_upgrade_mechanism)), 所以當我們使用 ws://www.example.com或者 wss://www.example.com來訪問HTTP服務器的時候協議會隱式地升級。 2. 向服務器發送數據一旦與服務器的連接打開完成，就可以向服務器發送數據了。對每一個要發送的消息使用 ``WebSocket`` 對象的 ``send() ``方法： ~~~javascript exampleSocket.send("Here's some text that the server is urgently awaiting!"); ~~~ 可以把數據作為``字符串``，``Blob``，或者``ArrayBuffer``來發送。通過WebSocket連接收到的文本是 UTF-8 格式的。 >[warning]Prior to version 11, Firefox only supported sending data as a string. 由于是異步建立連接，而且容易失敗，所以剛創建的WebSocket對象不能保證使用 send()方法能夠成功發送數據。最好在連接建立后定義``onopen``事件處理函數（handler）發送數據。 ~~~javascript exampleSocket.onopen = function (event) { exampleSocket.send("Here's some text that the server is urgently awaiting!"); }; ~~~ 還可以使用``JSON ``來向服務器發送復雜一些的數據。示例： ~~~javascript // 服務器向所有用戶發送文本 function sendText() { // 構造一個 msg 對象，包含了服務器處理所需的數據 var msg = { type: "message", text: document.getElementById("text").value, id: clientID, date: Date.now() }; // 把 msg 對象作為JSON格式字符串發送 exampleSocket.send(JSON.stringify(msg)); // 清空文本輸入元素，為接收下一條消息做好準備。 document.getElementById("text").value = ""; } ~~~ 這里``JSON.stringify() ``方法是將一個JavaScript值(對象或者數組)轉換為一個 JSON字符串， 3. 接收服務器發送的消息 WebSockets 是一個基于事件的 API；收到消息的時候，一個 "message" 消息會被發送到 ``onmessage`` 函數。為了開始監聽傳入數據，可以進行如下操作： ~~~javascript exampleSocket.onmessage = function (event) { console.log(event.data); } ~~~ 考慮在“2.向服務器發送數據”中的聊天應用客戶端。客戶端會收到各種類型的數據包，比如： - 登陸握手 - 消息文本 - 用戶列表更新解析這些收到的消息的代碼可能是這樣的： ~~~javascript exampleSocket.onmessage = function(event) { var f = document.getElementById("chatbox").contentDocument; var text = ""; var msg = JSON.parse(event.data); var time = new Date(msg.date); var timeStr = time.toLocaleTimeString(); switch(msg.type) { case "id": clientID = msg.id; setUsername(); break; case "username": text = "<b>User <em>" + msg.name + "</em> signed in at " + timeStr + "</b><br>"; break; case "message": text = "(" + timeStr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>"; break; case "rejectusername": text = "<b>Your username has been set to <em>" + msg.name + "</em> because the name you chose is in use.</b><br>" break; case "userlist": var ul = ""; for (i=0; i < msg.users.length; i++) { ul += msg.users[i] + "<br>"; } document.getElementById("userlistbox").innerHTML = ul; break; } if (text.length) { f.write(text); document.getElementById("chatbox").contentWindow.scrollByPages(1); } }; ~~~ 這里使用`` JSON.parse()`` 來將JSON字符串轉換回原始對象，然后檢查并根據其內容做下一步動作。 4. 關閉連接當不需要再用 WebSocket 連接，調用 WebSocket ``close()``方法： ~~~javascript exampleSocket.close(); ~~~ 關閉連接前最好檢查一下 socket 的 ``bufferedAmount`` 屬性，以防還有數據要傳輸。 5. 安全方面的考慮 WebSocket 不應當用于混合的上下文環境；也就是說，不應該在用HTTPS加載的頁面中打開非安全版本的WebSocket，反之亦然。而實際上一些瀏覽器也明確禁止這一行為，包括 Firefox 8 及更高版本。 #### 2.1.4 編寫WebSocket服務器 [編寫WebSocket服務器](https://developer.mozilla.org/zh-CN/docs/Web/API/WebSockets_API/Writing_WebSocket_servers) 1. WebSocket握手 2. 交換數據幀 3. Ping和Pongs：WebSocket的心跳 4. 關閉連接 **雜項** 1. 擴展（Extension） Extensions control the WebSocket **frame** and **modify** the payload. Extensions are optional and generalized (like compression). WebSockets defines a protocol and a simple way to send data, but an extension such as compression could allow sending the same data but in a shorter format. 2. 子協議（Subprotocol） Subprotocols structure the WebSocket **payload** and **never modify** anything. Subprotocols are mandatory and localized (like ones for chat and for MMORPG games). WebSocket subprotocols do not introduce anything fancy, they just establish structure. Like a doctype or schema, both parties must agree on the subprotocol; unlike a doctype or schema, the subprotocol is implemented on the server and cannot be externally refered to by the client. ### 2.2 FileReader #### 2.2.1 什么是FileReader ### 2.3 XMLHttpRequest #### 2.3.1 什么是XMLHttpRequest [https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) XMLHttpRequest（XHR）對象，通過異步的形式讓Web應用的后臺腳本程序與服務器之間交換數據，并同時對前臺網頁進行部分更新（即異步請求，局部刷新）。XMLHttpRequest 是 AJAX 的基礎。所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象。 **同步**：腳本會停留并等待服務器發送回復然后再繼續。 **異步**：腳本允許頁面繼續其進程并處理可能的回復。 ajax（Asynchronous JavaScript and XML，異步JavaScript和XML）實現的步驟： - 創建XHR對象，也就是創建一個異步調用對象 - 創建一個新的HTTP請求，并指定該HTTP請求的方法、URL及驗證信息 - 設置響應HTTP請求狀態變化的函數 - 發送HTTP請求 - 獲取異步調用返回的數據 - 使用JavaScript和DOM實現局部刷新 #### 2.3.2 如何使用XHR 1. 創建XHR對象由構造函數``XMLHttpRequest()``初始化一個XMLHttpRequest對象。 ~~~javascript var request = new XMLHttpRequest(); ~~~ 2. 進行HTTP請求 HTTP完整請求過程： > 1. 建立TCP連接 > 2. Web瀏覽器向Web服務器發送請求命令 > 3. Web瀏覽器發送請求頭信息 > 4. Web服務器應答 > 5. Web服務器發送應答頭信息 > 6. Web服務器向瀏覽器發送數據 > 7. Web服務器關閉TCP連接將以上HTTP的請求過程分為兩個階段：請求和響應 - 請求``Request``過程 > 1. http請求的方法，如GET或者POST請求 > 2. 正在請求的URL地址（發出請求的地址） > 3. 請求頭，如客戶端環境的信息，身份驗證信息等 > 4. 請求體，包含客戶提交的查詢字符串信息，表單信息等 - 響應``Response``組成 > 1. 一個數字和文字組成的狀態碼，用來顯示請求成功還是失敗。 > 2. 響應頭，包含服務器類型、日期類型、內容類型、長度等。 > 3. 響應體即相應正文。 3. XMLHttpRequest請求``Request`` 第1步、open（method，url，async）: ~~~javascript method：發送請求方法（ GET、POST不分大小寫） url：請求地址（相對地址或者絕對地址） async：請求異步（即true）或者同步(false),默認異步 ~~~ 第2步、send(string)發送到服務器 ~~~javascript get：參數不寫或者null post：參數必須填寫 ~~~ ``Request``代碼示例(javascript)： ~~~javascript request.open("GET","get.php",ture); request.send(); //get.php地址 //創建王二狗 request.open("POST","create.php",ture); //設置http頭信息，發送表單。setRequestHeader必須在open和send中間 request.setRequestHeader("Content-type","application/x-www-form-urlencoded"); request.send("name=王二狗&sex=男")； ~~~ 4. XMLHttpRequest響應``Response`` 屬性 | 說明 ------------| -------- readyState | 表示XMLHttpRequest對象的狀態<br> 0：未初始化。對象已創建，未調用open；<br>1：open方法已調用，與服務器建立連接成功。但Send方法未調用；<br>2：send方法已調用，請求已接受（收到請求頭信息）；<br>3：請求處理中，正在接收請求數據，未接收完成；<br>4：請求處理完成，請求數據接收完成，響應也已就緒。 Onreadystatechange | 請求狀態改變的事件觸發器（readyState變化時會調用這個屬性上注冊的javascript函數）。 responseText | 服務器響應的文本內容（字符串形式） responseXML | 服務器響應的XML內容對應的DOM對象（XML形式式） Status | 服務器返回的http狀態碼：<br>200表示“成功”，<br>404表示“未找到”，<br>500表示“服務器內部錯誤”等。 statusText | 服務器返回狀態的文本信息。方法 | 說明 ------------| -------- Open(<br>string method,<br>string url,<br>boolean asynch,<br>String username,<br>string password) | 指定和服務器端交互的HTTP方法，URL地址，即其他請求信息；<br>Method:表示http請求方法，一般使用"GET","POST".<br>url：表示請求的服務器的地址；<br>asynch：表示是否采用異步方法，true為異步，false為同步；<br>后邊兩個可以不指定，username和password分別表示用戶名和密碼，提供http認證機制需要的用戶名和密碼。 Send(content)| 向服務器發出請求，如果采用異步方式，該方法會立即返回。<br>content可以指定為null表示不發送數據，其內容可以是DOM對象，輸入流或字符串 SetRequestHeader(<br>String header,<br>String Value) | 設置HTTP請求中的指定頭部header的值為value.此方法需在open方法以后調用，一般在post方式中使用。 getAllResponseHeaders() | 返回包含Http的所有響應頭信息，其中相應頭包括Content-length,date,uri等內容。返回值是一個字符串，包含所有頭信息，其中每個鍵名和鍵值用冒號分開，每一組鍵之間用CR和LF（回車加換行符）來分隔！ getResponseHeader( String header) | 返回HTTP響應頭中指定的鍵名header對應的值 Abort() | 停止當前http請求。對應的XMLHttpRequest對象會復位到未初始化的狀態。 ``Response``代碼示例(javascript)： ~~~javascript //用readystate監聽，滿足if條件 request.onreadystatechange = function(){ if(request.readyState===4&&request.status===200){ //隨便做些啥 request.responseText } } ~~~ jQuery實現AJAX： > $.ajax([settings]) > 1. type:類型，“POST”或 “GET”,默認為“GET” > 2. url : 發送請求的地址 > 3. data：是一個對象，連同請求發送到服務器的數據 > 4. dataType：預期服務器返回的數據類型。如果不指定，jQuery將自動根據HTTP包MIME信息來智能判斷，一般我們采用json格式，可以設置為“json” > 5. success：是一個方法，請求成功后的回調函數。傳入返回后的數據，以及包含成功代碼的字符串 > 6. error：是一個方法，請求失敗時調用此函數。傳入XMLHttpRequest對象。 5. 進度監聽方法1：通過``ProgressEvent``事件接口 ``XMLHttpRequest`` 提供了各種在請求被處理期間發生的事件以供監聽。這包括定期進度通知、錯誤通知（``loadstart``、``progress``、``abort``、``error``、``load``、 ``timeout``、``loadend``、``readystatechange``）等等。支持 DOM 的``progress``事件監測 XMLHttpRequest 傳輸的進度(參看：[使用XMLHttpRequest](https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest))，遵循 Web API 進度事件規范，這些事件實現了 ProgressEvent 接口。 >[warning] 要在請求調用 ``open()`` 之前由``addEventListener()``方法添加``progress``事件。否則``progress``事件將不會被觸發。示例： ~~~JavaScript <script> var req = new XMLHttpRequest(); req.addEventListener("progress", updateProgress, false); req.open(); ... // progress on transfers from the server to the client (downloads) function updateProgress(evt) { if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; ... } else { // Unable to compute progress information since the total size is unknown } } </script> ~~~ 在上例中，progress 事件被指定由 updateProgress() 函數處理，并接收到傳輸的總字節數和已經傳輸的字節數，它們分別在事件對象的``total``和``loaded``屬性里。但是如果``lengthComputable``屬性的值是 false，那么意味著總字節數是未知并且 total 的值為零。 ``progress``事件同時存在于下載和上傳的傳輸過程。下載``progress``事件在 XMLHttpRequest 對象上被觸發，就像上面的例子一樣。上傳``progress``事件在 XMLHttpRequest.upload 對象上被觸發，像下面這樣： ~~~JavaScript <script> var req = new XMLHttpRequest(); req.upload.addEventListener("progress", updateProgress); req.open(); </script> ~~~ 方法2：通過事件處理程序的接口``XMLHttpRequestEventTarget`` 使用事件處理程序的接口``XMLHttpRequestEventTarget``的``XMLHttpRequestEventTarget.onprogress ``屬性。使用該屬性可以定義XMLHttpRequest 完成之前周期性調用的函數。語法： > XMLHttpRequest.onprogress = callback; > >> XMLHttpRequest.onprogress = function (event) { event.loaded; event.total; }; > > event.loaded 在周期性調用中接受到了多少信息。 > event.total 該請求一共有多少信息。示例： ~~~javascript var xhr = new XMLHttpRequest(), method = 'GET', url = 'https://developer.mozilla.org/'; xhr.open(method, url, true); xhr.onprogress = function () { //do something }; xhr.send(); ~~~ #### 2.3.3 XHR使用范例 1. Ajax提交進度顯示 ~~~HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>XMLHttpRequest 上傳文件進度條示例</title> </head> <body> <progress id="upload_progress" value="0" max="100"></progress> <input id="upload_file" type="file" name="upload_file" /> <button id="btn_start">Start</button> <button id="btn_cancel">Cancel</button> <script type="text/javascript" src="/res/lib/jquery-1.11.3.js"></script> <script type="text/javascript"> var xhr = new XMLHttpRequest(); var progressBar = document.getElementById('upload_progress'); $('#btn_start').click(function() { var uploadFile = document.getElementById('upload_file').files[0]; var formData = new FormData(); formData.append('upload_file', uploadFile); // --------------------------------------- // 原生xmlHttpRequest發送 xhr.open('post', '/server_url.php'); xhr.onload = function() { alert('完成！'); }; xhr.onerror = function() { alert('無法連接服務器！'); }; xhr.upload.onprogress = function(progress) { if (progress.lengthComputable) { console.log(progress.loaded / progress.total * 100); progressBar.max = progress.total; progressBar.value = progress.loaded; } }; xhr.upload.onloadstart = function() { console.log('started...'); }; xhr.send(formData); // --------------------------------------- // 使用jQuery發送，通過事件處理程序的接口XMLHttpRequestEventTarget /** $.ajax({ type: "POST", 　　url: "/server_url.php", 　　data: formData , //這里上傳的數據使用了formData 對象　　processData: false, 　　contentType: false, //必須false才會自動加上正確的Content-Type 　　//這里我們先拿到jQuery產生的 XMLHttpRequest對象，為其增加 progress 事件綁定，然后再返回交給ajax使用　　xhr: function() { 　　　　var xhr = $.ajaxSettings.xhr(); 　　　　if (xhr.upload) { 　　　　　　xhr.upload.onprogress = function(progress) { if (progress.lengthComputable) { console.log(progress.loaded / progress.total * 100); progressBar.max = progress.total; progressBar.value = progress.loaded; } }; xhr.upload.onloadstart = function() { console.log('started...'); }; 　　　 } return xhr; 　 } }).done(function(resp) { alert('完成！'); }).fail(function(err) { alert('無法連接服務器！') });*/ // --------------------------------------- // 使用jQuery發送，通過ProgressEvent事件接口 /** $.ajax({ type: "get", url: url, data: { page: "1", size: "10", userId: doctorId }, dataType: "json", contentType: "application/json; charset=utf-8", xhr: function() { var myXhr = $.ajaxSettings.xhr(); if (myXhr.upload){ myXhr.upload.addEventListener('progress', function(e) { if (e.lengthComputable) { var percent = e.loaded / e.total * 100; console.log(percent) }; }, false); }; return myXhr; } }); */ }); $('#btn_cancel').click(function() { xhr.abort(); }); </script> </body> </html> ~~~ 2. 員工信息查詢、新建查詢員工信息，可以通過輸入員工編號查詢員工基本信息。新建員工信息，包含員工姓名，員工編號，員工姓名，員工職位。（需要用php頁面實現查詢員工和新建員工的后臺接口）服務端由php實現瀏覽器端： ~~~ html <html> <h1>員工查詢</h1> <label>請輸入員工編號：</label> <input type="text" id="keyword"/> <button id="search">查詢</button> <p id="searchResult"></p> <h1>員工新建</h1> <label>請輸入員工姓名：</label> <input type="text" id="staffName"/><br> <label>請輸入員工編號：</label> <input type="text" id="staffNumber"/><br> <label>請輸入員工性別：</label> <select id="staffSex"> <option>男</option> <option>女</option> </select><br> <label>請輸入員工職位：</label> <input type="text" id="staffJob"/><br> <button id="save">保存</button> <p id="createResult"></p> </html> <script> document.getElementById("search").onclick = function(){ //發送ajax查詢并處理 //新建XHR var request = new XMLHttpRequest(); //請求 request.open("GET","service.php?number="+document.getElementById("heyword").value); request.send(); //響應，進行事件監聽，獲取onreadystatechange，判斷是否請求成功，請求成功則進行頁面更新 request.onreadystatechange = function(){ if(request.readyState===4){ if(request.status===200){ document.getElementById("searchResult").innerHTML = request.responseText; }else{ alert("發生錯誤:"+request.status); } } } } document.getElementById("save").onclick = function(){ var request = new XMLHttpRequest(); request.open("POST","service.php"); //構造參數 var data = "name=" +document.getElementById("staffName").value +"&number=" +document.getElementById("staffNumber").value +"&sex=" +document.getElementById("staffSex").value +"&job=" +document.getElementById("staffJob").value; request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); request.send(data); request.onreadystatechange = function(){ if(request.readyState===4){ if(request.status===200){ document.getElementById("createResult").innerHTML = request.responseText; }else{ alert("false:"+request.status); } } } } </script> //引入jquery <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script> <script> //jQuery改寫上述JavaScript代碼 //初始化jquery $(document).ready(function(){ //GET請求 $("#search").click(function(){ //$.ajax是對js中代碼的封裝，僅需要配置一些屬性 $.ajax({ type:"GET", url:"service.php?number="+$("#keyword").val(), dataType:"json", success:function(data){ if(data.success){ $("#searchResult").html(data.msg); }else{ $("#searchResult").html("出現錯誤："+data.msg); } }, error:function(jqXHR){ alert("發生錯誤："+jqXHR.status); } }); }); //post請求 $("#save").click(function(){ $.ajax({ type:"POST", url:"service.php", dataType:"json", //不用拼成url格式，直接用json拼寫 data:{ name:$("#staffName").val(), number:$("#staffNumber").val(), sex:$("#staffSex").val(), job:$("#staffJob").val(), }, success:function(data){ if(data.success){ $("#createResult").html(data.msg); }else{ $("#createResult").html("出現錯誤："+data.msg); } }, error:function(jqXHR){ alert("發生錯誤："+jqXHR.status); } }); }); }); </script> ~~~