本文通过一个简单的例子,向大家讲述ajax的使用方法。内附详细注释。一看便会。其乐无穷。
现在,新建2个文件,一个是ajax.php,一个是ajax.html。并且将以下代码分别写到他们中去。
ajax.php中的代码:
<?php $a=intval($_POST['a']);//获取传递过来的a的值,保存在变量$a中 $b=intval($_POST['b']); echo $a+$b; //将结果输出。实际上就是返回给ajax对象了。 ?>
ajax.html中的代码:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <input id="a" type="text" />+<input id="b" type="text" />=<input id="result" type="text" /> <input type="button" value=" 计算 " onclick="calc()" /> <script type="text/javascript"> var ajax=createXMLHttp(); //创建ajax对象的变量 function calc(){ doajax("ajax.php",calc_event,"a="+document.getElementById("a").value+"&b="+document.getElementById("b").value); //上面这条语句,第三个参数,即把2个文本框的值传给脚本程序。比如我们在文本框中输入 2,4,上面的值就是 "a=2&b=4",假如我们输入的是3 6,上面的值就是"a=3&b=6"。这样,后台脚本就能取到我们传递的a和b的值了 } function calc_event(){ //回调函数,处理ajax请求返回的结果 if(ajax.readyState==4){ //一次完整的ajax请求已经成功结束。 if(ajax.status == 200){ //http状态码,返回200为成功完成。404则为找不到网页。 var rs=ajax.responseText; //这里是返回的结果。 document.getElementById("result").value=rs; //把结果写到id为result的文本框中。 } else{ alert("错误,状态码为:"+ajax.status); //网页状态码不为200,说明出现了问题。 } } else{ //ajax请求仍然在处理中,此处不需要写代码,也不需要做任何处理。 } } //************* 下面的函数为公用的,不需要每次ajax都写。*************// function createXMLHttp(){ //本函数用于创建ajax对象,该函数只需要写这一个就行了。 var request; var browser=navigator.appName; //当前浏览器名称 if(browser=="Microsoft Internet Explorer"){ //is IE request=new ActiveXObject("Microsoft.XMLHttp"); return request; } else{ //非IE request=new XMLHttpRequest(); return request; } } //doajax 是用于执行请求的函数。 //url ajax请求的地址。 //events 回调函数,用于接收返回的值。 //poststr ajax 请求时POST的数据。 function doajax(url,events,poststr){//执行ajax提交请求,可以将此函数作为公用的函数,任何一个ajax请求,都使用这个函数。 ajax.open("POST",url,true); ajax.setRequestHeader("Content-Length",length); ajax.setRequestHeader("charset","gb2312"); ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); ajax.onreadystatechange=events; ajax.send(poststr); } </script> </body> </html>
注意:由于php需要以网址的方式访问,所以,您不能双击ajax.html来测试。您可以通过域名的方式,比如 http://code.niuc.org/ajax.html
时间关系,教程写得粗糙,如果您发现有什么不妥之处,请您告之。非常感谢。
本文来源于http://code.niuc.org/thread-2393-1-1.html,转载请注明出处。