ajax 实例教程有详细注释

最新推荐文章于 2024-04-26 17:40:26 发布

weixin_30492047

最新推荐文章于 2024-04-26 17:40:26 发布

阅读量72

点赞数

文章标签： php javascript ViewUI

原文链接：http://www.cnblogs.com/superfans/archive/2012/08/11/2633244.html

版权

本文通过一个简单的例子，向大家讲述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>