• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    利用ajax实现简单的注册验证局部刷新实例
    1,ajax(asynchronouse javascript and xml)异步的 javascrip 和xml
    2,(包含了7种技术:javascript xml xstl dom xhtml css xmlhttpRequest)
    3,是一种与服务器语言无关的技术,可以用在(php/jsp/asp.net)
    4,ajax的工作原理: 创建一个ajax引擎->发送数据给服务器--》通过回调函数接收数据---》将数据赋给指定的页面

    下面是注册验证案例register。php是注册页面。registerProcess.php用于接收数据并返回数据

    register.php
    复制代码 代码如下:

    !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">
    !--
    function sendRequest(){
    //创建一个ajax引擎
    var xmlHttpRequest;
    //不同浏览器获取xmlRequest对象方法不一样
    if(window.ActiveXObject){
    xmlHttpRequest = new ActiveXObject("MMMMMictofrt");
    }else{
    xmlHttpRequest = new XMLHttpRequest();
    }
    return xmlHttpRequest;
    }
    var myXmlHttpRequest
    function checkName(){
    myXmlHttpRequest = sendRequest();
    if(myXmlHttpRequest){
    //window.alert("创建成功");
    //第一个参数表示请求方式get.post。第二个参数指定url,对哪个页面发送ajax请求
    //用get方式提交的数据如果没有发生变化的话浏览器将会从缓存中直接提取
    var url = "/ajax_yhyz/registerProcess.php? username=getValue('username').value";
    //1,用这样就可以不从缓存提取了
    //var url = "/ajax_yhyz/registerProcess.php? mytime='new Date()' username=getValue('username').value";
    //2,meta http-equiv="pragma" content="no-cache">告诉浏览器不要缓存
    //window.alert(url); 用于测试url是否成功
    //第三个参数ture 表示异步机制
    myXmlHttpRequest.open("get",url,true);
    //指定回调函数,chul是函数名,表示如果状态发生变化就调用该函数,有四个状态
    myXmlHttpRequest.onreadystatechange = chuli;
    //发送请求,如果是get请求则填写null即可
    //额如果是post请求,则填写实际的数据
    myXmlHttpRequest.send(null);
    }
    }
    function chuli(){
    //window.alert("处理函数被回调");
    if(myXmlHttpRequest.readyState == 4){
    //window.alert("服务器返回"+myXmlHttpRequest.responseText);
    getValue("myres").value = myXmlHttpRequest.responseText;
    }
    }
    function getValue(id){
    //return document.getElementById(id).value; 这样做的话没办法完成局部刷新
    return document.getElementById(id);
    }
    -->

    /script>
    /head>

    body>
    form action="???" method="post">
    用户名字:input type="text" name="username1" id="username" >input type="button" onclick="checkName()" value="验证用户名">
    input type="text" id="myres" />
    br/>
    用户密码:input type="password" name="password">br>
    电子邮件:input type="text" name="email">br/>
    input type="submit" value="用户注册">
    /form>
    form action="???" method="post">
    用户名字:input type="text" name="username2" >

    br/>
    用户密码:input type="password" name="password">br>
    电子邮件:input type="text" name="email">br/>
    input type="submit" value="用户注册">
    /form>
    /body>
    /html>

    regiseterProcess.php
    复制代码 代码如下:

    ?php
    $username=$_REQUEST['username'];
    if($username=="shunping"){
    echo "err";
    }else{
    echo "ok";
    }
    ?>
    您可能感兴趣的文章:
    • JQuery的Ajax请求实现局部刷新的简单实例
    • jQuery+ajax实现局部刷新的两种方法
    • ajax局部刷新一个div下jsp内容的方法
    • jquery ajax 局部刷新小案例
    • ajax局部刷新实例 (三种方法推荐)
    • Ajax实现带有验证码的局部刷新登录界面
    • 纯JS实现AJAX局部刷新功能
    • AJAX的原理—如何做到异步和局部刷新【实现代码】
    • Ajax局部刷新应用案例---简单登录
    • Ajax实现局部刷新的方法实例
    上一篇:ajax异步回调函数中给外部变量赋值的问题探讨
    下一篇:ajax jquery校验用户是否已经注册演示代码
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

    利用ajax实现简单的注册验证局部刷新实例 利用,ajax,实现,简单,的,