Ajax-更新src iframe

Question

html

<iframe id="frames" src="http://www.site1.com.br/" width='100%' height='100%'></iframe>
<button>Next</button> 

javascript

<script>
    var urls = ['http://www.site1.com.br/','http://site2.com.br/', 'http://www.site3.com.br'];
    var frame = $("#frames");
    var index = 0;

    $("button").click(function(){
        if (index < urls.length)
        index++;
        $("#frames").attr("src", urls[index]);
    });
</script>

PHP/AJAX

jQuery('#frames').submit(function(){             
           $.ajax({
            url: 'updateUrl.php',
            type: '???',
            data: ????,
        });     
    })

I think that the array can be in PHP or Jascript, in the above example the array with the urls are in javascript.

By clicking "next" only the iframe must be updated with the contents of the url, without refreshing the entire page.

The html and javascritp are working, but when I click next, updates the page. How do you use Ajax and only the iframe update? And it should be the updateUrl.php file?