XMLHttpResquest与fetch请求方式的理解

XHR：是基于XML的HTTP请求。ajax就是基于浏览器提供的XMLHttpRequest对象来实现的。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。自从有了ajax之后，我们就可以实现异步的加载网页。

这里也就是指不跟浏览器加载执行网页代码的步伐一致，也就是说在一个网页中需要用户操作来触发执行代码，而不是整个网页代码一次性执行完毕。

var xhr =new XHMHttpRequest();
xhr.open('get',url);
xhr.responseType='json';
xhr.onload=function(){
    console.log(xhr.response);
};
xhr.onerror=function(){
    console.log('something wrong')
};
xhr.send();

同样Fetch完成请求

相比 XHR ，Fetch 结合了现代的编码模式，使用起来更简洁，完成工作所需的实际代码量也更少。

fetch(url).then(function(response){
    return response.json();
}).then(function(jsonData){
    console.log(jsonData);
}).catch(function(){
    console.log('something wrong');

1：fetch和XHR都是是获取远端数据的方式

2：fetch是原生js方法，没有使用XMLHttpRequest对象，使用fetch可以不用引用http的类库即可实现。提供了一种简单，合理的方式来跨网络异步获取资源。

3：（XHR）是一个构造函数，对象用于与服务器交互。通过 XHR可以在不刷新页面的情况下请求特定 URL。即允许网页在不影响用户操作的情况下，更新页面的局部内容。可以用于获取任何类型的数据。

XMLHttpResquest与fetch请求方式的理解

悦读