JavaScript优化篇6-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 脚本注入技术。