JavaScript与服务端进行数据交互的方式
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与服务端进行数据交互的方式的更多相关文章
- js与C#服务端 json数据交互
1.1 服务端返回给前端 返回的数据都放入对象中(根据需求:单个对象,集合,键值对),然后JSON序列化返回给前端.这里可以引用JSON.NET 库,也可以用.NET自带的类库: JavaScript ...
- socket网络编程登录实现及多客户端和服务端的数据交互
一.TCP/IP 客户端 package com.demo.entity; import java.io.Serializable; public class UserInfo implements ...
- Android客户端采用Http 协议Post方式请求与服务端进行数据交互(转)
http://blog.csdn.net/javanian/article/details/8194265
- Angular - - $resource 更高端的数据交互
$resource 创建一个resource对象的工厂函数,可以让你安全的和RESFUL服务端进行数据交互. 需要注入 ngResource 模块.angular-resource[.min].js ...
- 前端与后端数据交互的方式之ajax
前端与后端数据交互的方式之Ajax 对于前端学习而言,CSS+HTML+JavaScript的学习在自我学习的情况下掌握也不是很难,但是想要实现前后端的数据交互在没有指导的情况下学习会是一头雾水.接下 ...
- C# 移动端与PC端的数据交互
小记:针对目前功能越来越强大的智能手机来说,在PC端支持对手机中的用户数据作同步.备份以及恢复等保护措施的应用已经急需完善.不仅要对数据作保护,而且用户更希望自己的手机跟PC能够一体化,以及和远程服务 ...
- 《ServerSuperIO Designer IDE使用教程》- 6.增加与阿里云物联网(IOT)对接服务,实现数据交互。发布:v4.2.4 版本
v4.2.4 更新内容:1.增加了对接阿里物联网平台的服务.下载地址:官方下载 6. 增加与阿里云物联网(IOT)对接服务,实现数据交互 6.1 概述 为了满足业务系统数据上云的要求,Se ...
- Diango之通过form表单向服务端发送数据
通过form表单向服务端发送数据 表单元素 表单:form></form>表单用于向服务器传输数据.另外一种向服务端传输数据的方式为ajax. form属性: action:提交表单 ...
- --@angularJS--自定义服务与后台数据交互小实例
1.myService.html: <!DOCTYPE HTML><html ng-app="app"><head> <title& ...
随机推荐
- 如何使用GoLand debug
debug 常用操作 /* 如何使用 goland debug goroutine */ package main import ( "fmt" "runtime&quo ...
- 如何设计一个高性能 Elasticsearch mapping
目录 前言 mapping mapping 能做什么 Dynamic mapping dynamic=true dynamic=runtime dynamic=false dynamic=strict ...
- [bug] MySQL: The user specified as a definer ('root'@'%') does not exist
错误1 gciantispider.getchildlst does not exist 原因 getchildlst创建失败 解决 在mysql中设置mysqld中加上log_bin_trust_f ...
- [转载]好好好centos7 安装 KVM
centos7 安装 KVM 2019-04-03 09:58:24 34 0 0 一.基础环境准备 centos7.X 最小环境安装 关闭selinux # vi /etc ...
- centos 7安装freescale交叉编译工具链
方法1:可以直接下载gcc包,把文件夹放到/usr/local下即可,然后修改PATH环境变量,既可以使用 方法2:可以下载.rpm包,在本地进行安装,下载地址为(http://www.panduod ...
- 安装JDK 常见错误解决(Day_07)
在cmd中输入java -version或者java 或出现以下错误: 原因一:可能是你的JDK装的时间比较早,导致环境变量中的Path(此电脑->右击属性->高级系统设置->环境变 ...
- Java 将Excel转为SVG的方法
本文以Java示例展示如何将Excel文档转为SVG格式.通过本文中的方法,在将Excel转为SVG时,如果sheet工作表中手动设置了分页,则将每个分页的内容单独保存为一个svg文件,如果sheet ...
- 5分钟安装docker教程
Centos安装docker需要操作系统是 CentOS 7 or 8,必须启用centos extras存储库.默认情况下,此存储库处于启用状态,但如果已禁用它,则需要重新启用它. 卸载旧版本 老版 ...
- PHP转JAVA开发30分钟实战攻略
服务端开发中,有很多知识是相通的,例如mysql,redis,http协议等. 基于这些基础,在编程语言上的转变并不困难. 本文主要从下面几点出发,讲述如何快速从php开发转为java开发: 使用框架 ...
- CVPR目标检测与实例分割算法解析:FCOS(2019),Mask R-CNN(2019),PolarMask(2020)
CVPR目标检测与实例分割算法解析:FCOS(2019),Mask R-CNN(2019),PolarMask(2020)1. 目标检测:FCOS(CVPR 2019)目标检测算法FCOS(FCOS: ...