本文提供了一个详细的Ajax入门示例代码，包括如何创建异步调用对象、加载数据、处理状态变化及更新页面内容等关键步骤。
Ajax入门完整示例代码！
我添加了十分详尽的注释，同时在IDE中调试运行成功，大家可以直接拿去学习和使用
我相信代码是最好的学习工具，呵呵
<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Ajax入门示例</title> </head>
<script type="text/jscript">...
var xmlhttp; function createHTTP()
...{ if(window.ActiveXObject) ...{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE浏览器中创建异步调用对象
} else if(window.XMLHttpRequest) ...{ xmlhttp=new XMLHttpRequest(); //Firefox中创建异步调用对象 } } function startHTTP() ...{ //第一步：根据不同的浏览器创建异步调用对象（XMLHttpRequest） createHTTP(); //第二步：加载数据所在的服务器，Ajax可以从其他网站获取数据，也可以从本地的XML文件中获取 //语法如下：xmlhttp.open(method,url,bool) //method：表示HTTP的请求方法，一共有get、post、head、put、delete五种方法；get是将参数追加到URL中发送，而post是将参数串放在请求体中发送。如果数据处理不改变数据的状态（比如获取数据），就用get；如果编辑、更新数据等改变了数据，则用post。 //URL：表示数据的地址；bool：表示是否使用异步获取，true表示异步，false表示同步 xmlhttp.open("GET","XMLFile.xml",true); //第三步：异步调用服务器状态的变化：状态变化与事件挂钩，注意方法后面不带括号 xmlhttp.onreadystatechange=StateDO; //第四步：发出一个HTTP请求。可以通过在发送请求时设置的参数有选择的挑选数据。如果发送请求时，参数已经放在了请求的URL中，则send方法中，参数可以设置为null或者不写。如果希望把参数放在send方法中，则语法如下：xmlhttp.Send(“id=cgjun”); 由于用Send方法发送参数时，需要考虑很多环境变量，如HTTP Method和服务器的一些设置，所以建议将参数放在请求的URL中 xmlhttp.send(null); } function StateDO() ...{ //判断是否完成状态(异步调用完成时，状态编号为4)；返回的状态代码=200，表示调用成功；返回的状态代码=400，表示没有找到 if(xmlhttp.readystate==4 && xmlhttp.status==200) ...{ document.getElementById("mytext").innerHTML=xmlhttp.responsetext; }
}</script><body><div style="" id="mytext">这是旧数据</div><input type="button" value="更新DIV" onclick="startHTTP()" /></body></html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
