Ajax不重新加载整个网页的情况下,对网页的某部分进行更新实例

来源:互联网 发布:手柄 知乎 编辑:程序博客网 时间:2024/05/18 12:42

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的好处

如有错误还望大神指出,希望对初学者有帮助。

阅读全文
0 0