码迷,mamicode.com
首页 > Web开发 > 详细

ajax

时间:2016-03-26 10:38:24      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:

read_and_create.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="ajax.js"></script>
<script>
window.onload=function ()
{
var oBtn=document.getElementById(‘btn1‘);
var oUl=document.getElementById(‘ul1‘);

oBtn.onclick=function ()
{
ajax(‘data.txt?t=‘+new Date().getTime(), function (str){
var arr=eval(str);

for(var i=0;i<arr.length;i++)
{
var oLi=document.createElement(‘li‘);

oLi.innerHTML=‘用户名:<strong>‘+arr[i].user+‘</strong>密码:<span>‘+arr[i].pass+‘</span>‘;

oUl.appendChild(oLi);
}
}, function (){
alert(‘失败‘);
});
};
};
</script>
</head>

<body>
<input id="btn1" type="button" value="读取" />
<ul id="ul1">
</ul>
</body>
</html>

Ajax封装函数
function ajax(url, fnSucc, fnFaild)
{
//1.创建Ajax对象
if(window.XMLHttpRequest)
{
var oAjax=new XMLHttpRequest();
}
else
{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}

//2.连接服务器
//open(方法, 文件名, 异步传输)
oAjax.open(‘GET‘, url, true);

//3.发送请求
oAjax.send();

//4.接收返回
oAjax.onreadystatechange=function ()
{
//oAjax.readyState //浏览器和服务器,进行到哪一步了
if(oAjax.readyState==4) //读取完成
{
if(oAjax.status==200) //成功
{
fnSucc(oAjax.responseText);
}
else
{
if(fnFaild)
{
fnFaild(oAjax.status);
}
//alert(‘失败:‘+oAjax.status);
}
}
};
}

 




ajax

标签:

原文地址:http://www.cnblogs.com/theWayToAce/p/5321990.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!