zoukankan      html  css  js  c++  java
  • ajax 实例教程有详细注释

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

  • 相关阅读:
    hadoop的namenode故障处理方法
    hadoop的checkpoint检查时间参数设置
    hadoop配置历史服务器&&配置日志聚集
    hadoop_批量命令脚本&同步文件脚本
    查看centos操作系统、java_jdk、hadoop位数
    hadoop的namenode启动失败
    shell_语法
    Mycat入门配置_读写分离配置
    VM虚拟机克隆_修改网络
    ssh免密登陆及时间设置
  • 原文地址:https://www.cnblogs.com/superfans/p/2633244.html
Copyright © 2011-2022 走看看