這是Ajax應用的一個小實例：在頁面中自動刷新功能，比如整個新聞頁面中某一個小版塊的內容，無需刷新整個頁面就可以自動更新：
1、首先創建簡單的頁面元素：
<body>
<input type="button" value="按鈕" id="btn" />
<ul id="ul1"></ul>
</body>
2、准備一個php文件get_news.php，將新聞數據放到里面：
<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$news = array(
array('title'=>'范冰冰贊馮小剛比以前更溫柔','date'=>'20161123'),
array('title'=>'范冰冰贊馮小剛比以前更溫柔','date'=>'20161123'),
array('title'=>'范冰冰贊馮小剛比以前更溫柔','date'=>'20161123'),
array('title'=>'范冰冰贊馮小剛比以前更溫柔','date'=>'20161123'),
array('title'=>'范冰冰贊馮小剛比以前更溫柔','date'=>'20161123'),
array('title'=>'拉拉看電視風口浪尖何瑞方法','date'=>'20161123'),
array('title'=>'拉拉看電視風口浪尖何瑞方法','date'=>'20161123'),
);
echo json_encode($news);
3、方法一：不使用Ajax封裝函數，直接用步驟實現：
var oBtn = document.getElementById('btn'); oBtn.onclick = function(){ function ajax(){ var xhr = null; try{ xhr = new XMLHttpRequest(); }catch(e){ xhr = new ActiveXObject('Microsoft.XMLHTTP'); }; xhr.open('get','get_news.php',true); xhr.send(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if( xhr.status == 200){ // alert(xhr.responseText); var oDate = JSON.parse( xhr.responseText ); var oUl = document.getElementById('list'); var str = ''; for(var i=0; i<oDate.length; i++){ str += '<li><a href="#">'+ oDate[i].title +'</a>[<span>'+ oDate[i].date
+'</span>]</li>' } oUl.innerHTML = str; }else{ alert('出錯了，Error:' + xhr.status) }; }; }; }; setInterval(function(){ ajax(); },1000); }
4、還有一個簡單點的辦法，引入封裝的Ajax函數，http://www.cnblogs.com/angelatian/p/6102286.html，然后傳入四個參數，注意獲取過來的數據需要使用JSON.parse()方法進行解析才能進行后續操var oBtn = document.getElementById('btn') oBtn.onclick = function() {
ajax('get','get_news.php','',function(data) { var data = JSON.parse( data ); var oUl = document.getElementById('ul1'); var html = ''; for (var i=0; i<data.length; i++) { html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date
+'</span>]</li>'; } oUl.innerHTML = html; }); setInterval(function() { ajax('get','getNews.php','',function(data) { var data = JSON.parse( data ); var oUl = document.getElementById('ul1'); var html = ''; for (var i=0; i<data.length; i++) { html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date
+'</span>]</li>'; } oUl.innerHTML = html; }); }, 1000); }