您的位置：首页 > 其它

ajax 实例教程有详细注释

2012-08-11 01:21 197 查看

本文通过一个简单的例子，向大家讲述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，转载请注明出处。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航