更改Javascript变量而不刷新

Question

I was wondering how i would go about changing "image.src" in the javascript without refreshing the page(well, without clearing the canvas).

I was thinking about using something like AJAX (i have never used it before) but i'm not sure if that is the right path to go. Could anyone help me out?

Here's my code:

<form>
Image URL:<input type="text" size="50" name="i" value="<?php echo $_REQUEST['i']?>" />
Background Color:<select name="color" >
<?php if($_REQUEST['color'] == "#000000"){ ?>
  <option value="#000000">Black</option>
  <option value="#ffffff">White</option>
  <?php }else{ ?>
    <option value="#ffffff">White</option>
    <option value="#000000">Black</option>
    <?php } ?>
</select>
<input type="submit"/> || Back to the <a href="/cloner/index.php">Home Page</a>
</form>
</div>
        <script type="text/javascript">
        var imageWidthHalf, imageHeightHalf;
        var canvas = document.createElement( 'canvas' );
        var height = window.innerHeight;
            canvas.width = window.innerWidth;
            canvas.height = height;
            canvas.style.display = 'block';
            document.body.appendChild( canvas );
            var context = canvas.getContext( '2d' );
            var image = document.createElement( 'img' );
            image.addEventListener('load', function() {
                imageWidthHalf = Math.floor( this.width / 2 );
                imageHeightHalf = Math.floor( this.height / 2 );
                document.addEventListener( 'mousemove', onMouseEvent, false );
                document.addEventListener( 'touchstart', onTouchEvent, false );
                document.addEventListener( 'touchmove', onTouchEvent, false );
            }, false );
            image.src = "<?php echo $_REQUEST['i']; ?>";
            function onMouseEvent( event ) {
                context.drawImage( image, event.clientX - imageWidthHalf, event.clientY - '50' - imageHeightHalf );
            }
            function onTouchEvent( event ) {
                event.preventDefault();
    for ( var i = 0; i < event.touches.length; i++ ) {
                    context.drawImage( image, event.touches[i].pageX - imageWidthHalf, event.touches[i].pageY - imageHeightHalf );
                }
            }
        </script>

Answer 1

document.querySelector('input[name="i"]').addEventListener('blur', function() {
    image.src = this.value;
}, false);