30分钟学会Ajax编程

来源：互联网发布：学生管理系统c语言代码编辑：程序博客网时间：2024/06/10 02:45

      Ajax （阿贾克斯）名字很是洋气，相当高大上，如此高大上的技术我们不得不认真学习一下。
      Ajax+PHP 就是在网页不重新加载的情况下，进行局部刷新，刚开始接触Ajax的时候我11年底，当时看到Ajax是相当的神奇，百思不得其解，其实在不刷新页面的基础上，局部改变一下东西也不只是Ajax，像框架技术、js等都可以改变网页的局部数据。今天为什么学习Ajax呢？
      Ajax在登录界面，聊天，实时更新等技术开发时会经常用到，简单说一个小案例：当用户访问一个网站时，想要注册该网站，当用户把所有的信息都填写完之后，点击注册按钮，结果返回来一句话说是该用户已被注册，需重新填写新的用户名！当到了这一步的时候会出现两种情况：一是该用户有可能关掉该网站，二是如果用户还需要登录该网站，选择了重新填写用户名，那么多表单的值需要重新填写一步（当然也可以把用户刚才填写的值保存cookie返回过来，今天先不说这个），这是用户的心情会很糟糕，即使注册成功了，当怀着一个糟糕的心情进入到你的网站，此时他对网站的数据也是相当的大大减分了。
       今天呢，我们就学一下Ajax异步技术，当看到下面的介绍和事例的时候不妨也把案例复制到本地，对里面的数据稍作改动，把技术学为己有，既然我花费时间给大家一个代码一个代码的敲上去，就想学习Ajax的朋友学会，应了一句话：“授人之鱼不如授人之渔”！好了，废话不多说，开始Ajax入门学习：
      首先创建Ajax对象，创建Ajax对象时要注意浏览器的兼容问题，在ie下使用

    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");

      其他浏览器创建Ajax对象：

    httpRequest = new XMLHttpRequest();

    对象创建好之后，想服务器发送请求，XMLHttpRequest 对象提供 open() 和 send() 方法，请求方式有GET 和POST 两种方式，格式分别如下：

    httpRequest.open("GET","loginProcess.php?username=zhang",true);

    httpRequest.send();

    httpRequest.open("POST","loginProcess.php",true);

    httpRequest.send("username=zhang");

    获取服务器的响应：

    document.getElementById("username").innerHTML=httpRequest.responseText;

       一个Ajax的无刷新页面的用户名验证就这样实现了，大家有可能还会有些疑惑，事实上不需要疑惑，按照这个流程，记住对应的几个函数方法就可以搞定了，按照这个流程运用到其他项目中，慢慢的就会对Ajax使用的得心应手。下面来一个实际的案例，可以拿到页面上直接运行，由于是入门篇，没有使用到数据库交互，直接对数据做了指定值判断。事例如下：

login.html：

<span style="font-family:Microsoft YaHei;font-size:14px;color:#00CCCC;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">    <title>Ajax 无刷新验证登录</title>    <style type="text/css">    body{margin: 0 auto;margin-left: 500px;}    .main{text-align: center;float: left;}    </style>    <script type="text/javascript">        function sendRequest(){            //获取用户输入的用户名            var username = $('username').value;            //创建ajax引擎,ajax根据用户使用的浏览器不同，会创建不同的ajax引擎            if (window.ActiveXObject) {                //ie浏览器                http_request=new ActiveXObject("Microsoft.XMLHTTP");            }else{                //别的浏览器                http_request=new XMLHttpRequest();            }            //如果ajax引擎创建ok            if(http_request){                                //如果进来了说明Ajax引擎创建ok                //window.alert("ajax引擎创建ok");                                //请求一个servlet去验证用户是否存在.                var url="loginProcess.php?username="+username;                                //打开url,准备发送,,true表示同步处理                http_request.open("GET",url,true);                                //指定一个函数[回调函数]，处理从服务器返回的结果.                http_request.onreadystatechange=chuli;                                //发送请求                                http_request.send();                            }        }        //处理函数        function chuli(){                        //成功返回            if(http_request.readyState==4){                                //再次判断成功返回页面                if(http_request.status==200){                                        //从ajax引擎中取出结果                    var res=http_request.responseText;                                        if(res=="err"){                        //提示该用户名不可用                        $('myres').style.color="red";                        $('myres').value="该用户不可用吧";                    }else{                                                $('myres').style.color="blue";                        $('myres').value="恭喜，你可使用该用户名吧";                    }                }                            }        }        //获取id的$()方法        function $(id){            return document.getElementById(id);        }    </script></head><body onload="javascript:document.getElementById('username').focus()">    <div style="main">    <h1>欢迎登陆聊天室</h1>        <form action="loginProcess.php" method="post">            用户名：<input type="text" id="username" name="username" /><input type="button" onclick="sendRequest();" value="验证用户名">            <input disabled="disabled" style="border-width: 0 ;" type="text" id="myres"><br/>            密  码：<input type="password" name="passwd"/><br/>            <input type="hidden" value=""/>            <input type="submit" value="登陆聊天室"/>        </form>    </div></body></html></span>

loginProcess.php:

 $username=$_REQUEST['username'];    if($username=="zhang"){        session_start();        $_SESSION['loginuser']=$username;        echo "err";    }else{        session_start();        $_SESSION['loginuser']=$username;        echo "ok";    }

OK , 一个易于入门的ajax+php 无刷新验证用户名的小程序写好了，程序员就是每天的敲打着键盘，每天都有一点的收获，无论你是否感受的到进步，只要每天都学习一下，在无形中都是有进步的，由于新浪编辑器解析代码的关系，可能有点点小bug，希望大家也动手调试一下，调试bug也是一种进步。
分享是一种快乐，本次的小程序仅送给还未搞懂Ajax的朋友，《有问题或对php+Ajax+mysql+js+jQuery+tp框架等问题》欢迎把问题发到我邮箱：347780320@qq.com
新浪微博：www.weibo.com/zlt891216
QQ群：
山东PHP学习交流①群 158899038

0 0