ajax前端异步请求的前端代码块【搬砖笔记】

ajax的前段代码块 ；案例

 

    <form action="" method="POST">

        <!-- 失去焦点事件 onblur: 调用方法，获得这个value值，然后通过方法里面的代码，发送请求从数据库里面检查这个value是否重复 -->

        <p>用户名<input type="text" name="username" id="" οnblur="checkName(this)"/> <span id="message" >${null}</span> </p>

        <p>密码<input type="text" name="password" id="" /> </p>

        <input type="submit" value="注册" >

    </form>

 

 

 

    <script type="text/javascript" >

        function getXhr(){

            var xhr= null;

            //判断浏览器

            if (window.XMLHttpRequest) { //针对的是高版本的其他浏览器

                xhr = new window.XMLHttpRequest();

            } else { //表示低版本的其他浏览器ie

                xhr = new ActiveXObject("Microsoft.XMLHttp");

            }

            return xhr;

        }

 

        function checkName(t){

            //alert(t.value); //得到参数value

            var username = t.value;     //得到参数value

            //获取ajax对象，通过ajax来发送请求进行检索

            var xhr = getXhr();

            //xhr.open("请求方式",请求url);

            xhr.open("get","checkName?name="+username);     //控制器脸处理checkName请求，并接收携带的参数username

            xhr.send() ;//发送请求

            //监听请求发送的状态   触发一个方法；

            xhr.onreadystatechange = function(){

                // xhr.readyState == 4：响应已完成；您可以获取并使用服务器的响应了。

                // xhr.status == 200  200——交易成功

                if (xhr.readyState == 4 && xhr.status == 200) {

                    var result = xhr.responseText;

                    alert(result);                    

                }

            }

        }

    </script>