原生ajax写法

<!DOCTYPE html>

<html lang="">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <form>

        <p>

            <label for="">账户：</label>

            <input name="username" type="text">

        </p>

        <p>

            <label for="">密码：</label>

            <input name="password" type="password">

        </p>

        <p>

            <button id="login" type="button">登录</button>

        </p>

    </form>

    <script>

        //查找元素

        var oLogin = document.getElementById('login');

        //事件

        oLogin.onclick = function () {

            //提取value值

            var username = document.querySelector('input[name=username]').value;

            var password = document.querySelector('input[name=password]').value;

           // console.log(username, password)

            //ajax

            var ajax = new XMLHttpRequest;

            ajax.open('POST', '/user/login', true);

            //ajax.open('get','/user/list?pagesize=5&pageindex=1',true);

            //设置头部

            ajax.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')

            //username=moz&password=123

            ajax.send('username=' + username + '&password=' + password);

            //响应/回调函数

            ajax.onreadystatechange = function () {

                if(ajax.readyState==4){

                    var res=JSON.parse(ajax.responseText);

                    console.log(res);

                    if(res.status){

                        location.href='http://www.baidu.com';

                    }

                    else{

                        alert(res.msg);

                    }

                }

            }

        }

    </script>

    <script>
　　//异步传输

   // console.log(1)

   // setTimeout(function(){

   //     console.log(2)

   // },0)

   // console.log(3);

    </script>

</body>

</html>

AJAX数据传输（原生js）的更多相关文章

  1. AJAX初识(原生JS版AJAX和Jquery版AJAX)

    一.什么是JSON 1.介绍 JSON独立于语言,是一种与语言无关的数据格式. JSON指的是JavaScript对象表示法(JavaScript Object Notation) JSON是轻量级的 ...

  2. AJAX请求和跨域请求详解（原生JS、Jquery）

    一.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX = 异步 JavaScript 和 XML,是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数 ...

  3. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  4. 原生js封装ajax：传json，str，excel文件上传表单提交

    由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ...

  5. 原生js实现Ajax

    一般来说,大家可能都会习惯用JQuery提供的Ajax方法,但是用原生的js怎么去实现Ajax方法呢? JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataT ...

  6. 原生js发送ajax请求

    堕落了一阵子了,今天打开博客,发现连登录的用户名和密码都不记得了.2016年已过半,不能再这么晃荡下去了. 参加了网易微专业-前端攻城狮 培训,目前进行到大作业开发阶段,感觉举步维艰.但是无论如何,不 ...

  7. 使用原生js写ajax

    // 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){ if(typeof XMLHttpRequest != "undefined") ...

  8. 表单验证--通过原生js模仿ajax的异步交互

    今天给大家带来个福利,我也是刚刚学习的很实用的一个东西,通过原生js模仿ajax的异步交互. 我的博客只是给那些新手看的大神勿喷,写的不好可留言,请指出. 因为当初自己学的时候一个问题不会找人问,知道 ...

  9. 原生JS实现Ajax及Ajax的跨域请求

      前  言          如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...

  10. 原生JS的Ajax技术

    1.同步和异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待  卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡 ...

随机推荐

  1. swoole怎么连接数据库

    异步连接到MySQL服务器. $serverConfig为MySQL服务器的配置,必须为关联索引数组 $callback连接完成后回调此函数 swoole连接数据库实例: 推荐学习:swoole教程 ...

  2. dll hook 共享内存数据

    unit UnitDll; interface uses Windows; * ; // 文件映射到内存的大小 const HOOK_MEM_FILENAME = 'MEM_FILE'; // 映像文 ...

  3. String 字符串，heredoc，nowdoc

    一个字符串可以用 4 种方式表达: 单引号 双引号 heredoc 语法结构 nowdoc 语法结构(自 PHP 5.3.0 起) 单引号 定义一个字符串的最简单的方法是用单引号把它包围起来(字符 ' ...

  4. 小白需要了解的Ajax和websocket的区别以及使用场景！

    在我们日常使用的互联网产品中,很多都是前后端数据的交互来完成的,说到数据交互就不得不提Ajax和websocket,它们可是数据交互的利器,那么它们分别是什么?websocket与Ajax轮询的区别又 ...

  5. 无车承运前世今生，5G货运管家期待您的加入

    历时三年的无车承运人试点工作结束,从2020年1月1日起,将执行新的暂行<办法>,在这样一个承前启后的阶段,无车承运人的命运如何?网络货运经营者又是何物? 在新赛道下,将迎来什么样的机遇和 ...

  6. SQL基础教程（第2版）第5章 复杂查询：练习题

    /* 下面是解答示例 */ -- 创建视图的语句 CREATE VIEW ViewPractice5_1 AS SELECT product_name, sale_price, regist_date ...

  7. UML-活动图及其建模

    1.目标:UML活动图标示法. 2.定义:一个UML活动图标示一个过程中的多个顺序活动和并行活动.这些活动有助于对业务过程.工作流.数据流和复杂算法进行建模. 3.作用:既能表示控制流又能标示数据流. ...

  8. 寒假day16

    今天优化了管理员界面,人才标签模块遇到了一点问题,部分结果无法显示,正在寻找原因

  9. 开发大型项目必备 98%公司都在用的十佳 Java Web 应用框架

    众所周知,工欲善其事,必先利其器.选择一个好的 Web 应用框架就像一把称手的兵器,可以助大家披荆斩棘. 今天就为大家整理了十佳 Java Web 应用框架,并简单讨论一下它们的优缺点. 第一,大名鼎 ...

  10. 去掉select在苹果手机上的原生样式

    outline: none; -webkit-appearance: none; 该属性会去掉select所有的默认样式,包括下拉箭头,因此需要通过额外的样式控制下拉箭头