XMLHttpRequest

XHR是项古老的技术,不同的浏览器厂商对其实现方式不同,例如有些浏览器只支持onload事件处理器,有些只支持onreadystatechange事件处理器。

发送Get请求

// 创建XHR请求
let request = new XMLHttpRequest();
// 指定用于从网络请求资源的HTTP方法和URL
request.open('GET', url);
// 设置响应类型,默认'text'
request.responseType = 'application/json';
// (可选)设置请求头
// request.setRequestHeader(header,value);
// 响应已经返回时,将执行onload事件处理器
request.onload = function() {
let resp = request.response;
};
// 发送请求
request.send();

发送POST请求

let request = new XMLHttpRequest();
request.open('POST', url);
request.responseType = 'application/json';
request.onload = function() {
let resp = request.response;
};
request.send("username=lyp&password=123");

Fetch API

发送GET请求

fetch(url)
.then(function(response) {
response.text()
.then(function(text) { });
});

Promises

fetch发送请求,接收响应,返回值是一个Promises;

then运行后续操作,参数为一个函数,这个函数接收1个参数,就是从Promises中解析出来的response;

response的text()方法用于获取响应的纯文本格式,返回值依然是一个Promises,可以接着连接另一个then

then的返回值依然是一个Promises,可以接着连接另一个then,所以,上面的代码等价于下面的代码

fetch(url)
.then(function(response){
return response.text();
})
.then(function(text){ });

response

请求是否成功:response.ok

响应的网络状态和描述性消息:response.status response.statusText

响应主体内容:response.text() response.json() response.blob()

发送POST请求

fetch(url,{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(data),
})
.then(response=>response.json())
.then(data=>console.log(data));

JQuery中的Ajax

axios

JavaScript与服务端进行数据交互的方式的更多相关文章

  1. js与C#服务端 json数据交互

    1.1 服务端返回给前端 返回的数据都放入对象中(根据需求:单个对象,集合,键值对),然后JSON序列化返回给前端.这里可以引用JSON.NET 库,也可以用.NET自带的类库: JavaScript ...

  2. socket网络编程登录实现及多客户端和服务端的数据交互

    一.TCP/IP 客户端 package com.demo.entity; import java.io.Serializable; public class UserInfo implements ...

  3. Android客户端采用Http 协议Post方式请求与服务端进行数据交互(转)

    http://blog.csdn.net/javanian/article/details/8194265

  4. Angular - - $resource 更高端的数据交互

    $resource 创建一个resource对象的工厂函数,可以让你安全的和RESFUL服务端进行数据交互. 需要注入 ngResource 模块.angular-resource[.min].js ...

  5. 前端与后端数据交互的方式之ajax

    前端与后端数据交互的方式之Ajax 对于前端学习而言,CSS+HTML+JavaScript的学习在自我学习的情况下掌握也不是很难,但是想要实现前后端的数据交互在没有指导的情况下学习会是一头雾水.接下 ...

  6. C# 移动端与PC端的数据交互

    小记:针对目前功能越来越强大的智能手机来说,在PC端支持对手机中的用户数据作同步.备份以及恢复等保护措施的应用已经急需完善.不仅要对数据作保护,而且用户更希望自己的手机跟PC能够一体化,以及和远程服务 ...

  7. 《ServerSuperIO Designer IDE使用教程》- 6.增加与阿里云物联网(IOT)对接服务,实现数据交互。发布:v4.2.4 版本

    v4.2.4 更新内容:1.增加了对接阿里物联网平台的服务.下载地址:官方下载   6. 增加与阿里云物联网(IOT)对接服务,实现数据交互  6.1    概述 为了满足业务系统数据上云的要求,Se ...

  8. Diango之通过form表单向服务端发送数据

    通过form表单向服务端发送数据 表单元素 表单:form></form>表单用于向服务器传输数据.另外一种向服务端传输数据的方式为ajax. form属性: action:提交表单 ...

  9. --@angularJS--自定义服务与后台数据交互小实例

    1.myService.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title& ...

随机推荐

  1. Spring context的refresh函数执行过程分析

    今天看了一下Spring Boot的run函数运行过程,发现它调用了Context中的refresh函数.所以先分析一下Spring context的refresh过程,然后再分析Spring boo ...

  2. RHEL高级磁盘管理—Stratis

    2. Stratis 本地存储管理工具,通过Stratis可以便捷的使用Thin Provisioning.Snapshots.Pool-based的管理和监控等高级存储功能. Stratis 基于x ...

  3. Https实践

    https实践 常用端口 ssh 22 telnet 23 ftp 21 rsync 873 http 80 mysql 3306 redis 6379 https 443 dns 53 php 90 ...

  4. 053.Python前端Django框架模板层

    模板层 一 模板语法之变量 在 Django 模板中遍历复杂数据结构的关键是句点字符, 语法: {{ var_name }} [root@node10 mysite]# cat app01/urls. ...

  5. fdisk 磁盘分区命令

    fdisk fdisk磁盘分区命令 -v    打印 fdisk 的版本信息并退出.-l    列出指定设备的分区表信息并退出. 如果没有给出设备,那么使用那些在 /proc/partitions ( ...

  6. GO学习-(25) Go操作Redis实战

    Go操作Redis实战   安装Redis客户端 Go语言中使用第三方库https://github.com/go-redis/redis连接Redis数据库并进行操作.使用以下命令下载并安装: go ...

  7. Go语言的函数05---匿名函数

    package main import ( "fmt" "time" ) //延时执行一个匿名函数 func main071() { fmt.Println(& ...

  8. 查询rman备份信息常用指令

      查询rman备份信息常用指令 ----登陆到rman $rman target / ----以精简的格式查看备份信息 RMAN> list backup of database summar ...

  9. pytest - 打标记:mark功能

    对用例打标记,运行的时候,只运行打标记的用例.如冒烟测试 打标记步骤 1.先注册标记名 在配置文件:pytest.ini 注册标记名,注意必须是这个文件名 标签名加冒号后面可以写说明,必须是英文 2. ...

  10. python基础知识笔记(二) (出现语法以及颜色问题)

    以下是在学习Python时需要尤其要注意的点: 1.程序中出现中文,运行的时候出现如下错误: SyntaxError: Non-UTF-8 code starting with '\xc1' 则是编码 ...