ajax的基本應用–檢查使用者名稱是否被註冊案例

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

ajax的基本應用--檢查使用者名稱是否被註冊案例，這裡重點介紹ajax的如何使用，我相信大家看了之後可以融會貫通。

參考代碼：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>           <title>使用者註冊</title>        <meta http-equiv="pragma" content="no-cache">    <meta http-equiv="cache-control" content="no-cache">    <meta http-equiv="expires" content="0">        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="This is my page">    <meta http-equiv="content-type" content="text/html;charset=utf-8" />    <!--    <link rel="stylesheet" type="text/css" href="styles.css">    --><script type="text/javascript">        //建立ajax引擎    function getXMLHttpRequest(){        var xmlHttp;        if(window.ActiveXObject){            // Internet Explorer            xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");        }else{            // Firefox, Opera 8.0+, Safari            xmlHttp= new XMLHttpRequest();        }        return xmlHttp;    }        //驗證使用者    var xmlHttpRequest;    function checkUser(){        xmlHttpRequest=getXMLHttpRequest();        //清除緩衝 get 方式提交/*        var url="/ajax/registerProcess.php?time="+new Date()+"&username="+$("username").value;        //var url="/ajax/registerProcess.php?username="+$("username").value;        xmlHttpRequest.open("get",url,true);        //觸發器        xmlHttpRequest.onreadystatechange=check;        xmlHttpRequest.send(null);*/                //post 方式提交        var url="/ajax/registerProcess.php";        var data="username="+$("username").value;        xmlHttpRequest.open("post",url,true);        //post請求需要加入這句        xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");        //觸發器        xmlHttpRequest.onreadystatechange=check;        xmlHttpRequest.send(data);    }    //回呼函數    function check(){        if(xmlHttpRequest.readyState==4){            if(xmlHttpRequest.status=='200'){                //window.alert("OK");                //window.alert("返回使用者名稱"+xmlHttpRequest.responseText);                //$("myres").value=xmlHttpRequest.responseText;                //返回是個對象                /* //處理xml資料                //window.alert(xmlHttpRequest.responseXML);                var mes=xmlHttpRequest.responseXML.getElementsByTagName("mes");                var mes_val=mes[0].childNodes[0].nodeValue;                $("myres").value=mes_val;                */                //處理json資料 使用eval()函數把返回的字串轉成對應的對象                var mes=xmlHttpRequest.responseText;                var mes_obj=eval("("+mes+")");                //window.alert(mes_obj);                $("myres").value=mes_obj.res;            }        }    }    //擷取dom對象    function $(id){        return document.getElementById(id);    }</script>  </head>    <body>    <form action="???" method="post">    使用者名稱字:<input type="text"  name="username1" id="username"><input type="button" onclick="checkUser();" value="驗證使用者名稱">    <input style="border-width: 0;color: red" type="text" id="myres">    <br/>    使用者密碼:<input type="password" name="password"><br>    電子郵件:<input type="text" name="email"><br/>    <input type="submit" value="使用者註冊">    </form>  </body></html>

registerProcess.php

<?php    //這裡兩句話很重要,第一講話告訴瀏覽器返回的資料是xml格式    //header("Content-Type: text/xml;charset=utf-8");    //告訴瀏覽器返回的資料是文字格式設定    header("Content-Type: text/html;charset=utf-8");    //告訴瀏覽器不要快取資料    header("Cache-Control: no-cache");    //接收    //$username=$_GET['username'];    $username=$_POST['username'];        $info="";    if($username=="test1"){        //echo "使用者登入";        //$info.="<res><mes>使用者名稱登入</mes></res>";        $info='{"res":"使用者名稱登入"}';    }else{        //echo "可以註冊";        //$info.="<res><mes>可以註冊</mes></res>";        $info='{"res":"可以註冊"}';    }    echo $info;?>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More