数据API 产品矩阵 案例 关于
掌握聚合最新动态了解行业最新趋势
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

掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
前端常用的通信技术
发布:2017-07-21 11:46:03

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

前段时间在忙开发携程运动项目和相应的微信小程序,其中和后端通信犹为频繁。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

选择想要的接口, 看看能免费获取多少次调用 选择(单选)或填写想要的接口
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
短信API服务
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 证件识别
  • 企业工商信息
  • 确定
选择您的身份
请选择寻找接口的目的
预计每月调用量
请选择预计每月调用量
产品研发的阶段
请选择产品研发的阶段
电话 0512-88869195
×
企业用户认证,
可获得1000次免费调用
注册登录 > 企业账户认证 > 领取接口包
企业用户认证领取接口包 立即领取
× 企业用户认证,
可获得1000次免费调用,立即领取>
数 据 驱 动 未 来
Data Drives The Future