只有知道了历史，才能更好的把握现在和未来。
在项目中，通常前端开发主要完成两件事情，一是界面搭建，一是数据交互。
下面是我总结前端与后端交互的几种方式，本文只作简单介绍，不做深入了解。
一、AJAX
简述
AJAX(Asynchronous Javascript And XML)，是一种使用 XMLHttpRequest 技术构建更复杂，动态的网页的编程实践。
XMLHttpRequest(XHR)对象由微软引入，首次在 IE5 上实现，是一种支持异步请求的技术，用于与服务器交互。XMLHttpRequest 可以在不刷新页面的情况下请求 URL 获取服务器数据，然后使用 JavaScript 操作 DOM 更新页面数据，是 AJAX 编程技术的核心。 这样网页在不影响用户操作的情况下，就可以更新页面的局部内容，用户体验由此得到了很大的提升。在此之前，要实现这种 AJAX 式的通信则要采用内嵌框架或隐藏框架等 hack 手段才能实现。
除了原生 JS 外，jQuery、Axios、vue-resource 都可以实现 Ajax 编程。
原生JS
var url = 'https://api.github.com/users/chriscoyier/repos'
var xhr = new XMLHttpRequest()
xhr.open('GET', url, false)
xhr.onreadystatechange = function(){
if(xhr.readyState === 4) {
if(xhr.status === 200 || xhr.status === 304) {
console.log('response:', xhr.response)
}
}
}
xhr.send()复制代码
封装起来
var Ajax = {
get: function(url, callback){
var xhr = new XMLHttpRequest()
xhr.open('GET', url, false)
xhr.onreadystatechange = function(){
if(xhr.readyState === 4) {
if(xhr.status === 200 || xhr.status === 304) {
console.log(xhr.response)
callback(xhr.response)
}
}
}
xhr.send()
},
post: function(url, data, callback){
var xhr = new XMLHttpRequest()
xhr.open('POST', url, false)
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) {
if (xhr.status === 200 || xhr.status === 304) {
console.log(xhr.response)
callback(xhr.response)
}
}
}
xhr.send(data)
}
}复制代码
jQuery
jQuery 下实现 Ajax 非常简单
$(function(){
const list = {}
const url = ''
$.ajax({
type: "POST",
contentType: "application/json;charset=UTF-8",
url: url,
data: JSON.stringify(list),
success: res => console.log('res', res),
error: err => console.log('err', err)
})
})复制代码
vue-resourcevue-resource 是 vuejs 的一个插件，在 vue1.x 的时候被广泛使用，可以通过 XMLHttpRequest 或 JSONP 发送请求和处理响应数据。
vue-resource 可以通过 JSONP 发送请求获取数据意味着其支持跨域
通过 npm 或者 yarn 安装
$yarn add vue-resource
$npm install vue-resource复制代码
通过 CDN 引入
复制代码
使用
this.$http.get('https://api.github.com/users/chriscoyier/repos')
.then(res => console.log('res:', res.body),err => console.log('err:', err))复制代码
Axios
Axios 可以用在浏览器和 node.js 中，是一个基于 promise 的 HTTP 库，是 vuejs 官网推荐使用的一种方式。
使用 npm
$npm install axios复制代码
使用 bower
$bower install axios复制代码
使用 cdn
// 同步最新版本，但不建议使用，会出现访问不了的问题
// 建议使用指定版本的方式
复制代码
完成请求
axios.get('https://api.github.com/users/chriscoyier/repos')
.then(res => console.log('res:', res.data),err => console.log('err:', err))复制代码
Promise
使用 ES6 的 Promise 完成 Get 请求
const url = 'https://api.github.com/users/chriscoyier/repos'
const getData = function(url){
const promise = new Promise(function(resolve, reject){
const handler = function(){
if (this.readyState !== 4) {
return
}
if (this.status === 200) {
resolve(this.response)
} else {
reject(new Error(this.statusText))
}
}
const xhr = new XMLHttpRequest()
xhr.open("GET", url)
xhr.onreadystatechange = handler
xhr.responseType = "json"
xhr.setRequestHeader("Accept", "application/json")
xhr.send()
})
return promise
}
getData(url)
.then(res => console.log('data: ', res), err => console.log('err: ', err))复制代码
二、Fetch
简介
Fetch 基于 Promise，提供了一个获取资源的接口(包括跨域请求)。其全局方法 fetch() 方法要求必须接收一个资源路径，无论请求成功与否，它都返回一个 Promise 对象，resolve 对应请求的 Response。相较于 XMLHttpRequest，它更高效和具有扩展性。
Fetch 的核心在于对 HTTP 接口的抽象，包括 Request，Response，Headers，Body，以及用于初始化异步请求的 global fetch。
使用 Fetch
fetch('https://api.github.com/users/chriscoyier/repos')
.then(res => res.json())
.then(res => {
console.log('res', res[0].blobs_url)
})复制代码
三、WebSocket
简介
WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双向通讯的网络协议，于 2008 年发布，到 2011 年所有浏览器就都支持了。它的出现弥补了 HTTP 协议只能由客户端向服务器发起请求的缺陷。在此之前，要实现服务器向客户端推送数据只能采取Ajax轮询的方式，即每隔一段时间，就发出一个请求询问服务器有没有新的消息，这种方式导致 HTTP 一直处于打开状态，效率非常低下，因此工程师们发明了 WebSocket。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
下面就是一个 WebSocket 协议，ws 表示协议符，与 https 对应的，wss 表示 ws 的加密形式。端口上与 http 保持了很好的兼容性，也是 80/443，但没有 http 的同源限制，可以任意与服务器通信。
ws://example.com:80/some/path
复制代码
客户端实现
一个网页脚本的例子
// 执行下面语句之后，客户端就会与服务器进行连接。
var ws = new WebSocket("wss://echo.websocket.org");
ws.onopen = function(evt){
console.log("Connection open ...");
ws.send("Hello WebSockets!");
};
ws.onmessage = function(evt){
console.log( "Received Message: " + evt.data);
ws.close();
};
ws.onclose = function(evt){
console.log("Connection closed.");
};复制代码
四、Form 表单
Form 是 HTML 中的一个元素，表示文档中的某一个区域，通常会有很多子元素，这些子元素提供了交互的作用，用于向 web 服务器提供数据。
Enter your name:
Enter your email:
复制代码
action 表示处理表单提交的 URL。这个值可被 、 或 元素上的 formaction 属性覆盖。
参考文档
