unable to show in browser using ajax

unable to show in browser using ajax

hi  i am new to jQuery mobile 

 my code is working in iphone/ipad  simulator but not  working in any browser 
 my code is

<!DOCTYPE HTML>
<head>
<meta charset="utf-8" />
<title>My first jQuery Mobile code</title>
<meta name="viewport" content="width=device-width, initial-
         scale=1">
       <link rel="stylesheet" href="JQM/jquery.mobile-1.3.1.css" />
       <script type="text/javascript" src="JQUERY/jquery-1.9.1.js"></script>
       <script type="text/javascript" src="JQM/jquery.mobile-1.3.1.js"></script>
     </head>
     <body>
<div data-role="page">
<div data-role="header"> <h1>morenmoredals</h1>
</div>
<div data-role="content" id="wrapper">
<ul data-role="listview" id="news" data-inset="true" >
</ul>
</div>
<script>
$(document).ready(function(){
refresh();
});
</script>
<script>
function refresh(){
var url = 'http://www.clicksnm.com/clicksnm2/api/Json.php?data=recentCoupons';
jQuery.getJSON(url, function(data) {
var items = [];
$.each(data, function(i, news) {
$('[data-role="listview"]').append( '<li>'+
news.headline+'</li>');
$('[data-role="listview"]').listview('refresh');

});
});
}
</script>
</body>
</html>



please any body help me

thanks in advance