XmlHttpRequest之fetch

XmlHttpRequest对象的理解

XMLHttpRequest对象是基于XML的HTTP请求,是一个浏览器接口,用于与服务器交互，我们通过XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL获取数据，并且虽然名字叫XMLHttpRequest，但实际上可以用于获取任何类型的数据。

XMLHttpRequest对象使用方式

创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

建立http连接

xhr.open('GET', '/login');

发送请求

xhr.send()

获取返回数据

//就等待远程主机做出回应。这时需要监控XMLHttpRequest对象的状态变化，指定回调函数
xhr.onreadystatechange = function(){if ( xhr.readyState == 4 && xhr.status == 200 ) {alert( xhr.responseText );} else {alert( xhr.statusText );}};

readystate

值	状态	描述
0	`UNSENT`	XMLHttpRequest 代理已被创建，但尚未调用 open() 方法
1	`OPENED`	`open()` 方法已经被调用
2	`HEADERS_RECEIVED`	send() 方法已经被调用，响应头也已经被接收
3	`LOADING`	响应体部分正在被接收
4	`DONE`	请求操作已经完成。这意味着数据传输已经彻底完成或失败

终止请求

XMLHttpRequest.abort()
//当一个请求被终止，它的  readyState 将被置为0,并且请求的 status 置为 0。

fetch

概述

Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 的请求和响应，它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

特点

基于标准 Promise 实现，支持 async / await
脱离了 XHR，是 ES 规范中新的实现方式。
语法简洁，更加语义化

问题

fetch 不支持 abort （xhr 有个 xhr.abort 方法能够直接阻断请求）
fetch 没有办法原生监测请求的进度，而 XHR 能够。
fetch 兼容性并不太好，IE 不支持

注意

fetch 只对网络请求报错，对400,500都看成成功的请求，服务器返回400， 500 错误码时并不会 reject，只有网络错误这些致使请求不能完成时， fetch 才会被 reject。须要封装去处理。
fetch 默认不会带 cookie，须要添加配置项： fetch(url, {credentials: ‘include’})

fetch使用

fetch('http://example.com/movies.json').then(response => response.json()).then(data => console.log(data));

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><form id="myform"><input type="text" placeholder="community" id="community"><input type="text" placeholder="parkingLotId" id="parkingLotId"><input type="text" placeholder="name" id="name"><input type="text" placeholder="status" id="status"><button>添加</button></form>
</body>
<script>let form = document.querySelector('#myform')form.onsubmit = async function (e) {e.preventDefault();//阻止事件的默认行为//获取每个输入框的值let community = document.querySelector('#community').valuelet parkingLotId = document.querySelector('#parkingLotId').valuelet name = document.querySelector('#name').valuelet status = document.querySelector('#status').valuelet obj = { community, parkingLotId, name, status }//发起请求   let result = await fetch('/parking-lot/add', {method: 'post',headers: {'Content-Type': 'application/json',},body: JSON.stringify(obj)});let data = await result.json();if (data.status == 201) {alert('添加成功')}}
</script></html>

XmlHttpRequest之fetch相关推荐

XMLHttpRequest、fetch的ajax请求
// XMLHttpRequest请求 function xhr (url, data) {var xhr = new XMLHttpRequest()if (xhr) {xhr.open('POST ...
Springboot第二篇：与前端fetch通信（附springboot解决跨域方法）
说到与前端通信,明白人都知道这章肯定会写两部分的东西啦. 关于后台 ①首先回顾前文,上一章环境搭建如图: ②我们在maven.example.controller下添加一个文件,并附上如图代码: ③: ...
XMLHttpRequest—必知必会
前言做web开发,我们都知道浏览器通过XMLHttpRequest对象进行http通信在实际开发中我们使用的是各种框架封装了的XMLHttpRequest对象,对具体实现往往一知半解.所以为了换框 ...
fetch 不是xhr_XMLHttpRequest和Fetch API，您认为哪种最适合Ajax？
来台湾出差快一个星期了,相比大陆深圳,还是更喜欢内地多点,这边的天气实在不敢恭维,天天下雨,交通汽车尾气太重了,摩托车四处穿插.....休息时间还是呆在家里,写写东西,给大家分享点干货,今天来聊点数据 ...
前端战无渣：”啊！贾克斯？武器大师？Ajax！XMLHttpRequest“
啥都不说了,挺华为就完事了,山姆大叔有点过分了,我相信华为能挺过来现在该我了! 啊,贾克斯???现在从事前端的小伙伴不可能不知道这个,如果真不知道这个词,那我觉得你还称不上前端开发? 此贾克斯非彼贾 ...
ajax跨域请求问题：Access to XMLHttpRequest at……has been blocked by CORS policy: Cross origin requests
背景:本地代码调试时,加载本地资源正常,jquery的AJAX请求服务端资源报错. Access to XMLHttpRequest at '***** ' from origin 'null' ha ...
如何使用js(Javascript)发送http请求,以及xhr和fetch的区别
如何使用js(Javascript)发送http请求你可以使用 JavaScript 内置的 XMLHttpRequest 对象或较新的 fetch API 发送 HTTP 请求.以下是使用每种方法 ...
前端网络基础 - fetch
目录 XMLHttpRequest缺点 fetch的优点 fetch的请求和响应设计 Request Response fetch函数的用法 fetch取消请求 fetch的异常结果 fetch和ax ...
跨域？拒绝说概念(内含demo)
文章列出解决方案以及对应的demo,拒绝说概念,不在稀里糊涂. 什么情况出现跨域? 协议不同域名不同端口不同跨域解决方案 1.同一个主域下不同子域之间的跨域请求 - document.domai ...