全称： 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 ==  && xhr.status ==  ) {

                            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>
 

原生js怎样获取后台端口数据的更多相关文章

  1. angular js 模拟获取后台的数据

    在这里我们把后台的数据用一个.json文件进行代替. 项目的目录结构如下: puDongLibraryLearning----ui-router-learning ---- data-------pe ...

  2. Thymleaf js直接获取后台传过来的对象或者对象的属性以及map

    简单说明:第一次接触thymleaf模板,对于thymleaf在js中如何获取后台传递过来的值,真的挺简单的,记住就行了 代码: 后台代码: //传递一个org对象给jspublic String t ...

  3. 原生js中获取this与鼠标对象以及vue中默认的鼠标对象参数

    1.通过原生js获取this对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  4. jquery 获取后台实时数据

    第一步.提醒后台处理数据1.$.ajax({}) 提交数据,2.后台返回状态3.后台开始处理数据,并每秒记录状态到 data.json 文件4.前台每秒请求 data.json 文件,直到处理完成 第 ...

  5. Vuex 存储||获取后台接口数据

    如果你对 Vuex 有一定的了解的话呢,可以继续这一篇的学习了,如果没有的话, 建议先看一看我的上一篇 Vuex基础:地址在下面 Vuex的详解与使用 Vuex刷新数据不丢失 这篇接着上一篇: 这篇将 ...

  6. 手机端原生js实现下拉刷新数据

    HTML结构如下: <div class="outerScroller comment"> <div class='scroll comment'> < ...

  7. 前端 ajax 获取后台json数据 解析

    先贴代码 function edit(node) { ).text(); alert(customerid) $.ajax({ type: "post", url: "/ ...

  8. js遍历获取表格内数据方法

    1.一般的表格结构如下 <table> <tr> <td>id</td> <td>name</td> </tr> & ...

  9. 原生JS中获取位置的方案总结

    获取鼠标当前位置 clientY.clientX: 鼠标当前位置 相对于 浏览器可视区域顶部.浏览器可视区域左部 的位置: pageY.pageX: 鼠标当前位置 相对于 文档顶部.文档左部的位置: ...

随机推荐

  1. 软AP的实现------hostapd的编译运行

    最近要给摄像头做一个软ap,让手机能够连上这个热点,从而能够与摄像头进行通信. 1.什么是hostapd : hostapd能够使得无线网卡切换为master模式,模拟AP(通常可以认为是路由器)功能 ...

  2. 《android开发进阶从小工到专家》读书笔记--HTTP网络请求

    No1: 客户端与服务器的交互流程: 1)客户端执行网络请求,从URL中解析出服务器的主机名 2)将服务器的主机名转换成服务器的IP地址 3)将端口号从URL中解析出来 4)建立一条从客户端与Web服 ...

  3. Ajax检测用户名是否已经注册

    程序功能 当用户名输入完成(即用户名输入框失去焦点),利用Ajax检测用户名是否已经注册! 实现过程 利用Ajax向CheckUserServlet发送请求,判断该用户名是否可用.这里只是为了演示Aj ...

  4. uva1347 经典dp

    详细的思路书上面有,有一点要强调的是题意容易理解错:必须严格向右或则向左移动,不能到了第3个点又回到第2个点.否则这个状态方程是不成立的,变成了NP难问题 状态方程: dp[i][j]=min(dp[ ...

  5. Redis 设置开机启动

    1. 将下列代码保存为文件redis, 置于 /etc/init.d 下面 ########################### # chkconfig: 2345 90 10 redis服务必须在 ...

  6. 5.3 存储器、I/O和配置读写请求TLP

    本节讲述PCIe总线定义的各类TLP,并详细介绍这些TLP的格式.在这些TLP中,有些格式对于初学者来说较难理解.读者需要建立PCIe总线中与TLP相关的一些基本概念,特别是存储器读写相关的报文格式. ...

  7. AHB/APB简介

    AHB AHB总线互联结构图 随着深亚微米工艺技术日益成熟,集成电路芯片的规模越来越大.数字IC从基于时序驱动的设计方法,发展到基于IP复用的设计方法,并在SOC设计中得到了广泛应用.在基于IP复用的 ...

  8. windows下python3.4安装lxml提示"Unable to find vcvarsall.bat"

    "https://pypi.python.org/pypi/lxml/3.6.0"从这个网址直接下载对应的lxml包,exe格式的,直接安装,问题解决!

  9. php session 和cookie

    先简单的说明下session和cookie的区别. 1.session存放在服务器的文件中,或者是内存中.而cookie存在客服端. 2.session比cookie安全 3.session存放在服务 ...

  10. 字符串压缩 stringZip

    1,题目描述 通过键盘输入一串小写字母(a~z)组成的字符串.请编写一个字符串压缩程序,将字符串中连续出席的重复字母进行压缩,并输出压缩后的字符串.压缩规则:1. 仅压缩连续重复出现的字符.比如字符串 ...