我需要用ajax做到这一点

Question

<style>
    #number{height: 50px; color: #000; }
    </style>


Progress: <div id="number"> </div>
<script type="text/javascript">

    var i = 0;
    d = 1;
function increment(d) {
    if(i<100){
        i+=d;
        document.getElementById('number').innerHTML = i + '&#037;';
    }
    else{
        document.getElementById('number').innerHTML = 'done' ;
    }

}

setInterval('increment(d)', 1000);

</script>

<button type="button" id="button" onclick="d++">Add</button>
<button type="button" onclick="window.location.reload()">Refresh</button>

i'm currently working on a web app with visual studio on asp.net mvc 4. i need to make a partial view that shows a counter that goes from 1 to 100. i added a button that increases by 1 the counter value on every click and another one for refreshing the page. how can i do this using ajax?

Answer 1

AJAX (Asynchronous Javascript and XML) is for making web requests without visible page refreshes. That is not what you should be using this for. You can do this using setTimeout. I have provided a JSFiddle for you to use.

The important bits

In Javascript, you can simulate asynchronous functionality using setTimeout. This function will allow the Javascript to continue executing, and after a given waiting period, will execute the code you provide.

function doSomething() { alert("hello"); }

setTimeout(doSomething, 1000);

This will execute the doSomething() method.

NOTE: You pass the function as a callback. As in doSomething and not doSomething().