ajax知识点补充
Posted Newbie_小白
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax知识点补充相关的知识，希望对你有一定的参考价值。
读取服务器上的数据：
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，js：
function ajax(url, fnSucc, fnFaild)
{
//1.创建Ajax对象
if(window.XMLHttpRequest)
{
var oAjax=new XMLHttpRequest();
}
else
{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
//2.连接服务器（打开和服务器的连接）
oAjax.open(‘GET‘, url, true);
//3.发送
oAjax.send();
//4.接收
oAjax.onreadystatechange=function ()
{
if(oAjax.readyState==4)
{
if(oAjax.status==200)
{
//alert(‘成功了：‘+oAjax.responseText);
fnSucc(oAjax.responseText);
}
else
{
//alert(‘失败了‘);
if(fnFaild)
{
fnFaild();
}
}
}
};
}
data.txt：
[{user: ‘blue‘, pass: ‘123456‘},{user: ‘张三‘, pass: ‘654321‘},{user: ‘李四‘, pass: ‘789456‘},{user: ‘王五‘, pass: ‘7777‘}]
以上是关于ajax知识点补充的主要内容，如果未能解决你的问题，请参考以下文章