一站式网站建设服务商,四平seo,搜点济南网站建设,外贸推广具体是做什么在上一篇文章中我们介绍了setTimeout是如何结合渲染进程的循环系统工作的#xff0c;那本篇文章我们就继续介绍另外一种类型的WebAPI——XMLHttpRequest。 自从网页中引入了JavaScript#xff0c;我们就可以操作DOM树中任意一个节点#xff0c;例如隐藏/显示节点、改变颜色、…在上一篇文章中我们介绍了setTimeout是如何结合渲染进程的循环系统工作的那本篇文章我们就继续介绍另外一种类型的WebAPI——XMLHttpRequest。 自从网页中引入了JavaScript我们就可以操作DOM树中任意一个节点例如隐藏/显示节点、改变颜色、获得或改变文本内容、为元素添加事件响应函数等等 几乎可以“为所欲为”了。 不过在XMLHttpRequest出现之前如果服务器数据有更新依然需要重新刷新整个页面。而XMLHttpRequest提供了从Web服务器获取数据的能力如果你想要更新某条数据只需要通过XMLHttpRequest请求服务器提供的接口就可以获取到服务器的数据然后再操作DOM来更新页面内容整个过程只需要更新网页的一部分就可以了而不用像之前那样还得刷新整个页面这样既有效率又不会打扰到用户。 关于XMLHttpRequest本来我是想一带而过的后来发现这个WebAPI用于教学非常好。首先前面讲了那么网络内容现在可以通过它把HTTP协议实践一遍其次XMLHttpRequest是一个非常典型的WebAPI通过它来讲解浏览器是如何实现WebAPI的很合适这对于你理解其他WebAPI也有非常大的帮助同时在这个过程中我们还可以把一些安全问题给串起来。 但在深入讲解XMLHttpRequest之前我们得先介绍下同步回调和异步回调这两个概念这会帮助你更加深刻地理解WebAPI是怎么工作的。 回调函数 VS 系统调用栈
那什么是回调函数呢Callback Function 将一个函数作为参数传递给另外一个函数那作为参数的这个函数就是回调函数。简化的代码如下所示 let callback function(){console.log(i am do homework)
}
function doWork(cb) {console.log(start do work)cb()console.log(end do work)
}
doWork(callback)在上面示例代码中我们将一个匿名函数赋值给变量callback同时将callback作为参数传递给了doWork()函数这时在函数doWork()中callback就是回调函数。 上面的回调方法有个特点就是回调函数callback是在主函数doWork返回之前执行的我们把这个回调过程称为同步回调。 既然有同步回调那肯定也有异步回调。下面我们再来看看异步回调的例子 let callback function(){console.log(i am do homework)
}
function doWork(cb) {console.log(start do work)setTimeout(cb,1000) console.log(end do work)
}
doWork(callback)在这个例子中我们使用了setTimeout函数让callback在doWork函数执行结束后又延时了1秒再执行这次callback并没有在主函数doWork内部被调用我们把这种回调函数在主函数外部执行的过程称为异步回调。 现在你应该知道什么是同步回调和异步回调了那下面我们再深入点站在消息循环的视角来看看同步回调和异步回调的区别。理解了这些可以让你从本质上理解什么是回调。 我们还是先来回顾下页面的事件循环系统通过《15 | 消息队列和事件循环页面是怎么“活”起来的》的学习你应该已经知道浏览器页面是通过事件循环机制来驱动的每个渲染进程都有一个消息队列页面主线程按照顺序来执行消息队列中的事件如执行JavaScript事件、解析DOM事件、计算布局事件、用户输入事件等等如果页面有新的事件产生那新的事件将会追加到事件队列的尾部。所以可以说是消息队列和主线程循环机制保证了页面有条不紊地运行。 这里还需要补充一点那就是当循环系统在执行一个任务的时候都要为这个任务维护一个系统调用栈。这个系统调用栈类似于JavaScript的调用栈只不过系统调用栈是Chromium的开发语言C来维护的其完整的调用栈信息你可以通过chrome://tracing/来抓取。当然你也可以通过Performance来抓取它核心的调用信息如下图所示 消息循环系统调用栈记录
这幅图记录了一个Parse HTML的任务执行过程其中黄色的条目表示执行JavaScript的过程其他颜色的条目表示浏览器内部系统的执行过程。 通过该图你可以看出来Parse HTML任务在执行过程中会遇到一系列的子过程比如在解析页面的过程中遇到了JavaScript脚本那么就暂停解析过程去执行该脚本等执行完成之后再恢复解析过程。然后又遇到了样式表这时候又开始解析样式表……直到整个任务执行完成。 需要说明的是整个Parse HTML是一个完整的任务在执行过程中的脚本解析、样式表解析都是该任务的子过程其下拉的长条就是执行过程中调用栈的信息。 每个任务在执行过程中都有自己的调用栈那么同步回调就是在当前主函数的上下文中执行回调函数这个没有太多可讲的。下面我们主要来看看异步回调过程异步回调是指回调函数在主函数之外执行一般有两种方式 第一种是把异步函数做成一个任务添加到信息队列尾部 第二种是把异步函数添加到微任务队列中这样就可以在当前任务的末尾处执行微任务了。
XMLHttpRequest运作机制
理解了什么是同步回调和异步回调接下来我们就来分析XMLHttpRequest背后的实现机制具体工作过程你可以参考下图 XMLHttpRequest工作流程图
这是XMLHttpRequest的总执行流程图下面我们就来分析从发起请求到接收数据的完整流程。 我们先从XMLHttpRequest的用法开始首先看下面这样一段请求代码 function GetWebData(URL){/*** 1:新建XMLHttpRequest请求对象*/let xhr new XMLHttpRequest()/*** 2:注册相关事件回调处理函数 */xhr.onreadystatechange function () {switch(xhr.readyState){case 0: //请求未初始化console.log(请求未初始化)break;case 1://OPENEDconsole.log(OPENED)break;case 2://HEADERS_RECEIVEDconsole.log(HEADERS_RECEIVED)break;case 3://LOADING console.log(LOADING)break;case 4://DONEif(this.status 200||this.status 304){console.log(this.responseText);}console.log(DONE)break;}}xhr.ontimeout function(e) { console.log(ontimeout) }xhr.onerror function(e) { console.log(onerror) }/*** 3:打开请求*/xhr.open(Get, URL, true);//创建一个Get请求,采用异步/*** 4:配置参数*/xhr.timeout 3000 //设置xhr请求的超时时间xhr.responseType text //设置响应返回的数据格式xhr.setRequestHeader(X_TEST,time.geekbang)/*** 5:发送请求*/xhr.send();
}上面是一段利用了XMLHttpRequest来请求数据的代码再结合上面的流程图我们可以分析下这段代码是怎么执行的。 第一步创建XMLHttpRequest对象。 当执行到let xhr new XMLHttpRequest()后JavaScript会创建一个XMLHttpRequest对象xhr用来执行实际的网络请求操作。 第二步为xhr对象注册回调函数。 因为网络请求比较耗时所以要注册回调函数这样后台任务执行完成之后就会通过调用回调函数来告诉其执行结果。 XMLHttpRequest的回调函数主要有下面几种 ontimeout用来监控超时请求如果后台请求超时了该函数会被调用 onerror用来监控出错信息如果后台请求出错了该函数会被调用 onreadystatechange用来监控后台请求过程中的状态比如可以监控到HTTP头加载完成的消息、HTTP响应体消息以及数据加载完成的消息等。
第三步配置基础的请求信息。 注册好回调事件之后接下来就需要配置基础的请求信息了首先要通过open接口配置一些基础的请求信息包括请求的地址、请求方法是get还是post和请求方式同步还是异步请求。 然后通过xhr内部属性类配置一些其他可选的请求信息你可以参考文中示例代码我们通过xhr.timeout 3000来配置超时时间也就是说如果请求超过3000毫秒还没有响应那么这次请求就被判断为失败了。 我们还可以通过xhr.responseType text来配置服务器返回的格式将服务器返回的数据自动转换为自己想要的格式如果将responseType的值设置为json那么系统会自动将服务器返回的数据转换为JavaScript对象格式。下面的图表是我列出的一些返回类型的描述 假如你还需要添加自己专用的请求头属性可以通过xhr.setRequestHeader来添加。 第四步发起请求。 一切准备就绪之后就可以调用xhr.send来发起网络请求了。你可以对照上面那张请求流程图可以看到渲染进程会将请求发送给网络进程然后网络进程负责资源的下载等网络进程接收到数据之后就会利用IPC来通知渲染进程渲染进程接收到消息之后会将xhr的回调函数封装成任务并添加到消息队列中等主线程循环系统执行到该任务的时候就会根据相关的状态来调用对应的回调函数。 如果网络请求出错了就会执行xhr.onerror 如果超时了就会执行xhr.ontimeout 如果是正常的数据接收就会执行onreadystatechange来反馈相应的状态。
这就是一个完整的XMLHttpRequest请求流程如果你感兴趣可以参考下Chromium对XMLHttpRequest的实现点击这里查看代码。 XMLHttpRequest使用过程中的“坑”
上述过程看似简单但由于浏览器很多安全策略的限制所以会导致你在使用过程中踩到非常多的“坑”。 浏览器安全问题是前端工程师避不开的一道坎通常在使用过程中遇到的“坑”很大一部分都是由安全策略引起的不管你喜不喜欢它都在这里。本来很完美的一个方案正是由于加了安全限制导致使用起来非常麻烦。 而你要做的就是去正视这各种的安全问题。也就是说要想更加完美地使用XMLHttpRequest你就要了解浏览器的安全策略。 下面我们就来看看在使用XMLHttpRequest的过程中所遇到的跨域问题和混合内容问题。 1. 跨域问题
比如在极客邦的官网使用XMLHttpRequest请求极客时间的页面内容由于极客邦的官网是www.geekbang.org极客时间的官网是time.geekbang.org它们不是同一个源所以就涉及到了跨域在A站点中去访问不同源的B站点的内容。默认情况下跨域请求是不被允许的你可以看下面的示例代码 var xhr new XMLHttpRequest()
var url https://time.geekbang.org/
function handler() {switch(xhr.readyState){case 0: //请求未初始化console.log(请求未初始化)break;case 1://OPENEDconsole.log(OPENED)break;case 2://HEADERS_RECEIVEDconsole.log(HEADERS_RECEIVED)break;case 3://LOADING console.log(LOADING)break;case 4://DONEif(this.status 200||this.status 304){console.log(this.responseText);}console.log(DONE)break;}
}function callOtherDomain() {if(xhr) { xhr.open(GET, url, true)xhr.onreadystatechange handlerxhr.send();}
}
callOtherDomain()你可以在控制台测试下。首先通过浏览器打开www.geekbang.org然后打开控制台在控制台输入以上示例代码再执行会看到请求被Block了。控制台的提示信息如下 Access to XMLHttpRequest at https://time.geekbang.org/ from origin https://www.geekbang.org has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource.因为 www.geekbang.org 和 time.geekbang.com 不属于一个域所以以上访问就属于跨域访问了这次访问失败就是由于跨域问题导致的。 2. HTTPS混合内容的问题
了解完跨域问题后我们再来看看HTTPS的混合内容。HTTPS混合内容是HTTPS页面中包含了不符合HTTPS安全要求的内容比如包含了HTTP资源通过HTTP加载的图像、视频、样式表、脚本等都属于混合内容。 通常如果HTTPS请求页面中使用混合内容浏览器会针对HTTPS混合内容显示警告用来向用户表明此HTTPS页面包含不安全的资源。比如打开站点 https://www.iteye.com/groups可以通过控制台看到混合内容的警告参考下图 HTTPS混合内容警告
从上图可以看出通过HTML文件加载的混合资源虽然给出警告但大部分类型还是能加载的。而使用XMLHttpRequest请求时浏览器认为这种请求可能是攻击者发起的会阻止此类危险的请求。比如我通过浏览器打开地址 https://www.iteye.com/groups然后通过控制台使用XMLHttpRequest来请求 http://img-ads.csdn.net/2018/201811150919211586.jpg这时候请求就会报错出错信息如下图所示 使用XMLHttpRequest混合资源失效
总结
好了今天我们就讲到这里下面我来总结下今天的内容。 首先我们介绍了回调函数和系统调用栈接下来我们站在循环系统的视角分析了XMLHttpRequest是怎么工作的最后又说明了由于一些安全因素的限制在使用XMLHttpRequest的过程中会遇到跨域问题和混合内容的问题。 本篇文章跨度比较大不是单纯地讲一个问题而是将回调类型、循环系统、网络请求和安全问题“串联”起来了。 对比上一篇文章setTimeout是直接将延迟任务添加到延迟队列中而XMLHttpRequest发起请求是由浏览器的其他进程或者线程去执行然后再将执行结果利用IPC的方式通知渲染进程之后渲染进程再将对应的消息添加到消息队列中。如果你搞懂了setTimeout和XMLHttpRequest的工作机制后再来理解其他WebAPI就会轻松很多了因为大部分WebAPI的工作逻辑都是类似的。
