原生js怎样获取后台端口数据

本文转载自查看原文 2017-03-21 19:26 4057 javascript

全称： XMLHttpReques

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XMLHttpReques</title>
    <script>
        var xhr = '';
        if (window.XMLHttpRequest) {
            xhr = new window.XMLHttpRequest();
        } else {
            xhr = new ActiveXObject('Microsoft.XMLHttp');
        }
        window.onload = function () {
            document.getElementById("bnt").onclick = function () {
                xhr.open('post','后台端口路径',true);

                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                var username = document.getElementById('username').value;
                var password = document.getElementById('password').value;
                xhr.send( 'memberId='+ username + '&&password=' + password );
                xhr.onreadystatechange = function () {
                    // readyState: 
                    //     0: 请求未初始化
        //                 1: 服务器连接已建立
        //                 2: 请求已接收
        //                 3: 请求处理中
        //                 4: 请求已完成，且响应已就绪
        //             status:
        //                 200: 'ok'
        //                 404: 未找到页面或接口
        //                 xhr.responseText: 后端返回的数据
                        if(xhr.readyState == 4 && xhr.status == 200 ) {
                            document.getElementById('box').innerHTML = xhr.responseText;
                            var json = JSON.parse(xhr.responseText);
                            console.log(json);
                        }

                }
            }
        }
    </script>
</head>
<body>
    <p>账号：<input type="text" id="username"></p>
    <p>密码：<input type="password" name="" id="password"></p>
    <p>&nbsp;&nbsp;&nbsp;<input type="button" value="登录" id="bnt"></p>
    <div id="box"></div>
</body>
</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 教你几行代码实现全平台端口数据的转发 tcpdump查看某个端口数据 Flume案例一【监控端口数据】如何通过SerialPort读取和写入设备COM端口数据 windows 修改端口数据及连接时间 linux C语言tcpserver端口数据转发 js获取后台数据 was修改控制台端口教程基于Python的跨平台端口转发工具 JS获取后台返回的JSON数据