Ajax 经典实例

最新推荐文章于 2018-06-03 09:53:40 发布

原创最新推荐文章于 2018-06-03 09:53:40 发布 · 806 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #xmlhttprequest #input #callback #session #function

js|jQuery 同时被 2 个专栏收录

6 篇文章

订阅专栏

Json

2 篇文章

订阅专栏

使用POST方式的Ajax实例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript">

        var xmlHttp;
        if (typeof XMLHttpRequest != "undefined") {
            xmlHttp = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            var aVersions = ["Msxml2.XMLHttp.5.0", "Msxml2.XMLHttp.4.0", "Msxml2.XMLHttp.3.0", "Msxml2.XMLHttp", "Microsoft.XMLHttp"];
            for (var i = 0; i < aVersions.length; i++) {
                try {
                    xmlHttp = new ActiveXObject(aVersions[i]);
                    break;
                } catch (e) { }
            }
        }


        function userAuthen() {
            var account = document.getElementById("account").value;//账户
            var pwd = document.getElementById("pwd").value;//密码
            var ip = document.getElementById("ip").value;//ip
            var port = document.getElementById("port").value;//port

            var jsonObj = {
                "head": { "type": 2, "length": 0, "session": 0 }, "body": {
                    "account": account, "name": "", "password": pwd,
                    "authmode": 1, "session": 0, "role": 0, "operate": 1, "optResult": false, "errMsg": ""
                }
            };
            var url = "http://localhost/authen";
            alert(url);
            xmlHttp.onreadystatechange = callBack;
            xmlHttp.open("post", url, true);
            xmlHttp.send(jsonObj.toString());
        }

        function callBack(msg) {
            if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                var callbackMsg = xmlHttp.responseText;
                alert("验证结果:"+callbackMsg);
            }
        }
    </script>
</head>
<body style="background-color: lightblue; width: 80%; height: 100%;">
    <div style="text-align: center; vertical-align: middle">
        <div>  账户:<input type="text" name="account" id="account" /></div>
        <div>  密码:<input type="password" name="pwd" id="pwd" /></div>
        <div>服务器IP:<input type="text" name="ip" id="ip" /></div>
        <div>  端口:<input type="text" name="port" id="port" /></div>
        <div>
            <input type="button" value="登录" onclick="userAuthen();" />
        </div>
    </div>
</body>
</html>