js中get与post实现

1、get

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript">
        function checkusername() {
            // 1.获取ajax引擎
            var xhr = getXHR();

            // 2.调用open方法准备发送
            var url = 'checkUsername_ajax?username='+document.getElementById('username').value;
            console.log(url);
            xhr.open('get',url,true);

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

            // 4.指定回调函数
            xhr.onreadystatechange = function () {
                // readystate是4并且status是200
                if(xhr.readyState == 4 && xhr.status == 200){
                    document.getElementById("msg").innerHTML = xhr.responseText;
                }
            };
        }
        
        function getXHR() {
            if(window.XMLHttpRequest)
            {
                return new window.XMLHttpRequest();
            } else {
                return new window.ActiveXObject("Microsoft.XMLHTTP");
            }
        }
    </script>
</head>
<body>
    <form action="" method="get">
        <input type="text" name="username" id="username" onblur="checkusername()"/><br/><div id="msg"></div>
        <input type="text" name="address"/><br/>
        <input type="submit" value="login"/><br/>
    </form>
</body>
</html>

2、post

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript">
        function checkusername() {
            // 1.获取ajax引擎
            var xhr = getXHR();

            // 2.调用open方法准备发送
            xhr.open('post','checkUsername_ajax',true);

            // 3.发送请求 (多个参数使用&符号连接)
            // xhr.send('username='+document.getElementById('username').value+'&address=nj');
            xhr.send('username='+document.getElementById('username').value);

            // 4.指定回调函数
            xhr.onreadystatechange = function () {
                // readystate是4并且status是200
                if(xhr.readyState == 4 && xhr.status == 200){
                    document.getElementById("msg").innerHTML = xhr.responseText;
                }
            };
        }
        
        function getXHR() {
            if(window.XMLHttpRequest)
            {
                return new window.XMLHttpRequest();
            } else {
                return new window.ActiveXObject("Microsoft.XMLHTTP");
            }
        }
    </script>
</head>
<body>
    <form action="" method="get">
        <input type="text" name="username" id="username" onblur="checkusername()"/><br/><div id="msg"></div>
        <input type="text" name="address"/><br/>
        <input type="submit" value="login"/><br/>
    </form>
</body>
</html>

文中checkUsername_ajax是url地址

猜你喜欢