我用ajax获取后台数据并展示在前端页面的方法【源码】

我用ajax获取后台数据并展示在前端页面的方法【源码】

WEB前端开发与传统的网页制作最大的一个区别就是：以前的网页制作只是涉及到一些图片制作、切图、然后实现静态页面的布局；而WEB前端开发既然涉及到开发，就会和后台打交道，后台或数据库里边的信息要根据用户的需求显示在前端特定的位置上，供用户查看。所以现在的前端开发不仅仅是会点div、css或者是简单的javascript特效就可以了。

今天为大家说一下如何运用Ajax调用后台数据显示在前端页面。

源码中有详细的注释说明，只要懂得Ajax的基本工作原理和javascript和运行机制，就能看得懂。

下面是我在本地环境中测试的案例源代码：

HTML部分：

NBA球星资料查询

CSS部分：

*{margin:0px;padding:0px}

tr{list-style:none;clear:both;margin-bottom:10px}

table{counter-reset:count;margin:0px}

tr:before{list-style:none;content:counter(count);counter-increment:count

1;display:block;float:left;width:20px;height:20px;background:#ccc;color:#fff;text-align:center;line -height:20px;margin-right:10px}

table tr td{padding:0px 10px;line-height:30px;font-size:14px}

Javascript部分：

var oList = document.getElementById("list");

var oBtn = document.getElementById("btn");

//点击按钮，加载后台内容

oBtn.onclick = function(){

ajax("get","admin.php",true);

}

//把从后台获取到的内容展示在前端

function fn(data){

var data = eval(data);

var dLength = data.length;

//alert(data.constructor);

var str = "";

for(var i=0; i

str +="姓名："+data[i].name+"所属球队："+data[i].belong+""

}

oList.innerHTML = str;

}

//通过ajax获取后台数据

function ajax(method,url,ayne){

var xhr = null;

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

xhr = new ActiveXObject("Microsoft.XMLHTTP");

}

xhr.open(method,url,ayne);

xhr.send();

xhr.onreadystatechange = function(){

if(xhr.readyState==4){

if(xhr.status>=200&&xhr.status<300){

fn(xhr.responseText);

}else{

alert("程序有误！");

}

}

}

}

提示：

因为ajax只能在服务器运行，所以我在本地电脑安装了wampserve环境做的测试。

这里需要一个后台文件，我用的是php，大家如果懂php可以用php做测试。如果不懂后台程序，可以在我的个人博客中，找到100个javascript特效源码下载，然后就会看到这篇文章，可以在那里下载全部源码！