掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务

前端常用的通信技术

作者简介 :陈为平,携程市场部前端工程师,目前主要负责“携程运动”项目的大前端相关工作。

前段时间在忙开发携程运动项目和相应的微信小程序,其中和后端通信犹为频繁。get、post请求方法是很多前端童鞋使用最频繁的;websocket在11年盛行后方便了客户端和服务器之间传输,……and so on ,除了这些,还有很多我们不常使用的其他方式,但是在实际的业务场景中却真实需要。

本文总结了目前前端使用到的数据交换方式,阐述了业务场景中如何选择适合的方式进行数据交换( form ,xhr, fetch, SSE, webstock, postmessage, web workers等),并列举了一些示例代码, 可能存在不足的地方,欢迎大家指正。

本文用到的源代码都放在Github上,点击可直达。

关于HTTP协义基础可以参考阮一峰老师的《HTTP协议入门》一文。

前端经常使用的HTTP协议相关(1.0 / 1.1)

method

  • ·        GET ( 对应 restful api 查询资源, 用于客户端从服务端取数据 )
  • ·        POST(对应 restful api中的增加资源, 用于客户端传数据到服务端)
  • ·        PUT (对应 restful api中的更新资源)
  • ·        DELETE ( 对应 restful api中的删除资源 )
  • ·        HEAD ( 可以用于http请求的时间什么,或者判断是否存在判断文件大小等)
  • ·        OPTIONS (在前端中常用于 cors跨域验证)
  • ·        TRACE * (我这边没有用到过,欢迎补充)
  • ·        CONNECT * (我这边没有用到过,欢迎补充)


enctype

  • ·        application/x-www-form-urlencoded (默认,正常的提交方式)
  • ·        multipart/form-data(有上传文件时常用这种)
  • ·        application/json (ajax常用这种格式)
  • ·        text/xml
  • ·        text/plain


enctype示例说明( form , ajax, fetch 三种示例 )

<!DOCTYPE html>
<html lang="en">
<head>    <meta charset="UTF-8">    <title>enctype</title>    <style>        .box{border: 1px solid #ccc;padding:20px;}        .out{background: #efefef; padding:10px 20px; margin-top: 20px;}    </style>    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script>        <script>    $(function(){        $('#b1').on('click', function(){            $.ajax({                method: "POST",                contentType:'application/x-www-form-urlencoded;charset=UTF-8',                url: "form_action.php",                data: {username: "John", password: "Boston" }            }).done(function( msg ) {                $('#msg1').html(msg);            });        });        $('#f1').on('click', function(){            fetch("form_action.php", {                method: "POST",                credentials: 'include', //带上cookie                headers: {                    "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"                },                body: "username=John&password=Boston"            })            .then(function(response){                return response.text();            })            .then(function(msg) {                $('#msg1').html(msg);            }, function(e) {                alert("Error submitting form!");            });        });        $('#b2').on('click', function(){            var formData = new FormData(document.querySelector("#data2"));            $.ajax({                method: "POST",                processData:false, //无需让jquery正处理一下数据                contentType:false, //已经是formData就默认为 multipart/form-data                cache: false,                url: "form_action.php",                data: formData            }).done(function( msg ) {                $('#msg2').html(msg);            });        });        $('#f2').on('click', function(){            var formData = new FormData(document.querySelector("#data2"));            fetch("form_action.php", {                method: "POST",                headers: {                    "Content-Type": "multipart/form-data;charset=UTF-8"                },                body: formData            })            .then(function(response){                return response.text();            })            .then(function(msg) {                $('#msg2').html(msg);            }, function(e) {                alert("Error submitting form!");            });        });        $('#b3').on('click', function(){            $.ajax({                method: "POST",                contentType:'application/json;charset=UTF-8',                url: "form_action.php",                data: JSON.stringify({username: "John", password: "Boston" })            }).done(function( msg ) {                $('#msg3').html(msg);            });        });        $('#f3').on声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

0512-88869195
数 据 驱 动 未 来
Data Drives The Future