Ajax四个步骤方法封装

*neverGiveUp*

已于 2022-01-22 18:53:09 修改

阅读量675

点赞数 4

文章标签： ajax javascript 前端

于 2022-01-22 16:44:24 首次发布

本文链接：https://blog.csdn.net/qq_48701993/article/details/122639497

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册界面</title>
    <script type="text/javascript" src="myutils.js"></script>
    <script>
        window.onload = function() {
                var username = document.querySelector("#username");
                var email = document.querySelector("#email");
                var phone = document.querySelector("#phone");

                //用户唯一性校验
                username.onblur = function() {
                    var usernameValue = username.value;
                    var type = "get";
                    var url = "checkUsername.php";
                    var params = "uname=" + usernameValue;
                    var dataType = "text";

                    myAjax(type, url, params, dataType, function(result) {
                        var username_result = document.querySelector("#username_result");
                        if (result == "ok") {
                            username_result.innerText = "用户名可以使用";
                        } else {
                            username_result.innerText = "用户名已经被注册";
                        }
                    }, true);


                }
            }
            //邮箱唯一性校验
            //手机唯一性校验
    </script>
</head>

<body>
    <h1>注册界面</h1>
    <form action="">
        用户名：<input type="text" id="username"><span id="username_result"></span><br> 邮箱：
        <input type="text" id="email"><span id="email_result"></span><br> 手机号码：
        <input type="text" id="phone"><span id="phone_result"></span><br>
    </form>
</body>

</html>

checkUsername.php

<?php
    $username=$_GET["uname"];

    if($username == 'zhangsan'){

        echo "username exit!";

    }else{
        echo "ok";
    }

?

myutils.js

//ajax四个步骤封装
 function myAjax(type, url, params, dataType, callback, async) {

     //创建XMLHttpRequest这个对象 需要注意兼容处理
     var xhr = null;
     if (window.XMLHttpRequest) {
         xhr = new XMLHttpRequest();
     } else {
         xhr = new ActiveXObject("Microsoft.XMLHTTP");
     }

     //判断提交方式是post还是get，两者的url格式不相同
     if (type == "get") {
         if (params && params != "") {
             url += "?" + params;
         }

     }
     //准备发生 true 异步； false 同步
     xhr.open(type, url, true);
     if (type == "get") {
         //执行发送
         xhr.send(null);
     } else if (type == "post") {
         //设置xhr的请求头信息，这个步骤仅仅是针对于post请求才有的
         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
         xhr.send(params);
     }

     //设置回调函数
     if (async) {
         xhr.onreadstatechange = function() {
             if (xhr.readState == 4) {
                 if (xhr.readStatus == 200) {
                     var result = null;
                     if (dataType == "json") {
                         result = xhr.responseText;
                         result = JSON.parse(result);
                     } else if (dataType == "xml") {
                         result = xhr.responseXML;
                     } else {
                         result = xhr.responseText;
                     }
                     if (callback) {

                         callback(result);
                     }

                 }
             }
         };
     } else {
         if (xhr.readState == 4) {
             if (xhr.readStatus == 200) {
                 var result = null;
                 if (dataType == "json") {
                     result = xhr.responseText;
                     result = JSON.parse(result);
                 } else if (dataType == "xml") {
                     result = xhr.responseXML;
                 } else {
                     result = xhr.responseText;
                 }
                 if (callback) {
                     callback(result);
                 }

             }
         }
     }
 }

运行结果如下：
在这里插入图片描述
这个运行结果并不是我想要的结果，正确结果应该是当我鼠标离开用户名输入框时，它会在用户名输入框后面提醒我，该用户名是否可以使用。我看了老半天没有看出问题来，求大佬们指点。。。。。

*neverGiveUp*

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Ajax四个步骤方法封装

register.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
复制链接

扫一扫