这是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); }