原生ajax请求的步骤:

get 请求:

1,创建一个xhr变量

var xhr=new XMhttpRequest();

2,设置请求方式和请求地址

xhr.open('url','http//192.168.213.77:5000/login?username=" + str+ "&password=" + str')

3,把请求发出去;

xhr.send();

4,监听readystatechage

xhr.onreadystatechange = function () {
      // readyState请求准备状态, 共有4个值1-4, 1表示xhr创建  2表示数据处理完成  3表示请求已发送  4表示服务器返回结果,请求完成
      if (xhr.readyState == 4) {
        console.log(xhr.responseText)
        document.body.append(xhr.responseText)
      }
    }
}
 
 

post请求:

1,创建一个xhr变量

 var xhr=new XMhttpRequest();

 

2,设置请求方式和请求地址

xhr.open('url','http//192.168.213.77:5000/register)

在请求发之前,设置请求头中的数据类型为表单数据类型,否则服务器无法解析数据
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
 
第四步: 把请求发出去, 参数是post请求的请求体, 也是键值对结构
    xhr.send("username=" + acc + "&password=" + pas)
 
第五步: 监听readystatechange
    xhr.onreadystatechange = function () {
      // readyState请求准备状态, 共有4个值1-4, 1表示xhr创建  2表示数据处理完成  3表示请求已发送  4表示服务器返回结果,请求完成
      if (xhr.readyState == 4) {
        console.log(xhr.responseText)
        document.body.append(xhr.responseText)
      }
    }

原生的ajax请求的更多相关文章

  1. 使用XMLHttpRequest对象完成原生的AJAX请求

    1.大家眼中的Ajax 说到Ajax,只要有过前端开发经验的童鞋一定都不陌生,大都知道它就是一种与后端之间的通信技术,通过这个神奇的家伙,我们不用像传统表单那样填完信息一点提交就呼啦呼啦跳转了.Aja ...

  2. 原生js ajax请求

    什么是ajax AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. 这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新, ...

  3. 原生的ajax请求----(播放托管到爱奇艺上的视频)

    播放视频 $(function(){ //视频播放 $('.play-icon').click(function () { $.ajax({ type:"get", url: &q ...

  4. 原生JS Ajax 请求

    var username = document.getElementById('username').value; var password = document.getElementById('pa ...

  5. 原生js实现Ajax请求

    总的来说,Ajax是与服务器交换数据并更新部分网页的艺术,在不重新加载整个网页的情况下,异步请求数据并刷新页面.举一个小的例子:Goole搜索页面.当用户在输入框输入关键字的时候,JavaScript ...

  6. 详解Ajax请求(二)——异步请求原理的分析

    在上一文章里,我们分析了同步请求的原理.当浏览器向服务器发送同步请求时,服务处理同步请求的过程中,浏览器会处于等待的状态,服务器处理完请求把数据响应给浏览器并覆盖浏览器内存中原有的数据,浏览器重新加载 ...

  7. 通过XMLHttpRequest,ActiveXObject实现ajax请求

    今天学习了原生的ajax请求.我将涉及到的ajax请求方法封装成了一个对象: var xhr={     getXHR:function(){         var XHR = null;      ...

  8. 原生js发送ajax请求

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

  9. AJAX请求和跨域请求详解(原生JS、Jquery)

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

随机推荐

  1. Docker——常用命令

    常用命令 docker version # 显示docker的版本信息 docker info # 显示docker的系统信息,包括镜像和容器的数量 docker 命令 --help # 帮助命令,中 ...

  2. [SPDK/NVMe存储技术分析]009 - Introduction to RDMA Send | RDMA Send操作概论

    来源: https://zcopy.wordpress.com/ 说明: 本文不是对原文的逐字逐句翻译,而是摘取核心部分以介绍RDMA Send操作(后面凡是提到RDMA send, 都对应于IBA里 ...

  3. C#: .net序列化及反序列化 [XmlElement(“节点名称”)] [XmlAttribute(“节点属性”)] (上篇)

    .net序列化及反序列化 序列化是指一个对象的实例可以被保存,保存成一个二进制串,当然,一旦被保存成二进制串,那么也可以保存成文本串了.比如,一个计数器,数值为2,我们可以用字符串"2&qu ...

  4. Ubuntu一键安装LAMP,LNMP

    参考: https://blog.csdn.net/xueyingqi/article/details/50674078 https://www.cnblogs.com/pengzheng/p/363 ...

  5. 知识点简单总结——Pollard-Rho算法

    知识点简单总结--Pollard-Rho算法 MillerRabin算法 用于对较大(int64)范围内的数判定质数. 原理:费马小定理,二次探测定理. 二次探测定理:若 $ p $ 为奇素数且 $ ...

  6. 是否可以从一个static方法内部调用非static方法?

    不可以.静态成员不能调用非静态成员. 非static方法属于对象,必须创建一个对象后,才可以在通过该对象来调用static方法.而static方法调用时不需要创建对象,通过类就可以调用该方法.也就是说 ...

  7. 如何使用双重检查锁定在 Java 中创建线程安全的单例?

    这个 Java 问题也常被问: 什么是线程安全的单例,你怎么创建它.好吧,在Java 5之前的版本, 使用双重检查锁定创建单例 Singleton 时,如果多个线程试图同时创建 Singleton 实 ...

  8. 详细描述一下 Elasticsearch 搜索的过程?

    想了解 ES 搜索的底层原理,不再只关注业务层面了. 解答: 搜索拆解为"query then fetch" 两个阶段. query 阶段的目的:定位到位置,但不取. 步骤拆解如下 ...

  9. 什么是 FreeMarker 模板?

    FreeMarker 是一个基于 Java 的模板引擎,最初专注于使用 MVC 软件架构进行动态网页生成.使用 Freemarker 的主要优点是表示层和业务层的完全分离.程序员可以处理应用程序代码, ...

  10. Jakarta Java Mail属性参数配置

    前言 Jakarta Mail网址:https://eclipse-ee4j.github.io/mail SMTP协议可匹配的属性:https://eclipse-ee4j.github.io/ma ...