AJAX发送请求(GET方式)

AJAX请求

AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术:

  • 这里介绍一下AJAX发送请求(GET)

首先我们看一下效果

当用户名已经存在时
这里写图片描述

当用户名不存在于数据库里,可以使用时
这里写图片描述

在用户登录时,这是最常见的用法。接下来,我们看看代码吧。

首先,咱们写一个简单的PHP服务

PHP部分

代码如下:

<?php
$db = ['tom', 'mary', 'john'];

//数据库的查询

$uname = $_REQUEST['uname'];
$exists = false;
foreach($db  as  $n){
    if($n === $uname){
        $exists = true;
        break;
    }
}

if($exists){
    echo '1';
}else{
    echo '0';
}
?>

这里仅是一个demo,用于举例。

接着,我们看HTML部分。HTML的代码很简单,就不说了,直接上代码:

HTML部分

代码如下:

    <h1>验证用户名是否正确--AJAX</h1>
    用户名: <input type="text" id="uname"> <span id="uname_ts"></span>
    <br>
    密码名: <input type="password" id="pwd"> <span id="pwd_ts"></span>
    <br>
    验证码: <input type="text">
    <br>
    <button>提交</button>

接下来我们进入AJAX部分。

  • AJAX发送请求分为四个步骤,万变不离其宗:
    1.建立连接
    var xhr;
    if (window.XMLHttpRequest){// 兼容 IE7+, Firefox, Chrome, Opera, Safari
        xhr = new XMLHttpRequest();
     }
    else {// 兼容 IE6, IE5
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }

2.绑定监听函数

        xhr.onreadystatechange = function(){
            //内容
        }

3.创建请求

        xhr.open("GET","01.txt",true)
        // xhr.open("请求方式","test1.txt",true);
        // GET:一般用于查询,所有的内容全部暴露地址栏中,2000来个字符
        // POST:一般用于存储或者修改服务器数据,请求体重,理论上网速好的情况下不限制大小
        // 第二个参数:请求的地址
        // 第三个参数:boolean     默认为true,不写也为true,表示异步,false表示同步

4.发送数据

        xhr.send(null);
        // xmlhttp.send();   发送数据
        // 有数据的时候写在send参数里,没有就不写或者'null'

那AJAX判断用户名就非常简单易懂了

  • 注意:页面需要在服务器上打开,这里用的Apache服务器

AJAX部分

代码如下:

    <script>
        var uname = document.getElementById("uname");
        uname.onblur = function(){
            // console.log(this.value);
            // 此处可以自己写一个正则验证
            if(uname.value == ''){
                return;
            }
            // 如果不是为空,开始发送AJAX请求,开始验证
            // 1.
            var xhr = null;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            // 2.
            xhr.onreadystatechange = function(){
                if(xhr.readyState ===4){   //此时状态已经完成
                    if(xhr.status === 200){   //响应已经完成
                        console.log('已经接收到一个成功的响应');
                        console.log(xhr.responseText);
                        // 有了0和1
                        checkName(xhr.responseText);
                    }else{
                        console.log('接收到一个非成功的ajax响应' + xhr.status)
                    }
                }
            }
            // 3.
            xhr.open("GET","http://192.168.18.112:8080/0327ajax/3.php?uname="+uname.value,true);
            // 4.
            xhr.send(null);
        }

        //checkName方法
        function checkName(txt){
            var uname_ts = document.getElementById("uname_ts");
            if(txt === "1"){
                uname_ts.innerHTML = "该用户名已经被占用";
                uname_ts.style.color = "#f00";
            }else if(txt === "0"){
                uname_ts.innerHTML = "该用户名可以使用";
                uname_ts.style.color = "#0f0";
            }else{
                alert('未知错误' + txt)
            }
        }
    </script>

以上就是AJAX简单的介绍。

阅读更多
文章标签: Web前端 AJAX请求
个人分类: JavaScript
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭