前端常用的通信技术

来源： SDK.cn 类型：技术文章发布：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百科
            
          
          
            生活服务
            企业工商
            金融科技
            接口大全
            电子商务
          
          
            API资讯
            
            
                            math.round()函数详解(定义、作用、用法)
                            document.ready()作用 document.ready和window.onload的区别
                            Android中wrap_content有什么用 wrap_content和match_parent的区别
                            C++中LPCTSTR是什么类型 LPCTSTR与string之间的转换
                            totalcmd怎么用 totalcmd工具的主要功能
                          
          
          

  相关API
  
        
      
        
      
      个人/企业涉诉查询
      
      
        通过企业关键词查询企业涉讼详情，如裁判文书、开庭公告、执行公告、失信公告、案件流程等等。
        通过企业关键词查询企业涉讼详情，如裁判文书、开庭公告、执行公告、失信公告、案件流程等等。
      
    
        
      
        
      
      IP反查域名
      
      
        IP反查域名是通过IP查询相关联的域名信息的功能，它提供IP地址历史上绑定过的域名信息。
        IP反查域名是通过IP查询相关联的域名信息的功能，它提供IP地址历史上绑定过的域名信息。
      
    
        
      
        
      
      人脸卫士
      
      
        结合权威身份认证的精准人脸风险查询服务，提升人脸应用及身份认证生态的安全性。人脸风险情报库，覆盖范围广、准确性高，数据权威可靠。
        结合权威身份认证的精准人脸风险查询服务，提升人脸应用及身份认证生态的安全性。人脸风险情报库，覆盖范围广、准确性高，数据权威可靠。
      
    
        
      
        
      
      全国城市空气质量
      
      
        全国城市和站点空气质量查询，污染物浓度及空气质量分指数、空气质量指数、首要污染物及空气质量级别、健康指引及建议采取的措施等。
        全国城市和站点空气质量查询，污染物浓度及空气质量分指数、空气质量指数、首要污染物及空气质量级别、健康指引及建议采取的措施等。
      
    
        
      
        
      
      手机号防骚扰黑名单
      
      
        输入手机号和拦截等级，查看是否是风险号码
        输入手机号和拦截等级，查看是否是风险号码