全称： 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. C++学习,两个小的语法错误-network-programming

    1.bool CServerSocket::initSocket(const char* ip=NULL,const UINT &port)://会出现默认参数为2的错误 解决方案: //C+ ...

  2. Jar程序使用MyBatis集成阿里巴巴druid连接池

    在写jar程序,而不是web程序的时候,使用mybatis作为持久层,可以集成POOLED连接池,而阿里的druid不能用,确实很郁闷.不过有办法. 首先准备好数据库配置文件 然后对Druid进行一个 ...

  3. UVALive - 3644 X-Plosives (并查集)

    思路:每一个product都可以作一条边,每次添加一条边,如果这边的加入使得某个集合构成环,就应该refuse,那么就用并查集来判断. AC代码: //#define LOCAL #include & ...

  4. 【BZOJ3529】【SDOI2014】 数表

    Time Limit: 10 Sec Memory Limit: 512 MB Description ​ 有一张\(n×m\)的数表,其第i行第j列(\(,1 \le i \leq n,1 \le ...

  5. 【Learning】 莫比乌斯反演

    莫比乌斯反演 ​ 对于两个定义域为非负整数的函数\(F(n)\)和\(f(n)\) ​ 若满足:\(F(n)=\sum\limits_{d|n}f(d)\),则反演得到\(f(n)=\sum\limi ...

  6. day4(while 、练习题)

    一.while ... else 方法 while else 的作用就是,确定循环正确执行完毕,else里面可以提示完成的情况. 二.练习题 1.编译型语言是编译完之后执行,解释性语言是边编译边执行, ...

  7. Linux CentOS 安装MySql以及搭建MySql主从复制

    前言 在之前的博客中,有过几篇都写了关于mysql在linux下的搭建教程,可能以后还会再写,但是又不想重复在写, 于是便想单独将此抽出来,单独写成一篇博客,并详细记录一些安装过程以及遇到的问题解决办 ...

  8. 利用 DirectShow 开发自己的 Filter

    学习directshow已经有几天了,下面将自己的学习心得写下来,希望对其他的人有帮助. Filter实质是个COM组件,所以学习开发Filter之前你应该对com的知识有点了解.Com组件的实质是一 ...

  9. 航空客户价值分析特色LRFMC模型——RFM升级

    本文转载自微信公众号TIpDM. 每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 我们说RFM ...

  10. TypeError: Error #1009: 无法访问空对象引用的属性或方法

    1.错误描述 TypeError: Error #1009: 无法访问空对象引用的属性或方法. at FirstMap/search_clickHandler()[E:\Flash Builder\M ...