30分钟学会Ajax编程

最新推荐文章于 2024-05-02 18:12:22 发布

datongge

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量385

点赞数

分类专栏： PHP编程开发 Ajax+php编程 web开发文章标签： ajax编程 ajax+php xmlhttprequest javascript 30分钟学会Ajax编程

本文链接：https://blog.csdn.net/qq_16683167/article/details/32327221

版权

PHP编程开发同时被 3 个专栏收录

1 篇文章 0 订阅

订阅专栏

Ajax+php编程

1 篇文章 0 订阅

订阅专栏

web开发

1 篇文章 0 订阅

订阅专栏

      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 οnlοad="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" οnclick="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

datongge

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
30分钟学会Ajax编程

Ajax （阿贾克斯）名字很是洋气，相当高大上，如此高大上的技术我们不得不认真学习一下。 Ajax+PHP 就是在网页不重新加载的情况下，进行局部刷新，刚开始接触Ajax的时候我11年底，当时看到Ajax是相当的神奇，百思不得其解，其实在不刷新页面的基础上，局部改变一下东西也不只是Ajax，像框架技术、js等都可以改变网页的局部数据。今天为什么学习Ajax呢？ Ajax
复制链接

扫一扫