前端数据交互的五种方式

数据交互的主要五种方式：xhr 、$.ajax 、fetch、axios 、vue-resource。

1.XMLHttpRequest是原生js基于浏览器所提供的一种可以数据交互的方式。
优点：1.在不重新加载页面的情况下更新网页
2.在页面已加载后从服务器请求数据
3.在后台向服务器发送数据
4.所有现代的浏览器都支持 XMLHttpRequest 对象。
2.$.ajax
jQuery的ajax底层原理是结合源生的XMLHttpRequest对象来进行二次封装，所以它具备了前后端交互的能力，它所配置的参数大概有二十多种，常用的请求类型（type），请求地址（url），传参（data），成功回调（success），失败回调（error），返回数据类型（dataType ），最大的问题存在于回调地狱。
3.fetch
fetch 是浏览器提供的另一种数据交互方式。全局 fetch 函数是 web 请求和处理响应的简单方式，不使用 XMLHttpRequest但是和XMLHttpRequest非常类似，和XMLHttpRequest不同是在底层添加了Promise，可以处理掉jQuery.ajax的回调地狱的问题，所以是现在主流的交互方式，也是现在用于vue的交互方式之一，它的成功回调是通过.then的方式，但是需要注意的是在第一次.then的时候我们并不能拿到所需要返回的值，第一次.then主要是把数据转换为json类型，我们所需要的数据一般在第二次.then的时候才可以取到。
4.axios
axios是另一种vue的交互方式，是vue“全家桶”的技术之一，vue“全家桶”是指用vue框架开发的主要技术，它的组成是vue.js、axios、vue-router、vuex，axios的默认请求是‘get’，‘get’传参的方式是params，‘post’传参的方式是data，axios是基于promise的http库，可以用于浏览器和node.js使用，虽然axios是基于promise（用作异步）但不是完全基于，axios的底层能力还是XMLHttpRequest（数据交互）对象，axios的优势有：可以再node.js中创建http请求、拦截请求和响应、转换请求数据和响应数据、取消请求、可以自动转换json数据，axios在vue中提供了all的方法，可以执行多个并发请求，axios有着全局默认配置baseURL可以指定将被用在各个请求的配置默认值，axios最大的优势在于可以通过interceptors添加请求拦截器（request）和响应拦截器（response），可以方便我们做一个集中式的操作。
5.vue-resource
vue-resource是存在与vue1.0的交互方式，vue1.0在借鉴angularjs时保留了http来进行数据的交互,同时在vue1.0时存在jsonp，可以用来专门处理类似于百度接口的标准jsonp请求的数据，http相当于在vue.prototype上来挂载一个http的方法，在http的使用上需要传入两个参数，第一个参数为api，第二个参数必须是jsonp的选项对象且值必须为‘cb’，如果没有配置则无法访问接口。

前端数据交互的五种方式相关推荐

（转）基于MVC4+EasyUI的Web开发框架经验总结（12）--利用Jquery处理数据交互的几种方式...
http://www.cnblogs.com/wuhuacong/p/4085682.html 在基于MVC4+EasyUI的Web开发框架里面,大量采用了Jquery的方法,对数据进行请求或者提交, ...
Flash/Flex与外部对象或数据交互的几种方式
1.首先当然是发布的swf和浏览器容器直接的通信,有三种方式 1)使用flashvar直接传参数给swf,这是早期swf最主要的方式,也是美工们喜欢的 2)通过url 使用BrowserManag ...
sj 网页前端与后台数据交互的3种方式
1.ajax 网页访问 2.form 表单用户名<input class="yonghu" type="text" id="user&quo ...
web前后台数据交互的四种方式
利用cookie对象 Cookie是服务器保存在客户端中的一小段数据信息.使用Cookie有一个前提,就是客户端浏览器允许使用Cookie并对此做出相应的设置.一般不赞成使用Cookie. 后台代码 ...
【javaWeb】前后端传递数据交互的两种方式
一.使用struct2的方法set及get 1.在jsp中直接定义定义form表单 <form id="formid" name= "myform" me ...
web实现数据交互的几种常见方式
前言在当今社会,作为一名前端程序猿,并不是一昧的去制作静态页面就可以满足滴:你说你会制作网页,好吧,只能说你算是一个前端程序猿.但这是你作为一个程序猿最基本的能力,并不会为你进行加分: 我们都明白, ...
前后端交互的两种方式
方式一:表单提交表单(form):表单用于收集用户输入信息,并将数据提交给服务器.是一种常见的与服务端数据交互的一种方式 //1. action:指定表单的提交地址 //2. method:指定表单 ...
前端百题斩【020】——竟然有五种方式实现flat方法
写该系列文章的初衷是"让每位前端工程师掌握高频知识点,为工作助力".这是前端百题斩的第20斩,希望朋友们关注公众号"执鸢者",用知识武装自己的头脑. 20.1 ...
Android数据存储五种方式总结
1 使用SharedPreferences存储数据 2 文件存储数据 3 SQLite数据库存储数据 4 使用ContentProvider存储数据 5 网络存储数据下面详细讲解 ...

前端数据交互的五种方式

数据交互的主要五种方式：xhr 、$.ajax 、fetch、axios 、vue-resource。

前端数据交互的五种方式相关推荐

最新文章

热门文章