Changing jQuery .load into native Javascript

Question

I need to run a local project without Inet connection and therefore would like to be able to include jQuery into the local folder, which should be no problem. But it is.

The available space is extremely limited and the cpu power is a joke (it is a small control unit for an industrial machine), even the 60kB js framework slows it down a lot.

That is why I would like to include the following as native Javascript:

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

I read that AJAX without jQuery is a whole lot more complicated. Can anyone help?

Google can help (`XMLHttpRequest`) and reading the jQuery sources can also help. — Jon, Jan 17 '14 at 10:55
possible duplicate of [Easiest way to retrieve cross-browser XmlHttpRequest](http://stackoverflow.com/questions/2557247/easiest-way-to-retrieve-cross-browser-xmlhttprequest) — Jon, Jan 17 '14 at 10:57

score 1 · Answer 1 · edited May 23 '17 at 11:57

If you need just a functionality out of a bigger library I suggest you to have a look at http://microjs.com, if you search for "ajax" you will get this at the top of the results https://github.com/ForbesLindesay/ajax

I haven't used this myself but it seems quite straightforward (and it just weights 2kb):

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

If 2kb or using such a library is not what you want have a look at this question on Stackoverflow: How to make an AJAX call without jQuery?

score 0 · Answer 2 · edited May 23 '17 at 10:31

0

to implement ajax calls cross browser you will need something like this sendRequest function https://stackoverflow.com/a/2557268/2842568

edited May 23 '17 at 10:31

Community

1
1

answered Jan 17 '14 at 10:56

Vlad Nikitin

1,929
15
17

score 0 · Answer 3 · answered Jan 17 '14 at 11:03

First I would advice you to use DOM Ready event instead of .load. Something like this:

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

function init(){//do something}

And for AJAX you can write something like this:

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();`

Changing jQuery .load into native Javascript

3 Answers3