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> ~~~