将 jQuery .load 更改为原生 Javascript答案

【问题标题】：Changing jQuery .load into native Javascript将 jQuery .load 更改为原生 Javascript
【发布时间】：2014-02-06 16:14:57
【问题描述】：

我需要在没有 Inet 连接的情况下运行本地项目，因此希望能够将 jQuery 包含到本地文件夹中，这应该没问题。但它是。

可用空间极其有限，cpu功率就是个笑话（它是一个工业机器的小控制单元），即使是60kB的js框架也慢了很多。

这就是为什么我想将以下内容作为原生 Javascript 包含在内：

window.onload = function () {
    var auto_refresh = setInterval(
        function () {
            $('#w1').load('testing.html #w1');
        }, 1000);
};

我读到没有 jQuery 的 AJAX 要复杂得多。有人可以帮忙吗？

【问题讨论】：

Google 可以提供帮助 (XMLHttpRequest)，阅读 jQuery 源代码也可以提供帮助。
Easiest way to retrieve cross-browser XmlHttpRequest的可能重复

标签： javascript ajax

【解决方案1】：

如果你只需要一个更大的库中的一个功能，我建议你看看http://microjs.com，如果你搜索“ajax”，你会在结果的顶部看到这个https://github.com/ForbesLindesay/ajax

我自己没有使用过这个，但它看起来很简单（而且只有 2kb）：

ajax.getJSON("sample.json", function (res) {
  document.getElementById('result').innerHTML = '"' + res.foo + '"';
});

如果 2kb 或使用这样的库不是您想要的，请查看 Stackoverflow 上的这个问题：How to make an AJAX call without jQuery?

【讨论】：

【解决方案2】：

要实现跨浏览器的 ajax 调用，您需要类似 sendRequest 函数https://stackoverflow.com/a/2557268/2842568

【讨论】：

【解决方案3】：

首先，我建议您使用 DOM Ready 事件而不是 .load。像这样的：

if(document.addEventListener)
    document.addEventListener('DOMContentLoaded', init());
else
    document.attachEvent('onreadystatechange', function(){
        if(document.readyState == 'complete') init();
});

function init(){//do something}

对于 AJAX，您可以编写如下内容：

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        // do something on ajax success
    }
}    
xmlhttp.open("GET","info.php",true);
xmlhttp.send();`

【讨论】：