一次完整的HTTP请求与响应涉及了哪些知识?

阅读:838 2019-03-19 14:43:59 来源:新网

理解http请求与响应

以上完整表示了http请求和响应的7个步骤,下面从tcp/ip协议模型的角度来理解http请求和响应如何传递的。

tcp/ip协议模型(transmissioncontrolprotocol/internetprotocol),包含了一系列构成互联网基础的网络协议,是internet的核心协议,通过20多年的发展已日渐成熟,并被广泛应用于局域网和广域网中,目前已成为事实上的国际标准。tcp/ip协议簇是一组不同层次上的多个协议的组合,通常被认为是一个四层协议系统,与osi的七层模型相对应。

http协议就是基于tcp/ip协议模型来传输信息的。

(1).链路层

也称作数据链路层或网络接口层(在第一个图中为网络接口层和硬件层),通常包括操作系统中的设备驱动程序和计算机中对应的网络接口卡。它们一起处理与电缆(或其他任何传输媒介)的物理接口细节。arp(地址解析协议)和rarp(逆地址解析协议)是某些网络接口(如以太网和令牌环网)使用的特殊协议,用来转换ip层和网络接口层使用的地址。

(2).网络层

也称作互联网层(在第一个图中为网际层),处理分组在网络中的活动,例如分组的选路。在tcp/ip协议族中,网络层协议包括ip协议(网际协议),icmp协议(internet互联网控制报文协议),以及igmp协议(internet组管理协议)。

ip是一种网络层协议,提供的是一种不可靠的服务,它只是尽可能快地把分组从源结点送到目的结点,但是并不提供任何可靠性保证。同时被tcp和udp使用。tcp和udp的每组数据都通过端系统和每个中间路由器中的ip层在互联网中进行传输。

icmp是ip协议的附属协议。ip层用它来与其他主机或路由器交换错误报文和其他重要信息。

igmp是internet组管理协议。它用来把一个udp数据报多播到多个主机。

(3).传输层

主要为两台主机上的应用程序提供端到端的通信。在tcp/ip协议族中,有两个互不相同的传输协议:tcp(传输控制协议)和udp(用户数据报协议)。

tcp为两台主机提供高可靠性的数据通信。它所做的工作包括把应用程序交给它的数据分成合适的小块交给下面的网络层,确认接收到的分组,设置发送最后确认分组的超时时钟等。由于运输层提供了高可靠性的端到端的通信,因此应用层可以忽略所有这些细节。为了提供可靠的服务,tcp采用了超时重传、发送和接收端到端的确认分组等机制。

udp则为应用层提供一种非常简单的服务。它只是把称作数据报的分组从一台主机发送到另一台主机,但并不保证该数据报能到达另一端。一个数据报是指从发送方传输到接收方的一个信息单元(例如,发送方指定的一定字节数的信息)。udp协议任何必需的可靠性必须由应用层来提供。(4).应用层

应用层决定了向用户提供应用服务时通信的活动。tcp/ip协议族内预存了各类通用的应用服务。包括http,ftp(filetransferprotocol,文件传输协议),dns(domainnamesystem,域名系统)服务。

当应用程序用tcp传送数据时,数据被送入协议栈中,然后逐个通过每一层直到被当作一串比特流送入网络。其中每一层对收到的数据都要增加一些首部信息(有时还要增加尾部信息),该过程如图所示。

当目的主机收到一个以太网数据帧时,数据就开始从协议栈中由底向上升,同时去掉各层协议加上的报文首部。每层协议盒都要去检查报文首部中的协议标识,以确定接收数据的上层协议。这个过程称作分用(demultiplexing)。协议是通过目的端口号、源ip地址和源端口号进行解包的。

通过以上步骤我们从tcp/ip模型的角度来理解了一次http请求与响应的过程。

下面这张图更清楚明白:

下面具体来看如何进行一步步操作的。

tcp是面向连接的,无论哪一方向另一方发送数据之前,都必须先在双方之间建立一条连接。在tcp/ip协议中,tcp协议提供可靠的连接服务,连接是通过三次握手进行初始化的。三次握手的目的是同步连接双方的序列号和确认号并交换tcp窗口大小信息。

第一次握手:建立连接。客户端发送连接请求报文段,将syn位置为1,sequencenumber为x;然后,客户端进入syn_send状态,等待服务器的确认;

第二次握手:服务器收到syn报文段。服务器收到客户端的syn报文段,需要对这个syn报文段进行确认,设置acknowledgmentnumber为x+1(sequencenumber+1);同时,自己自己还要发送syn请求信息,将syn位置为1,sequencenumber为y;服务器端将上述所有信息放到一个报文段(即syn+ack报文段)中,一并发送给客户端,此时服务器进入syn_recv状态;

第三次握手:客户端收到服务器的syn+ack报文段。然后将acknowledgmentnumber设置为y+1,向服务器发送ack报文段,这个报文段发送完毕以后,客户端和服务器端都进入established状态,完成tcp三次握手。

为什么要三次握手

为了防止已失效的连接请求报文段突然又传送到了服务端,因而产生错误。

具体例子:“已失效的连接请求报文段”的产生在这样一种情况下:client发出的第一个连接请求报文段并没有丢失,而是在某个网络结点长时间的滞留了,以致延误到连接释放以后的某个时间才到达server。本来这是一个早已失效的报文段。但server收到此失效的连接请求报文段后,就误认为是client再次发出的一个新的连接请求。于是就向client发出确认报文段,同意建立连接。假设不采用“三次握手”,那么只要server发出确认,新的连接就建立了。由于现在client并没有发出建立连接的请求,因此不会理睬server的确认,也不会向server发送数据。但server却以为新的运输连接已经建立,并一直等待client发来数据。这样,server的很多资源就白白浪费掉了。采用“三次握手”的办法可以防止上述现象发生。例如刚才那种情况,client不会向server的确认发出确认。server由于收不到确认,就知道client并没有要求建立连接。”

http是什么?

通俗来讲,他就是计算机通过网络进行通信的规则,是一个基于请求与响应,无状态的,应用层的协议,常基于tcp/ip协议传输数据。目前任何终端(手机,笔记本电脑。。)之间进行任何一种通信都必须按照http协议进行,否则无法连接。

四个基于:

请求与响应:客户端发送请求,服务器端响应数据

无状态的:协议对于事务处理没有记忆能力,客户端第一次与服务器建立连接发送请求时需要进行一系列的安全认证匹配等,因此增加页面等待时间,当客户端向服务器端发送请求,服务器端响应完毕后,两者断开连接,也不保存连接状态,一刀两断!恩断义绝!从此路人!下一次客户端向同样的服务器发送请求时,由于他们之前已经遗忘了彼此,所以需要重新建立连接。

应用层:http是属于应用层的协议,配合tcp/ip使用。

tcp/ip:http使用tcp作为它的支撑运输协议。http客户机发起一个与服务器的tcp连接,一旦连接建立,浏览器(客户机)和服务器进程就可以通过套接字接口访问tcp。

针对无状态的一些解决策略:

有时需要对用户之前的http通信状态进行保存,比如执行一次登陆操作,在30分钟内所有的请求都不需要再次登陆。于是引入了cookie技术。

http/1.1想出了持久连接(httpkeep-alive)方法。其特点是,只要任意一端没有明确提出断开连接,则保持tcp连接状态,在请求首部字段中的connection:keep-alive即为表明使用了持久连接。等等还有很多。。。。。。

下面开始讲解重头戏:http请求报文,响应报文,对应于上述步骤的2,3,4,5,6。

http报文是面向文本的,报文中的每一个字段都是一些ascii码串,各个字段的长度是不确定的。http有两类报文:请求报文和响应报文。

一个http请求报文由请求行(requestline)、请求头部(header)、空行和请求数据4个部分组成,下图给出了请求报文的一般格式。

1.请求行

请求行分为三个部分:请求方法、请求地址和协议版本

请求方法

http/1.1定义的请求方法有8种:get、post、put、delete、patch、head、options、trace。

最常的两种get和post,如果是restful接口的话一般会用到get、post、delete、put。

请求地址

url:统一资源定位符,是一种自愿位置的抽象唯一识别方法。

组成:<协议>://<主机>:<端口>/<路径>

端口和路径有时可以省略(http默认端口号是80)

如下例:

有时会带参数,get请求

协议版本

协议版本的格式为:http/主版本号.次版本号,常用的有http/1.0和http/1.1

2.请求头部

请求头部为请求报文添加了一些附加信息,由“名/值”对组成,每行一对,名和值之间使用冒号分隔。

常见请求头如下:

请求头部的最后会有一个空行,表示请求头部结束,接下来为请求数据,这一行非常重要,必不可少。

3.请求数据

可选部分,比如get请求就没有请求数据。

下面是一个post方法的请求报文:

post/index.phphttp/1.1请求行host:localhostuser-agent:mozilla/5.0(windowsnt5.1;rv:10.0.2)gecko/20100101firefox/10.0.2请求头accept:text/html,application/xhtml+xml,application/xml;q=0.9,/;q=0.8accept-language:zh-cn,zh;q=0.5accept-encoding:gzip,deflateconnection:keep-alivereferer:http://localhost/content-length:25content-type:application/x-www-form-urlencoded空行username=aa&password=1234请求数据

http响应报文主要由状态行、响应头部、空行以及响应数据组成。

1.状态行

由3部分组成,分别为:协议版本,状态码,状态码描述。

其中协议版本与请求报文一致,状态码描述是对状态码的简单描述,所以这里就只介绍状态码。

状态码

状态代码为3位数字。1xx:指示信息--表示请求已接收,继续处理。2xx:成功--表示请求已被成功接收、理解、接受。3xx:重定向--要完成请求必须进行更进一步的操作。4xx:客户端错误--请求有语法错误或请求无法实现。5xx:服务器端错误--服务器未能实现合法的请求。

下面列举几个常见的:

2.响应头部

与请求头部类似,为响应报文添加了一些附加信息

常见响应头部如下:

3.响应数据

用于存放需要返回给客户端的数据信息。

下面是一个响应报文的实例:

http/1.1200ok状态行date:sun,17mar201308:12:54gmt响应头部server:apache/2.2.8(win32)php/5.2.5x-powered-by:php/5.2.5set-cookie:phpsessid=c0huq7pdkmm5gg6osoe3mgjmm3;path=/expires:thu,19nov198108:52:00gmtcache-control:no-store,no-cache,must-revalidate,post-check=0,pre-check=0pragma:no-cachecontent-length:4393keep-alive:timeout=5,max=100connection:keep-alivecontent-type:text/html;charset=utf-8空行

响应数据http响应示例<title></head><body>hellohttp!</body></html></p><p>关于请求头部和响应头部的知识点很多,这里只是简单介绍。</p><p>通过以上步骤,数据已经传递完毕,http/1.1会维持持久连接,但持续一段时间总会有关闭连接的时候,这时候据需要断开tcp连接。</p><p>当客户端和服务器通过三次握手建立了tcp连接以后,当数据传送完毕,肯定是要断开tcp连接的啊。那对于tcp的断开连接,这里就有了神秘的“四次分手”。</p><p></p><p>第一次分手:主机1(可以使客户端,也可以是服务器端),设置sequencenumber,向主机2发送一个fin报文段;此时,主机1进入fin_wait_1状态;这表示主机1没有数据要发送给主机2了;</p><p>第二次分手:主机2收到了主机1发送的fin报文段,向主机1回一个ack报文段,acknowledgmentnumber为sequencenumber加1;主机1进入fin_wait_2状态;主机2告诉主机1,我“同意”你的关闭请求;</p><p>第三次分手:主机2向主机1发送fin报文段,请求关闭连接,同时主机2进入last_ack状态;</p><p>第四次分手:主机1收到主机2发送的fin报文段,向主机2发送ack报文段,然后主机1进入time_wait状态;主机2收到主机1的ack报文段以后,就关闭连接;此时,主机1等待2msl后依然没有收到回复,则证明server端已正常关闭,那好,主机1也可以关闭连接了。</p><p>为什么要四次分手</p><p>tcp协议是一种面向连接的、可靠的、基于字节流的运输层通信协议。tcp是全双工模式,这就意味着,当主机1发出fin报文段时,只是表示主机1已经没有数据要发送了,主机1告诉主机2,它的数据已经全部发送完毕了;但是,这个时候主机1还是可以接受来自主机2的数据;当主机2返回ack报文段时,表示它已经知道主机1没有数据发送了,但是主机2还是可以发送数据到主机1的;当主机2也发送了fin报文段时,这个时候就表示主机2也没有数据要发送了,就会告诉主机1,我也没有数据要发送了,之后彼此就会愉快的中断这次tcp连接。</p><p>通过以上步骤便完成了http的请求和响应,进行了数据传递,这其中涉及到需要知识点,都进行了逐一了解。</p><p>参考文章:</p></php> </section> <el-row style="margin-top: 15px;"> <el-col> <div class="prev-page" style="margin-bottom: 8px;"> <span>上一篇:</span> <a href="/news/9144.html" title="Tomcat工作原理详解" class="blue">Tomcat工作原理详解</a> </div> </el-col> </el-row> <el-row> <el-col> <div class="next-page"> <span>下一篇:</span> <a href="/news/9142.html" title="HttpClient 中文官方教程----第4章HTTP认证-只收录,未测试" class="blue">HttpClient 中文官方教程----第4章HTTP认证-只收录,未测试</a> </div> </el-col> </el-row> </el-card> <el-card :body-style="{ padding: '0px' }" shadow="never" class="related extra-card mt10"> <el-row class="tit fs18">相关文章</el-row> <el-row class="lis" v-for="(v, index) in relevant" :key="index" v-if="index<3"> <el-row> <a :href="'/news/'+v.id+'.html'" :title="v.title"> <div class="item el-row fs16">{{ v.title }}</div> </a> </el-row> <el-row class="des text-gray fs14"> {{ v.description||(cleanHtml(v.content)).substr(0,100)+'···' }} </el-row> </el-row> </el-card> <el-card :body-style="{ padding: '0px' }" shadow="never" class="interest extra-card mt10"> <el-row class="tit fs18">你可能感兴趣</el-row> <el-row class="lis" gutter="5px"> <el-col v-for="(item, index) in interest" :key="index" :span="12"> <div class="item el-row fs14" style="padding-right: 30px;"> <a :href="'/news/'+item.id+'.html'" :title="cleanHtml(item.title)">{{ cleanHtml(item.title) }}</a> </div> </el-col> </el-row> </el-card> </div> <div class="pull-right detail-right"> <div class="detail-ad-component"> <a class="item" href="/trademark/form"> <img src="/statics/epower/img/zhuce.png"> </a> <a class="item" href="/trademark/jiaoyilists"> <img src="/statics/epower/img/jiaoyi.png"> </a> <div class="item-carousel"></div> </div> <div class="recommend extra-card el-row"> <el-row class="tit"> <el-col :span="15">推荐阅读</el-col> <el-col :span="9" class="text-right"> <a href="/news" class="text-blue fs12">更多></a> </el-col> </el-row> <el-row class="lis"> <el-row v-for="(item, index) in interest" :key="index" class="item textover" v-if="index<5"> <template v-if="index<6"> <a :href="'/news/'+item.id+'.html'" :title="item.title">{{ item.title }}</a> </template> </el-row> </el-row> </div> <div> <div class="operate-panel-inner detail-similar"> <div class="title">推荐商标</div> <div class="content" v-for="(v,index) in tuijian" :key="index"> <a :href="url('tm-trade-detail', v)" target="_blank" class="img-wrapper"><img :title="v.name" :src="v.tm_trade_image" lazy="loaded"></a> <div class="tm-info"> <p class="name textover"> {{ v.name }} </p> <p class="cls textover"> {{ v.cls }}类 </p> </div> <div class="mask"><a @click="canTrade ? 'return;' : showTradeBuy(v)" :href="canTrade ? url('tm-trade-detail', v) : 'javascript:void(0)'" :target="canTrade ? '_blank' : '_self'" class=""> <p class="price text-white"><strong> <template v-if="v.price == '议价'"> {{ v.price }} </template> <template v-else-if="v.price !== null"> ¥{{ v.price }} </template> </strong> </p> </a> <div class="operate"> <el-button type="warning" class="btn" v-on:click="canTrade ? window.open(url('tm-trade-detail', v)) : showTradeBuy(v)">立即购买 </el-button> <el-button type="primary" class="btn" v-on:click="window.open(basic.qq_link)">联系客服 </el-button> </div> </div> </div> <trade-buy ref="trade-buy-container"></trade-buy> </div> </div> </div> </div> </section> <div id="footerApp" v-cloak> <footer class="footer" :class="{varainer:userInfo}"> <!-- 未登录提示 --> <div class="no-login-prompt" v-if="!userInfo"> <div class="center"> 您的业务还没有开展?马上 <a href="/login" class="active" target="_blank">创建业务</a> 或者 <a href="/register" target="_blank">成为用户</a> </div> </div> <div class="link friendly-link center"> 友情链接: <a href="http://h.zuangua.cn" rel="noreferrer" target="_blank" title="河北钻瓜网">河北钻瓜网</a> <a href="http://hn.zuangua.cn" rel="noreferrer" target="_blank" title="河南钻瓜网">河南钻瓜网</a> <a href="http://www.vipzhuanli.com" rel="noreferrer" target="_blank" title="钻瓜专利网">钻瓜专利网</a> <a href="http://js.zuangua.cn/" rel="noreferrer" target="_blank" title="江苏钻瓜网">江苏钻瓜网</a> </div> <div class="link center"> <a href="/help/index" target="_blank" title="">帮助中心</a> <a href="/items" target="_blank" title="">服务条款</a> <a href="/aboutus" target="_blank" title="">关于我们</a> <a href="/trademark/leader" target="_blank" title="">新手指导</a> <a href="/yinsi" target="_blank" title="">隐私保护</a> <a href="/change_mobile" target="_blank" title="">手机版</a> <a href="/sitemap.xml" target="_blank" title="">SiteMap</a> </div> <div class="bg-fff mt10"> <div class="infomation center"> <p class="copyright-info"> 国家级高新技术企业、国家工商总局商标局备案代理机构、中国知识产权发展联盟成员单位、华北知识产权运营中心特色分中心、国家科技型中小企业、天津知识产权运营联盟成员单位。 </p> <p class="copyright-info">Powered by <a href="https://www.zuangua.cn" target="_blank" class="fb blue" rel="noreferrer">zuangua2.0</a> <span style="color: rgb(255, 157, 37); font-weight: 800;">IPR 2.8.2.0528 Licensed</span> 钻瓜科技(天津)有限公司AND天津钻瓜知识产权服务有限公司,投诉邮箱:zhoukun@zuangua.cn </p> <p class="copyright-info"> <a href="https://beian.miit.gov.cn/" class="text-999" target="_blank" rel="noreferrer">津ICP备15000985号</a> </p> <p class="copyright-info mt10"></p> </div> </div> </footer> <div class="right-sidebar"> <ul> <li class="custom-li" v-on:click="openQQLink"> <p class="icons"><svg class="icon fs24" aria-hidden="true"><use xlink:href="#icon-kefu"></use></svg></p> <p class="tit">客服</p> </li> <li v-if="basic.qr_code_cs"> <el-popover placement="right-start" width="200" trigger="hover" popper-class="wechat-ewm-popover"> <div><img alt="钻瓜网 客服微信" :src="basic.qr_code_cs"></div> <div slot="reference"> <p class="icons"><svg class="icon fs32" aria-hidden="true"><use xlink:href="#icon-gongzhonghao"></use></svg></p> <p class="tit">微信</p> </div> </el-popover> </li> <li v-if="basic.qr_code"> <el-popover placement="right-start" width="200" trigger="hover" popper-class="wechat-ewm-popover"> <div><img alt="钻瓜网 公众号" :src="basic.qr_code"></div> <div slot="reference"> <p class="icons"><i class="iconfont icon-gongzhonghao1 fs24"></i></p> <p class="tit">公众号</p> </div> </el-popover> </li> <li v-on:click="gotoQA"> <p class="icons"><i class="iconfont icon-wenda fs24"></i></p> <p class="tit">工单</p> </li> <li v-show="btnFlag" v-on:click="backTop"> <p class="icons"><i class="el-icon-download fs32" style="transform: rotate(180deg)"></i></p> <p class="tit">顶部</p> </li> </ul> </div> </div> <script> new Vue({el:"#footerApp",data:function(){return{sharedState:store.state,scrollTop:0,btnFlag:false,}},computed:{policeCode:function(){var c=window["$ePowerConfigs"]["basic"]["police_code"];var a="";if(c){c=c.replace(/\s*/g,"");try{a=c.match(/备(\S*)号/)[1]}catch(b){}}return a},verison:function(){return window["$ePowerConfigs"]["version"]},basic:function(){return window["$ePowerConfigs"]["basic"]},bottomMenu:function(){return this.sharedState.bottomMenu},links:function(){return this.sharedState.links},userInfo:function(){return this.sharedState.userInfo},},mounted:function(){window.addEventListener("scroll",this.scrollToTop)},destroyed:function(){window.removeEventListener("scroll",this.scrollToTop)},methods:{gotoQA:function(){window.location=("/user/work/submit")},openQQLink:function(){window.open(this.basic.qq_link)},backTop:function(){var a=this;var b=setInterval(function(){var c=Math.floor(-a.scrollTop/5);document.documentElement.scrollTop=document.body.scrollTop=a.scrollTop+c;if(a.scrollTop===0){clearInterval(b)}},16)},scrollToTop:function(){var a=this;a.scrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;if(a.scrollTop>60){a.btnFlag=true}else{a.btnFlag=false}},},}); </script> <script src="/statics/epower/fonts/1287857_website/iconfont.js"></script> <script>var category_id = "16"</script> <script>var category_class_origin = "news"</script> <script src="/statics/epower/js/module/news/detail.js"></script> <script src="/statics/epower/libs/clipboard.min.js"></script> <script src="/statics/epower/libs/qrcode.min.js"></script> <script> registerComponent('trade-buy') var title = decodeURIComponent('%E4%B8%80%E6%AC%A1%E5%AE%8C%E6%95%B4%E7%9A%84HTTP%E8%AF%B7%E6%B1%82%E4%B8%8E%E5%93%8D%E5%BA%94%E6%B6%89%E5%8F%8A%E4%BA%86%E5%93%AA%E4%BA%9B%E7%9F%A5%E8%AF%86%EF%BC%9F'); var desc = decodeURIComponent('%E7%90%86%E8%A7%A3http%E8%AF%B7%E6%B1%82%E4%B8%8E%E5%93%8D%E5%BA%94%E4%BB%A5%E4%B8%8A%E5%AE%8C%E6%95%B4%E8%A1%A8%E7%A4%BA%E4%BA%86http%E8%AF%B7%E6%B1%82%E5%92%8C%E5%93%8D%E5%BA%94%E7%9A%847%E4%B8%AA%E6%AD%A5%E9%AA%A4%EF%BC%8C%E4%B8%8B%E9%9D%A2%E4%BB%8Etcp%2Fip%E5%8D%8F%E8%AE%AE%E6%A8%A1%E5%9E%8B%E7%9A%84%E8%A7%92%E5%BA%A6%E6%9D%A5%E7%90%86%E8%A7%A3http%E8%AF%B7%E6%B1%82%E5%92%8C%E5%93%8D%E5%BA%94%E5%A6%82%E4%BD%95%E4%BC%A0%E9%80%92%E7%9A%84%E3%80%82tcp%2Fip%E5%8D%8F%E8%AE%AE%E6%A8%A1%E5%9E%8B%EF%BC%88transmissioncontrolprotocol%2Finternetprotocol%EF%BC%89%EF%BC%8C%E5%8C%85%E5%90%AB%E4%BA%86%E4%B8%80%E7%B3%BB%E5%88%97%E6%9E%84%E6%88%90%E4%BA%92%E8%81%94%E7%BD%91%E5%9F%BA%E7%A1%80%E7%9A%84%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE%EF%BC%8C%E6%98%AFinternet%E7%9A%84%E6%A0%B8%E5%BF%83%E5%8D%8F%E8%AE%AE%EF%BC%8C%E9%80%9A%E8%BF%8720%E5%A4%9A%E5%B9%B4%E7%9A%84%E5%8F%91%E5%B1%95%E5%B7%B2%E6%97%A5%E6%B8%90%E6%88%90%E7%86%9F%EF%BC%8C%E5%B9%B6%E8%A2%AB%E5%B9%BF%E6%B3%9B%E5%BA%94%E7%94%A8%E4%BA%8E%E5%B1%80%E5%9F%9F%E7%BD%91%E5%92%8C%E5%B9%BF%E5%9F%9F%E7%BD%91%E4%B8%AD%EF%BC%8C%E7%9B%AE%E5%89%8D%E5%B7%B2%E6%88%90%E4%B8%BA%E4%BA%8B%E5%AE%9E%E4%B8%8A%E7%9A%84%E5%9B%BD%E9%99%85'); var pic = decodeURIComponent('') || window.$ePowerConfigs.basic.pc_logo; ShareLayout(window.location.toString(),title,desc,pic, document.getElementById('app')); </script> </body> </html>