JavaScript优化篇6-XMLHttpRequest Script Injection XHR注入

348 查看

XMLHttpRequest Script Injection XHR脚本注入

另一个以非阻塞方式获得脚本的方法是使XMLHttpRequest(XHR)对象将脚本注入到页面中。此技术首先创建一个XHR 对象,然后下载JavaScript 文件,接着用一个动态<script>元素将JavaScript 代码注入页面。下面是一个简单的例子:

var xhr = new XMLHttpRequest();

xhr.open(“get”, “file1.js”, true);

xhr.onreadystatechange = function(){

if (xhr.readyState == 4){

if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){

var script = document.createElement (“script”);

script.type = “text/javascript”;

script.text = xhr.responseText;

document.body.appendChild(script);

}

}

};

xhr.send(null);

此代码向服务器发送一个获取file1.js 文件的GET 请求。onreadystatechange 事件处理函数检查readyState

是不是4,然后检查HTTP 状态码是不是有效(2XX 表示有效的回应,304 表示一个缓存响应)。如果收到了一个有效的响应,那么就创建一个新的<script>元素,将它的文本属性设置为从服务器接收到的responseText 字符串。这样做实际上会创建一个带有内联代码的<script>元素。一旦新<script>元素被添加到文档,代码将被执行,并准备使用。

这种方法的主要优点是,你可以下载不立即执行的JavaScript 代码。由于代码返回在<script>标签之外(换句话说不受<script>标签约束),它下载后不会自动执行,这使得你可以推迟执行,直到一切都准备好了。另一个优点是,同样的代码在所有现代浏览器中都不会引发异常。

此方法最主要的限制是:JavaScript 文件必须与页面放置在同一个域内,不能从CDNs 下载(CDN 指“内容投递网络(Content Delivery Network)”,。正因为这个原因,大型网页通常不采用XHR 脚本注入技术。


本文出自慕课网,转载请注明出处,侵权必究。