服务器交换文件是什么,关于与服务器交换数据的方法大全

前端时间开发前端项目，对于前后台数据交互，当时在$.ajax()、fetch、axios的选择上出现了一些疑问，当时查询了很多资料，最终选择了axios，在此，对这些技术做一个大概的梳理，后面继续会研究关于AJAX实现的一些底层的东西！

一、AJAX

1、什么是AJAX

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。核心技术为：核心对象XMLHttpRequest.

2、原理

浏览器加载完页面后,可以在不销毁当前页面的前提下,支持分出一部分资源从远程获取数据,并通过脚本语言将返回的部分数据追加到原有页面中

3、Ajax实现步骤

a.创建xhr对象

var xmlhttp=null;

if (window.XMLHttpRequest)

{// code for all new browsers

xmlhttp=new XMLHttpRequest();

}

else if (window.ActiveXObject)

{// code for IE5 and IE6

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

b.open方法创建请求

xmlhttp.open("GET","ajax_info.txt",true);

open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

method：请求的类型；GET 或 POST

url：文件在服务器上的位置

async：true(异步)或 false(同步)

get与post的区别

c.设置回调事件

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

}

d.send方法发送请求

xmlhttp.send(string);

将请求发送到服务器。

string：仅用于 POST 请求

二、JQUERY对AJAX的实现

$.ajax()方法通过HTTP请求加载远程数据。

简单易用的高层实现见$.get(),$.post();

语法：jQuery.ajax( url [, settings ] )  settings可选。用于配置 Ajax 请求的键值对集合。

常见键值对：async，data，dataType，error，success，type，url

常见使用案例：

$.ajax({

url: "/ajax",

type:"get",

dataType: "json"

success: function(){

alert("请求成功！");

},

error:function(){

alert("请求失败！");

}

});

也可以引入新功能deferred对象

jQuery.ajaxQueue({

url: "/ajax",

type:"get",

dataType: "json"

}).done(function( data ) {

console.log("成功回调");

}).fail(function(data){

console.log("失败回调");

});

可以通过deferred的then()函数来简化：

jQuery.ajaxQueue({

url: "/ajax",

type: "get",

dataType: "json"

}).then(doneFn, failFn);

三、AXIOS

基于Promise的浏览器和node.js的HTTP客户端，由于vue,react等前端技术不需要使用$.ajax()，因此引入jQuery会造成很大负担

做的XMLHttpRequest从浏览器

让HTTP从node.js的请求

支持Promise API

拦截请求和响应

转换请求和响应数据

取消请求

自动转换为JSON数据

客户端支持防止XSRF

常见使用案例：

axios({

method: 'post',

url: url,

data: qs.stringify(reqData)

}).then(res => {

}).catch(err => {

})

四、Fetch

XMLHttpRequest的最新替代技术——Fetch API

fetch()能让我们完成类似 XMLHttpRequest (XHR) 提供的ajax功能。它们之间的主要区别是，Fetch API 使用了 Promises，它让接口更简单、简洁，避免了回调的复杂性，省去了使用复杂的 XMLHttpRequest API。

常见使用案例：

fetch(url).then(function(response){

return response.json();

}).then(function(data){

console.log(data)

}).catch(function(e){

console.log("error")

})

优点：

语法简洁，更加语义化

基于标准的Promise实现，支持async/await

同构方便

缺点：

fetch请求默认是不带cookie的，需要设置fetch(url, {credentials: 'include'})

服务器返回400,500这样的错误码时不会reject,只有网络错误这些导致请求不能完成时，fetch才会被reject.

五、技术选择

其实个人看法，如果是传统的项目，不使用vue、react这些前端框架，引入jQuery是快捷开发前端项目不错的选择，使用$.ajax()很不错！如果采用vue、react目前主流的前端技术，采用react、Fetch是很不错的选择，额外引用jQuery框架不太合适。但是从IE兼容性方面，还是需要去考虑技术的选型！