自学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的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。