AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
小编是个初学者,这里送给初学者一个实例,希望我们这些编码爱好者都可以在这条路上越走越远
<div id="box"></div>
<button id="btn">更新</button>
#box{
width: 100px;
height: 100px;
background-color: #ccc;
}
var boxobg=document.getElementById('box');
var btnobg=document.getElementById('btn');
btnobg.onclick=function(){
// 声明xml对象
var xml=new XMLHttpRequest();
// 准备好发送的内容
xml.open("GET","text.txt",true);
// 发送
xml.send();
// 监听数据变化
xml.onreadystatechange=function(){
if(xml.readyState==4 && xml.status==200){
boxobg.innerHTML=xml.responseText;
}
}
}
其中text.txt是你的本地文件
然后在浏览器的地址栏输入
加载结果如下图所示
当你点击按钮更新后文字便会被加载进来,显示在box 中
如果要更改内容不用重新加载页面,只需点击更新即可,这就是ajax的好处
如有错误还望大神指出,希望对初学者有帮助。