自學JavaScript第四天- JS 進階：AJAX Promise Canvas

• AJAX
• • 使用 XMLHttpRequest
  • 使用 fetch() 方法
  • 處理 AJAX 數據
  • 安全限制
  • 跨域方案 CORS
  • • 前端代碼
• Promise 對象
• • 并行執行異步任務
• Canvas
• • 繪制形狀
  • 繪制文本
  • 其他

AJAX

使用 XMLHttpRequest

現代瀏覽器上寫AJAX主要依靠 XMLHttpRequest 對象

// 定義成功的回調函數 function success(text) {var textarea = documnet.getElementById('test-response-text');textarea.value = text; } // 定義失敗的回調函數 function fail(code) {var textarea = documnet.getElementById('test-response-text');textarea.value = 'Error code:' + code; } var request = new XMLHttpRequest(); // 新建 XMLHttpRequest 對象 // 狀態發生變化時，函數被回調 // 也可以使用添加事件監聽 request.addEventListener('readystatechange', () => {}) request.onreadystatechange = function() { if (request.readyState === 4) { // 成功完成// 判斷響應結果：if (request.status === 200) {// 成功，通過 responseText 拿到響應文本：return success(request.responseText);} else {// 失敗，根據響應碼判斷失敗原因：return fail(request.status);}} else {// HTTP 請求還在繼續} } // 建立發送的請求，true 表示異步發送 request.open('GET', '/api/categories', true); // 設置請求頭 request.setRequestHeader('Content-Type', 'application/json;charset=utf-8'); // 設置請求體(請求數據) let data = {'status':'ready'}; // 因為原生 ajax 發送的數據必須是字符串，所以需要序列化 data = JSON.stringify(data);// 發送請求，在此直線需要定義回調函數 request.send(data);

當創建了 XMLHttpRequest 對象后，要先設置 onreadystatechange 的回調函數。在回調函數中，通常我們只需通過 readyState === 4 判斷請求是否完成(剛連接上服務器為 1 ，向服務器發送數據是 2，服務器傳送數據完成是 4)，如果已完成，再根據 status ===200 判斷是否是一個成功的響應。

XMLHttpRequest 對象的 open() 方法有3個參數，第一個參數指定是 GET 還是 POST ，第二個參數指定URL地址，第三個參數指定是否使用異步，默認是 true ，所以不用寫。如果設置為同步，則瀏覽器會停止響應，呈現“假死”狀態，直到 AJAX 請求完成。

最后調用 send() 方法才真正發送請求。 GET 請求不需要參數， POST 請求需要把body部分以字符串或者 FormData 對象傳進去。

<input type='file' id='upload' onchange='upload(this.files[0])'><script>// 自定義 $ 函數，獲取 dom 對象function $(domID) {return document.getElementById(domID)}function uploadImg(file) {// 判斷文件類型if (file.type.startsWith('image/')) {// 判斷文件大小if (file.size <= 1024 * 1024 * 2) {// 設置上傳地址let url = "/upload";let request = new XMLHttpRequest();// 創建監聽事件request.onload = function (ev) {if (request.status === 200 && request.readyState === 4) {let respText = request.responseText;// 解析為 json 對象let respJson = JSON.parse(respText);console.log(respJson);}};// 創建上傳的數據 form 對象let dataform = new FormData();// 添加字段和內容dataform.append('photo', file);// 建立請求request.open('post', url, true);// 發送請求request.send(dataform)} else {// 文件大小超過限制alert('上傳的圖片大小在2M內');}} else {// 文件類型超過限制alert('只能上傳圖片文件');}} </script>

使用 fetch() 方法

fetch() 是 XMLHttpRequest 的升級版，用于在 JavaScript 腳本里面發出 HTTP 請求。fetch() 的功能與 XMLHttpRequest 基本相同，但有三個主要的差異

• fetch() 使用 Promise，不用回調函數，簡化了寫法
• 采用模塊化設計，API分散在多個對象上(Response、Request、Headers)，使用更合理
• fetch() 通過數據流(Stream對象)處理數據，可以分塊讀取，有利于提高性能，減少內存占用，適用于大文件或網速慢的場景

function login() {// 設置請求參數let option = {method: 'post', // 請求方法body: JSON.stringify({ // 請求體數據'name': '張三','pwd': '123456'}),headers: { 'Content-Type': 'application/json'}, // 請求頭數據mode: 'cors' // 請求模式，使用 cors 跨域（只在跨域時使用）};// 參數1是請求地址，參數2是請求參數fetch('http://text.io/login', option).then(response=>response.json()) // 執行的是 resolve，即成功后的處理方法.catch(function (){// 執行的 reject ，即失敗的處理方法}) }

處理 AJAX 數據

當 AJAX 拿到響應后，可以使用 request.responseText 獲取響應文本。如今大多數數據都是基于 JSON 格式的，所以要使用時也需要將響應文本解析成 JSON 對象。

let json = JSON.parse(request.responseText) // 將響應文本解析成為 JSON 對象

相應的，發送數據時，也需要將數據對象序列化為 JSON 對象才能發送

let json = JSON.stringify(obj);

安全限制

默認情況下，JavaScript在發送AJAX請求時，URL的域名必須和當前頁面完全一致。如果使用別的域名，則會報錯，這是因為瀏覽器的同源策略導致的。完全一致的意思是，域名要相同（ www.example.com 和 example.com 不同），協議要相同（ http 和 https 不同），端口號要相同（默認是 :80 端口，它和 :8080 就不同）。有的瀏覽器口子松一點，允許端口不同，大多數瀏覽器都會嚴格遵守這個限制。

使用 js 請求外域的URL，主要有四種方法

• 通過 flash 插件，現在已經被拋棄
• 通過同源域名下的代理服務器轉發
• 使用 JSONP，但是有個限制，只能使用 GET 請求，并且要求返回 JavaScript。
• 如果瀏覽器支持 HTML5 ，可以使用新的跨域策略 CORS，這也是現在推薦使用的方式。

注：由于同源的安全策略是瀏覽器限制，所以請求的發送和響應是可以進行的，只是瀏覽器不接受罷了。另此策略不是對所有請求均制約，對 XmlHttpRequest 是制約的，對 img、iframe、script 等有 src 屬性的標簽不進行制約(所以這些標簽可以跨域使用)。

跨域方案 CORS

CORS全稱Cross-Origin Resource Sharing，是HTML5規范定義的如何跨域訪問資源。

Origin表示本域，也就是瀏覽器當前頁面的域。當JavaScript向外域發起請求后，瀏覽器收到響應后，首先檢查 Access-Control-Allow-Origin 是否包含本域，如果是，則此次跨域請求成功，如果不是，則請求失敗，JavaScript將無法獲取到響應的任何數據。

可見，跨域能否成功，取決于對方服務器是否愿意給你設置一個正確的 Access-Control-Allow-Origin ，決定權始終在對方手中。

上面這種跨域請求，稱之為“簡單請求”。簡單請求包括GET、HEAD和POST（POST的Content-Type類型 僅限 application/x-www-form-urlencoded 、 multipart/form-data 和 text/plain ），并且不能出現任何自定義頭（例如， X-Custom: 12345 ），通常能滿足90%的需求。

非簡單請求的跨域請求，需要進行預檢。PUT、DELETE以及其他類型如 application/json 的POST請求，在發送AJAX請求之前，瀏覽器會先發送一個 OPTIONS 請求（稱為preflighted請求）到這個URL上，詢問目標服務器是否接受，服務器必須響應并明確指出允許的Method，瀏覽器確認服務器響應的 Access-Control-Allow-Methods 頭確實包含將要發送的AJAX請求的Method，才會繼續發送AJAX，否則，拋出一個錯誤。除此外，還包括檢查是否符合 Access-Control-Allow-Headers 等設置的要求。

由于以 POST 、 PUT 方式傳送JSON格式的數據在REST中很常見，所以要跨域正確處理 POST 和 PUT 請求，服務器端必須正確響應 OPTIONS 請求。

前端代碼

前端使用 XMLHttpRequest 或 jQuery 沒有什么變化，正常發送 ajax 請求即可。對于簡單請求后端會添加 Access-Control-Allow-Origin ，然后返回數據，瀏覽器檢查 Access-Control-Allow-Origin 并決定是否接受此響應。對于非簡單請求會自動發送 options 請求進行預檢，預檢完成后，發送負載請求。即所有工作在后端和瀏覽器進行。另外如果使用 fetch() 方法發送 ajax 請求，則注意需要在請求參數中添加 mode:'cors'，表示使用 CORS 跨域請求。

Promise 對象

在JavaScript的世界中，所有代碼都是單線程執行的。由于這個“缺陷”，導致JavaScript的所有網絡操作，瀏覽器事件，都必須是異步執行。異步執行可以用回調函數實現。異步操作會在將來某個時間觸發一個函數調用(回調)，但是正常的寫法(例如AJAX)很不好看，而且不利于代碼復用，于是就出現了 Promise 對象。

Promise 會“承諾將來會執行”回調函數，Promise有各種開源實現，在ES6中被統一規范，由瀏覽器直接支持。例如 AJAX 可以寫成

// ajax 函數將返回 Promise 對象： function ajax(method, url, data) {var request = new XMLHttpRequest();return new Promise(function (resolve, reject) {request.onreadystatechange = function() {if (request.readyState === 4) {if (request.status === 200) {resolve(request.responseText);} else {reject(request.status);}}};request.open(method, url);request.send(data);}); } // 調用 ajax var log = documnet.getElementById('test-promise-ajax-result'); var p = ajax('GET', '/api/categories'); p.then(function (text) { // 如果 ajax 成功，獲得響應內容log.innerText = text; }).catch(function (status) { // 如果 ajax 失敗，獲得響應代碼log.innerText = 'ERROR:' + status; });

即，將一個異步函數作為參數構建 Promise 對象，此函數有兩個參數 resolve 和 reject，分別表示調用 成功 / 失敗的回調。那么 Promise 對象就可以通過 then 和 catch 方法調用相應的回調函數。

并行執行異步任務

可以同時執行多個異步任務，并等待其執行結果。使用 Pormise.all() 方法，并將需要執行的 promise 任務對象放在數組中傳入即可。

// 同時執行 p1 和 p2, 并在它們都完成后執行 then: Promise.all([p1, p2]).then(function (results) {console.log(results); // 獲得一個各任務結果組成的 Array });

有時候，多個異步任務是為了容錯。比如，同時向兩個URL讀取用戶的個人信息，只需要獲得先返回的結果即可。這種情況下，用 Promise.race() 方法實現，其他后返回的結果會被丟棄。

Canvas

Canvas是HTML5新增的組件，它就像一塊幕布，可以用JavaScript在上面繪制各種圖表、動畫等。沒有Canvas的年代，繪圖只能借助Flash插件實現，頁面不得不用JavaScript和Flash進行交互。有了Canvas，我們就再也不需要Flash了，直接使用JavaScript完成繪制。

一個Canvas定義了一個指定尺寸的矩形框，在這個范圍內我們可以隨意繪制：

<canvas id="test-canvas" width="300" height="200"></canvas>

由于瀏覽器對HTML5標準支持不一致，所以，通常在 <canvas> 內部添加一些說明性HTML代碼，如果瀏覽器支持Canvas，它將忽略 <canvas> 內部的HTML，如果瀏覽器不支持Canvas，它將顯示 <canvas> 內部的HTML:

<!-- HTML代碼 --> <canvas id="test-canvas" width="200" heigth="100"><p>你的瀏覽器不支持Canvas</p> </canvas>

getContext('2d') 方法讓我們拿到一個 CanvasRenderingContext2D 對象，所有的繪圖操作都需要通過這個對象完成。

var ctx = canvas.getContext('2d');

如果需要繪制3D怎么辦？HTML5還有一個WebGL規范，允許在Canvas中繪制3D圖形：

gl = canvas.getContext("webgl");

繪制形狀

Canvas的坐標以左上角為原點，水平向右為X軸，垂直向下為Y軸，以像素為單位，所以每個點都是非負整數。CanvasRenderingContext2D 對象有若干方法來繪制圖形:

varcanvas = documnet.getElementById('test-canvas'),ctx = canvas.getContext('2d'); // 繪制形狀 ctx.clearRect(0, 0, 200, 200); // 擦除(0,0)位置大小為200x200的矩形，擦除的意思是把該區域變透明 ctx.fillStyle = '#dddddd'; // 設置顏色 ctx.fillRect(10, 10, 130, 130); // 把(10,10)位置大小為130x130的矩形涂色 // 利用Path繪制復雜路徑 var path = new Path2D(); // 繪制圓弧路徑，圓心坐標為(75,75),半徑為50,圓弧起點是0,終點的弧度是2倍的PI,逆時針繪畫 path.arc(75, 75, 50, 0, Math.PI*2, true); path.moveTo(110,75); path.arc(75, 75, 35, 0, Math.PI, false); ctx.strokeStyle = '#0000ff'; // 設置畫筆顏色 ctx.stroke(path); // 沿預設的路徑繪畫

繪制文本

繪制文本就是在指定的位置輸出文本，可以設置文本的字體、樣式、陰影等，與CSS完全一致

varcanvas = documnet.getElementById('test-canvas'),ctx = canvas.getContext('2d'); // 繪制文本 ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.shadowBlur = 2; ctx.shadowColor = '#666666'; ctx.font = '24px Arial'; ctx.fillStyle = '#333333'; ctx.fillText('帶陰影的文字', 20, 40);

其他

Canvas除了能繪制基本的形狀和文本，還可以實現動畫、縮放、各種濾鏡和像素轉換等高級操作。如果要實現非常復雜的操作，考慮以下優化方案：

• 通過創建一個不可見的Canvas來繪圖，然后將最終繪制結果復制到頁面的可見Canvas中；
• 盡量使用整數坐標而不是浮點數；
• 可以創建多個重疊的Canvas繪制不同的層，而不是在一個Canvas中繪制非常復雜的圖；
• 背景圖片如果不變可以直接用 <img> 標簽并放到最底層；

詳細的可以查看文檔

Canvas API 文檔

總結

以上是生活随笔為你收集整理的自学JavaScript第四天- JS 进阶：AJAX Promise Canvas的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。