使用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状态码是不是有效(大于或等于200表示有效的回应,304表示一个缓存响应)。如果收到了一个有效的响应,那么就创建一个新的<script>元素,将它的文本属性设置为从服务器接收到的responseText字符串。这样做实际上会创建一个带有内联代码的<script>元素。一旦新<script>元素被添加到文档,代码将被执行,并准备使用。
这种方法的一个优点是可以下载不立即执行的JavaScript代码。由于代码返回在<script>标签之外,它下载后不会自动执行,这使得可以推迟执行,直到一切都准备好了。另一个优点是,同样的代码在所有现代浏览器中都不会引发异常。
这种方法的主要缺点:JavaScript文件必须与页面放置在同一个域内。正因为如此,大型网站通常不采用XHR脚本注入技术。