js——Ajax初体验
js——Ajax初体验**前端小白，初步学习，有建议可以留言~github name：kris-sy**
·
js——Ajax初体验
前端小白，有建议可以留言~~github name：kris-sy
Ajax是什么？
Ajax是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
相比于传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。
Ajax = 异步 JavaScript和XML（标准通用标记语言的子集）
Ajax的用法
以下是我经过初步学习自己编写的Ajax.js
/*
ajax有三个参数：url, fnSucc, fnFaild
url：目标文件地址（服务器上的文件名）
fnSucc：ajax如果读取文件成功时所调用的函数
fnFaild:ajax如果读取文件失败时所调用的函数
*/
function ajax(url, fnSucc, fnFaild)
{
//1.创建Ajax对象（有浏览器兼容性问题）
if(window.XMLHttpRequest) //window可以防止Ie低版本调用所没有的变量报错问题（JS特性：用没有定义的变量会报错，用没有定义的属性会报undefined）
{
var oAjax=new XMLHttpRequest(); //支持Chrome，Ie高版本，FF
}
else
{
var oAjax=new ActiveXObject("Microsoft.XMLHTTP"); //支持Ie低版本
}
//2.连接服务器（打开和服务器的连接）
oAjax.open('GET', url, true); //ajax方法open()有三个参数
//第一个是读取方式（get，post等等），该函数大部分情况用get（数据量小，安全性低）
//第二个是文件在服务器的地址
//第三个是同步异步选择，异步（事情一起完成）用true，同步（事情一步步完成）用false，大部分情况下使用异步，同步对网速有很大要求
//3.发送
oAjax.send();
//4.接收
oAjax.onreadystatechange=function () //ajax和服务器有通信时会发生，类似于window.onload()
{
if(oAjax.readyState==4) //判断ajax是否读取文件完成，4的含义是服务器的所有回复已经全部收到并且浏览器已经解析完成，可以使用
{
if(oAjax.status==200) //判断ajax是否读取文件成功，200表示成功，其他表示失败（常见的网页404失败）
{
fnSucc(oAjax.responseText); //ajax如果读取文件成功时所调用的函数，并将URL中的文件内的数据传递给函数的参数。
}
else
{
if(fnFaild) //ajax如果读取文件失败时所调用的函数，给用户提示报错
{
fnFaild();
}
}
}
};
}下面是我尝试的一个例子，ajax从本地服务器上读出arr2.txt文本内的json数据，在这里我用的是自己配置的wampserver3.0.6 localhost（配置方法详情请看下一张博客）
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="ajax.js"></script>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
oBtn.onclick=function ()
{
//URL后面如果加上?t=XXXX,不会更改任何东西，但能解决缓存问题，因此加上new Date() //同时注意文件字符编码问题，需要与HTML中的一样，否则中文会有乱码
ajax('arr2.txt?t='+new Date().getTime(), function (str){
var arr=eval(str);
alert(arr[0].a);
}, function (){
alert('失败');
});
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="读取" />
</body>
</html>
下面的例子还是用ajax动态从localhost读取文件内容，模拟生成用户名密码的列表。
<!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); //eval方法将ajax读出的数据转化为js可以理解的数据类型
for(var i=0;i<arr.length;i++)
{
var oLi=document.createElement('li'); //document.createElement()方法动态生成元素
oLi.innerHTML='用户名：<strong>'+arr[i].user+'</strong>密码：<span>'+arr[i].pass+'</span>';
oUl.appendChild(oLi); //appendChild方法将生成的li元素加入到Ul元素中的后面
}
}, function (){
alert('失败');
});
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="读取" />
<ul id="ul1">
</ul>
</body>
</html>
瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)