como atualizo pagina sem reflesh

[adrsublimacao]

boa noite tenho uma tela de pedido q atualiza de 30 em 30 segundo para buscar novos pedidos so q da reflesh na pagina

<script type="text/javascript">
  setTimeout(function() {
    window.location.reload(1);
  }, 30000);
</script>

<script>
var timeleft = 30;
var downloadTimer = setInterval(function(){
  document.getElementById("progressBar").value = 30 - timeleft;
  timeleft -= 1;
  if(timeleft <= 0){
    clearInterval(downloadTimer);
  }
}, 3000);

</script>

teria como eu atualizar essa pagina sem da reflesh

[Marcelo_2]

tenta aqui:

https://forum.scriptbrasil.com.br/forum/6-ajax-javascript-xml-dom/

[Frank K Hosaka]

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald|Roboto">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$( function() {
    progressbar = $( "#progressbar" ),
    progressLabel = $( ".progress-label" );
    progressbar.progressbar({value: false,
    change: function() {progressLabel.text( progressbar.progressbar( "value" ) + "%" );      },
    complete: function() {setTimeout(2000);
        $("#progressbar").progressbar('option','value',0)}});
    function progress() {
    val = progressbar.progressbar( "value" ) || 0;
    progressbar.progressbar( "value", val + 2 );
    if ( val < 99 ) {setTimeout( progress, 80 );}}
    setTimeout( progress, 2000 ); } );});
</script>
<style>
.ui-progressbar {    position: relative;}
#progressbar {    background: #F5FFFA;}
.ui-progressbar .ui-progressbar-value {  margin: 0;}
.progress-label {    position: absolute;    text-align: center;
    width: 100%;    color: #cccccc;    font-family: 'Open Sans Condensed', sans-serif;
    font-size: 20px;}
.ui-widget-header {    background: #ec2528;}
p {  text-align: center;  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 26px;}
.well {  margin-top: 20px;}
</style>
<div class="container">
<div class="well">
<p>Aguardando novo pedido...</p>
<div id="progressbar"><div class="progress-label">Aguardando...</div></div>
</div></div>