axios学习及分析源码和fetch、ajax请求
1.axios前端请求最火的ajax库
特征：
- axios在客户端，可以通过ajax发送请求，node.js通过http发送请求
- 支持promise请求
- 请求和响应做拦截设置
- 响应数据转换
- 自动转换成JSON数据
- XSRF拦截
- 对响应和请求的数据转换
2.axios与Axios
axios是Axios的实例，传入的参数，Axios定义的方法通过extend添加到createInstance构造函数上，通过axios=new createInstance()创建axios它既是一个函数，也是一个对象。
axios.js为入口文件，utils为工具文件，defaults.js为默认的配置文件。core为axios为核心文件，Axios中定义拦截请求和配置方法和定义相关配置。adapters为适配器，配置http.js和xhr.js。cancel为取消文件的配置。
--------------------------------------------------------------------------------------------------------------------------------------------------------
fetch
1. 定义：Fetch 的核心在于对 HTTP 接口的抽象，包括 Request，Response，Headers，Body，以及用于初始化异步请求的 global fetch。
fetch
1.Fetch是基于promise实现的，也可以结合async/await。
2.fetch请求默认是不带cookie的，需要设置fetch（URL，{credentials:’include’})。
3.Credentials有三种参数：same-origin，include，*
4.服务器返回400 500 状态码时并不会reject，只有网络出错导致请求不能完成时，fetch才会被reject。
5.所有版本的 IE 均不支持原生 Fetch。
fetch是widow的一个方法；
5.fetch api 可以跨域。也可以通过CORS进行设置，进行跨域传输。
6.fetch不支持超时timeout处理.解决方法：1.setTimeout 2.Promise.race()
7.fetch不支持jsonp
8.fetch不支持progress事件
针对Fetch的兼容性问题：采用fetch polyfill。
Fetch默认不带cookie,则在需要验证的信息的时候。可以设置credentials，
omit: 默认值，忽略cookie的发送
same-origin: 表示cookie只能同域发送，不能跨域发送
include: cookie既可以同域发送，也可以跨域发送
2.与ajax的区别
- 当接收到一个错误的HTTP状态码时，从Fetch返回的promise不会被标记为reject,即使相应的HTTP的状态为404或500。仅有网络故障时或者请求被阻止时，才会标记为reject
- fetch不会发送cookies。除非你使用了credentials的初始化选项
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ajax:
是XMLHTTPRequest的一个实例；
只有当状态为200或者304时才会请求成功；
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
//1、创建ajax对象
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//2、等待数据响应
//必须在调用open()方法之前指定onreadystatechange事件处理程序才能确保跨域浏览器兼容性 //问题
//只要readyState属性的值有变化，就会触发readystatechange事件
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
//判断本次下载的状态码都是多少 304表示请求的资源没有被修改
if((xhr.status >= 200 && xhr.status<300)||xhr.status ==304){
alert(xhr.responseText);
}else{
alert("Error:" + xhr.status);
}
}
}
//3、调用open
xhr.open("get", "1.get.php?username=yyy&age=19&password=123abc", true);
//4、调用send
xhr.send();
}
}
post请求
//post
<script>
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
//1、创建ajax对象
var xhr = null;
try{
xhr = new XMLHttpRequest();
}catch(error){
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//2、等待数据响应
//必须在调用open()方法之前指定onreadystatechange事件处理程序才能确保跨域浏览器兼容性 //问题
//只要readyState属性的值有变化，就会触发readystatechange事件
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
//判断本次下载的状态码都是多少 304表示请求的资源没有被修改
if((xhr.status >= 200 && xhr.status<300)||xhr.status ==304){
alert(xhr.responseText);
}else{
alert("Error:" + xhr.status);
}
}
}
//3、调用open
xhr.open("post", "1.post.php", true);
//4.必须在send方法之前，去设置请求格式
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
//5、调用send
// post请求必须通过send方法进行提交
//username=yyy&age=19&password=123abc qureystring
//?username=yyy&age=19&password=123abc search
xhr.send("username=yyy&age=19&password=123abc");
}
}
</script>
1. 通过在后台与服务器进行少量的数据交换，Ajax可以使网页实现异步更新。
2. AJAX的优缺点
(1).AJAX的优点
<1>.无刷新更新数据。
AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。
<2>.异步与服务器通信。
AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。
<3>.前端和后端负载平衡。
AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。
<4>.基于标准被广泛支持。
AJAX 基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟，一些简化 Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。
<5>.界面与应用分离。
Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。
(2).AJAX的缺点
<1>.AJAX干掉了Back和History功能，即对浏览器机制的破坏。
在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。
后 退按钮是一个标准的web站点的重要功能，但是它没法和js进行很好的合作。这是Ajax所带来的一个比较严重的问题，因为用户往往是希望能够通过后退来 取消前一次操作的。那么对于这个问题有没有办法？答案是肯定的，用过Gmail的知道，Gmail下面采用的Ajax技术解决了这个问题，在Gmail下 面是可以后退的，但是，它也并不能改变Ajax的机制，它只是采用的一个比较笨但是有效的办法，即用户单击后退按钮访问历史记录时，通过创建或使用一个隐 藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）
但是，虽然说这个问题是可以解决的，但是它所带来的开发成本是非常高的，并与Ajax框架所要求的快速开发是相背离的。这是Ajax所带来的一个非常严重的问题。
一 个相关的观点认为，使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的解决方案也已出现，大部分都使用URL片断标识符（通常被称为 锚点，即URL中#后面的部分）来保持跟踪，允许用户回到指定的某个应用程序状态。（许多浏览器允许JavaScript动态更新锚点，这使得Ajax应 用程序能够在更新显示内容的同时更新锚点。）这些解决方案也同时解决了许多关于不支持后退按钮的争论。
<2>.AJAX的安全问题。
AJAX 技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比 以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知 的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。
<3>.对搜索引擎支持较弱。
对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。
<4>.破坏程序的异常处理机制。
至 少从目前看来，像Ajax.dll，Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制的。关于这个问题，曾在开发过程中遇到过，但是查了一 下网上几乎没有相关的介绍。后来做了一次试验，分别采用Ajax和传统的form提交的模式来删除一条数据……给我们的调试带来了很大的困难。
<5>.违背URL和资源定位的初衷。
例如，我给你一个URL地址，如果采用了Ajax技术，也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。
<6>.AJAX不能很好支持移动设备。
一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax，比如说我们在手机的浏览器上打开采用Ajax技术的网站时，它目前是不支持的。
<7>.客户端过肥，太多客户端代码造成开发上的成本。
编写复杂、容易出错 ；冗余代码比较多（层层包含js文件是AJAX的通病，再加上以往的很多服务端代码现在放到了客户端）；破坏了Web的原有标准。
3. AJAX注意点及适用和不适用场景
(1).注意点
Ajax 开发时，网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应，没有恰当的预读数据，或者对 XMLHttpRequest的不恰当处理，都会使用户感到延迟，这是用户不希望看到的，也是他们无法理解的。通常的解决方案是，使用一个可视化的组件来 告诉用户系统正在进行后台操作并且正在读取数据和内容。
(2).Ajax适用场景
<1>.表单驱动的交互
<2>.深层次的树的导航
<3>.快速的用户与用户间的交流响应
<4>.类似投票、yes/no等无关痛痒的场景
<5>.对数据进行过滤和操纵相关数据的场景
<6>.普通的文本输入提示和自动完成的场景
(3).Ajax不适用场景
<1>.部分简单的表单
<2>.搜索
<3>.基本的导航
<4>.替换大量的文本
<5>.对呈现的操纵
浙公网安备 33010602011771号