更改Javascript變量而不刷新

Question

我想知道如何在不刷新頁面的情況下更改javascript中的“image.src”（好吧，不清除畫布）。

我正在考慮使用類似AJAX的東西（我之前從未使用過它），但我不確定這是否是正確的道路。 任何人都可以幫我嗎？

這是我的代碼：

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