在浏览器地址栏输入一个URL后回车，背后会进行哪些技术步骤？ - 知乎<strong class="NumberBoard-itemValue" title="被浏览<strong class="NumberBoard-itemValue" title="8分享邀请回答baidu.com）、文件路径（比如/htm_data/20/.html这样的）和端口（比如:80）四个部分组成的，老板只给了域名，不过没关系。“这就够了。”Chrome先生自信的一笑，走向了老板。步骤1.查找本地hosts文件“虽然老板已经给了我URL地址，但是网页（文件）是保存在服务器上的，要找到老板要的东西就要找到保存文件的服务器，要找到服务器就要先知道服务器的IP地址。”Chrome先生如是想。Chrome从老板的抽屉里找出一个笔记本。老板好奇的问：“Chrome，为什么每次我要你给我打开个网页你都要看看这个破本子，这到底是干什么的？”Chrome：“hosts文件，用来保存域名以及域名对应的IP地址。”Chrome打开一看，不出所料，里面空空如也，于是Chrome又把笔记本放回了原处。老板好奇地问：”Chrome，为什么里面是空的？”“因为你不会科学上网啊，把一个网站的域名写到这个文件里，写一个空格，后面再加上一个该网站可以用的服务器的IP地址，以后访问这个网站的话就会直接访问这个IP对应的服务器了。”步骤2.1询问本地域名服务器Chrome看了看手里的域名，“越高级的域名越靠后，必须要先找后面的域名，然后才能进一步的找到整个域名啊。”Chrome用自己的手机拨了一个神秘的电话。老板好奇的问：“Chrome，你在跟谁打电话？”Chrome：“地儿，我一朋友，是个本地域名服务器，哎呀你不认识。”对方很快接通了。Chrome：”喂，地儿吗？哎对，是我，问你个事儿，ww.baidu.com 这个网址你见过没？……什么？咱们这附近没人上过这个网站？昂……你给我查查？哎……行行行……哎好嘞，没事，不着急啊。“说完Chrome并没有挂掉电话，依旧把手机放在耳朵边上听着，还抽空跟老板解释了一句：“根儿也不知道。”老板好奇的问：“你挂了电话让他打回来不就行了？”Chrome：“就不。”步骤2.2询问根域名服务器话分两头，这边的本地域名服务器又拿起一部手机，打开了一个叫“找根儿”的APP。这个找根儿APP是干嘛的呢？顾名思义，就是用来找根域名服务器的了，要知道全世界有数百个根域名服务器，简而言之，“找根儿”可以帮你找到通话质量最好的那个。我们还是叫他地儿吧。地儿：“喂，您好，麻烦帮我查一下com这个顶级域名的域名服务器的IP地址。”神秘的对方一号：“好的，您要查的IP地址是：2.3.4.5，感谢您的来电，再见。”说完挂了电话。地儿又给2.3.4.5播了个电话：“喂，您好，我想查一下你们那个zhihu的二级域名的域名服务器地址。”神秘的对方二号：“好的，您要查的IP地址是：3.4.5.6，感谢您的来电，再见。”说完挂了电话。地儿又不厌其烦的给3.4.5.6拨了个电话：“喂，您好，我想查一下你们那个wwwl的三级域名的域名服务器地址。”神秘的对方三号：“好的，你要查的IP地址是：4.5.6.7，感谢您的来电，再见。”说完挂了电话。地儿看了看，地址里没有更低一级的域名了，就拿起跟Chrome通话的电话：“哎，Chrome，还在吧？……对，查出来了……恩，4.5.6.7……恩……恩……好……哎，没事没事……好，再见，替我跟IE问好啊，好长时间没见他了……好……好，再见……哎……好……好。”步骤3.1根据IP地址访问服务器挂掉了地儿的电话，Chrome拨通了4.5.6.7，这时的老板似乎有点等不及了。很快，对方接通了电话。神秘的对方四号：“您好，需要什么服务？”Chrome：“你好，主页就好了。”神秘的对方四号：“好的，我们注意到您是第一次访问我们页面，现在向您发送确认页面。”Chrome：“……什么鬼？”神秘的对方四号并没有理Chrome先生，它发给了Chrome先生一个HTML文档，Chrome把这个HTML文档解析成了彩色的网页，展示给了老板。老板输入完用户名、密码还有验证码以后，点击了提交。这一次Chrome不用像第一次那么麻烦了，不过他依然先打开了老板的hosts文件看了看，确定老板没有强制的网址跟IP的映射关系（就是某个网址一定要去某个IP访问），然后自己回忆了一下刚刚的操作，就直接拨通了4.5.6.7。神秘的对方四号对Chrome先生说：“恭喜您登陆成功，现在对您发送一条cookie记录，这样您以后再访问我们网站的时候一块儿把这串cookie发过来，我就知道您以前登陆过我们网站，就不会再出现刚刚的登陆页面了，请注意接收。”Chrome：”好……“神秘的对方四号等Chrome保存好cookie记录之后，接着说：“现在为您跳转到主页，请注意查收。”说完，就给Chrome发来了一个html文件。Chrome照例解析这个html文件成网页给老板看。Chrome：“没事我先撤了哈。”---- end ---感觉不错的话点个赞啊！58628 条评论分享收藏感谢收起zhihu.com
浏览器看到这个域名的时候，就好像我们想去一家从没去过的餐厅吃饭，只知道名字是“黄大仙肠粉”但不知道具体地点在哪里。这个时候，我们打开地图，搜索“黄大仙肠粉”后找到一个地址：衡山路110号，于是我们便知道该去哪了。域名就像是一个餐厅的名字，而IP地址相当于一个具体的地址。浏览器必须知道所请求服务器的IP地址，发出的请求才有目的地。DNS(Domain Name System)提供的服务就是将知乎的域名转换成其服务器IP地址。DNS具有两层含义：①一个由分层的DNS服务器实现的分布式数据库；②一个允许主机查询分布式数据库的应用层协议。有三种类型的DNS服务器：根DNS服务器、顶级DNS服务器和权威DNS服务器。这些服务器以下图的层次结构组织起来。除此之外，还有一类重要的DNS，称为本地DNS服务器。严格来说本地DNS服务器并不属于DNS服务器的层次结构，但它在整个查询的过程中却扮演着重要的角色。首先，浏览器所在的主机向本地DNS服务器发送一个含有知乎域名的DNS查询报文。本地DNS服务器把查询报文转发到根DNS服务器，该根DNS服务器注意到其com后缀并向本地DNS服务器返回com的顶级域名服务器的IP地址。该本地DNS服务器再次向comDNS服务器发送查询请求，comDNS服务器注意到其后缀并用负责该域名的权威DNS服务器的IP地址作为回应。最后，本地域名服务器将含有的IP地址的响应报文发送给客户端主机。这里的查询过程是包含递归查询和迭代查询的，客户端主机发送给本地服务器的查询是递归查询，而后面的三个查询是迭代查询。最高票 @郭无心 的答案中给出的递归查询应该是迭代查询才对。2、封装HTTP请求其实这里主要讲HTTP报文的格式的。可以看到，这个请求里面包含了请求的方法GET，请求的路径“/”，请求的主机名，客户机的类型以及一些其他的信息。GET / HTTP/1.1
Host: zhihu.com
User-Agent: Mozilla/4.0 ( MSIE 8.0; Windows NT 6.1; WOW64;
Accept-Encoding: gzip, deflate
Connection: Keep-Alive
前面辛辛苦苦通过DNS获得的IP地址怎么没有用到？HTTP请求报文里根本没有这一个字段。继续往下看。3、建立连接在应用层和传输层之间，更准确地讲是在浏览器进程和操作系统提供的TCP服务程序之间，有一个很重要的东西叫做套接字（Socket），如下图所示。如果把一台主机比作一座房子，把进程比作房子里面的房间，Socket相当于房间的门。不管是房间的人要出来还是外面的人要去到某一个房间，都必须先通过Socket这一道门。套接字的作用是实现传输层的多路复用和多路分解。在应用层可以同时运行多个进程，每个进程都需要通过传输层来收发分组，而传输层的TCP进程只有一个，当TCP进程收到一个分组后，该怎么确定应该转发给哪个进程呢？答案是通过套接字，这就是多路分解。同样的道理，多路复用就是进程将分组通过各自的套接字转发给传输层。TCP套接字是由一个四元组（源IP地址、源端口号、目的IP地址和目的端口号）来标识的。TCP是面向连接的，在实际发送数据之前，客户端和服务器需要建立起一个TCP连接。这种TCP“连接”只是逻辑上的链接，因为其状态完全保留在两个端系统中，中间路由器对TCP连接毫不知情。TCP连接的建立过程如下图所示。首先，TCP先发送一个创建连接的SYN请求，告诉服务器主机“我想和你创建一条TCP连接”。当服务器主机收到SYN请求后，如果其所请求的端口号正在等待连接，则会为这一条TCP连接分配资源，并发送一个SYNACK报文段作为应答。客户主机收到SYNACK报文段后，客户机也为该连接分配资源。此时，连接已经建立起来了。客户主机还会向服务器主机发送另一个报文段，对允许连接的报文段进行确认。这就是有名的“三次握手”。可以这样简单地认为，TCP连接创建成功的标志是：客户机和服务器都创建了一个由源IP地址、源端口号、目的IP地址和目的端口号标志的Socket。4、发送请求请求在“三次握手”的第三次“握手”就发送出去了。TCP报文段的格式如下图所示。目的端口和源端口号是为了在多路复用和多路分解时选择套接字时使用的。数据序号和确认序号是为了传输数据的完整性和顺序而设置的。用户数据这一个字段就存储了应用层生成的HTTP报文。ACK、SYN和FIN是在建立连接和关闭连接时使用。其他用于流量控制、拥塞管理等用途的字符就不展开了。5、路由寻址 现在两个端系统已经建立起了连接，请求也被传送到客户端主机的网络层。网络层是协议栈中最复杂的层次，应用层和传输层只运行在两个端系统，而网络层不仅运行在端系统，还运行在各个中间节点上。我们先来看看IP数据报的格式。网络层实现的最重要的功能是路由选择，简单地说，就是怎么把这一个IP数据报从客户端主机出发，通过网络中的若干个路由器，到达目的主机。从概念上讲，IP路由选择是简单的，特别对于主机来说，如果目的主机和源主机直接相连（如点对点链路），或都在一个共享网络上（以太网或令牌环网），那么IP数据报就直接送到目的主机上。否则，主机把数据报发送到一默认的路由器上，由路由器来转发该数据报。大多数的主机都采用这种简单机制。我们把网络环境简化如下图：只包含源主机H1、目的主机H2和两个路由器R1、R2。IP路由选择是逐跳（hop-to-hop）进行的。IP并不知道从H1到H2的完整路径。所有的IP选择只为数据报提供下一站的IP地址。路由选择机制的基础是在每一台主机和路由器里都存储着一张路由表。路由表的每一项包含了目的主机IP地址、下一跳路由器（或主机）的IP地址、相对应的网络接口以及其他必要的信息。当一个数据报到达一个节点时，IP路由选择完成以下工作：搜索路由表，寻找能与目的主机IP地址完全匹配的表目。如果找到，则把报文发送给下一跳节点。搜索路由表，寻找能与目标网络号相匹配的表目。如果找到，则把报文发送给下一跳节点。搜索路由表，寻找“默认”的表目。如果找到，则把报文发送给下一跳节点。如果上面这些步骤都没有成功，那么该数据报就不能被传送。如果不能传送的数据报来自本机，那么一般会向生成数据报的应用程序返回一个“主机不可达”或“网络不可达”的错误。在我们的例子中，H1通过搜索自己的路由表将数据报转发给R1，R1根据路由表转发给R2，最后到达H2。6、关闭连接目标主机收到了请求后，自底向上地对该请求进行处理。链路层把数据报传给网络层，网路层将TCP数据段通过对应的Socket传给应用程序。应用程序处理请求后产生一个应答的HTTP报文，又经过了一层层的封装、一跳跳的传输到达了源主机。这样就结束了吗？那一条TCP连接还没有关闭呢，源主机和目标主机上都为它分配了资源呢，如果不释放掉的话资源很快就会耗尽（DDoS攻击就是利用这一点）。于是，当传输层收到了应答之后，就要关闭这条连接了。但是，又不能悄悄地自己关了，目标主机那边还不知道你要不要关闭呢。于是乎，就有了对应创建TCP连接“三次握手”的关闭TCP连接“四次挥手”。如下图所示，客户端向服务器发出了FIN报文段，服务器收到后，回复一个ACK应答。然后，服务器也向客户端发送一个FIN报文段，随后关闭了服务器端的连接，释放了资源。当客户端收到之后，又向服务器回复一个ACK应答。过了一段计时等待，客户端也关闭了连接，释放资源。这一段计时等待的时间是为了客户端重传最后的ACK防止其丢失。剩下的事情，就交给浏览器了。15113 条评论分享收藏感谢收起正在加载验证码......
请先拖动验证码到相应位置用Python和Pygame写游戏-从入门到精通（1） &#8211; 目光博客
Theme | Powered by百度新闻——全球最大的中文新闻平台
加载中请您耐心等待...
热搜新闻词HOT WORDS
BAIJIA HOT
北京新闻LOCAL NEWS
您所选城市新闻不足，将展示省会新闻
正在加载，请稍候...
百度新闻独家出品
1. 新闻由机器选取每5分钟自动更新
2. 百度新闻搜索源于互联网新闻网站和频道，系统自动分类排序
3. 百度不刊登或转载任何完整的新闻内容
责任编辑：胡彦BN098 刘石娟BN068 谢建BN085 李芳雨BN091 储信艳BN087 焦碧碧BN084 禤聪BN095 王鑫BN060 崔超BN071 违法和不良信息举报电话：010-知乎回答问题编辑框用 Ctrl+V 粘贴图片是如何实现的？ - 知乎467被浏览<strong class="NumberBoard-itemValue" title="7,536分享邀请回答upload.zhihu.com/upload 的请求request 的格式是multipart/form- 图片的内容作为request body 的一部分一起传了过去这里大概就能推测出基本原理了：监听粘贴 → 获取粘贴内容 → 将内容上传搜索代码在 rich_text_editor.js 里面搜索 /upload 字样，搜到了这么一段this.Vz = "http://upload." + Ak.Sl + ":" + location.port + "/upload";
估计是设置属性，那么再搜 .Vz 看看哪里用到了，于是看到function zE(a, b) {
var c = new FormData;
c.append("via", "xhr2");
c.append("upload_file", b);
d = $.ajaxSettings.xhr();
d.withCredentials = i;
var f = $.ajax({url: a.Vz,data: c,processData: l,contentType: l,xhr: function() {
},type: "POST"}).done(function(a) {
啊，找到了，这里应该就是发送图片数据的地方，而且用了 FormData 这个 HTML5 特性简单说就是 ajax 以前只能向服务器发送文本，而 HTML5 提供的 XMLHttpRequest Level2 现在支持发送二进制数据了，这里的 c.append("upload_file", b) 里面 b 应该就是那个图片的二进制数据打断点继续追踪就容易多了，只要在这个地方打个断点，然后往编辑器里面粘贴一个截图Chrome 调试工具的 Call Stack 就会告诉你，程序的上一步在哪里看一看 a 对象的属性基本可以断定它是一个 Event 对象，而且这里的这段 function 就是对粘贴事件的处理，为了验证，搜索一下 .rw 就会看到这样一段 a.f().addEventListener("paste", u(this.rw, this));
确定推断无误，可以看到上面的处理函数中，通过 a.clipboardData 就能取到剪贴板中的数据，并且可以通过 clipboardData.types 来判断数据是不是图片。这么高级的 API 是哪里来的呢？搜一下就知道了 可以看到这个 API 属于 W3C 的标准（当然还是草案阶段），但是不属于 HTML5 另外代码中的重点是这么一段c.type.indexOf("image") && (zE(b, c.getAsFile()), a.preventDefault())
zE 就是上面的那个 ajax 发送函数，而通过 c.getAsFile() 可以从剪贴板中获取二进制的数据结论通过 Clipboard API 可以在用户粘贴时获知粘贴的内容，包括内容的格式（是否为图片），内容的二进制数据等等通过 XMLHttpRequest Level2 可以实现将二进制数据以 ajax 的方式发送到服务器，即实现了上传功能当然以上都需要浏览器的支持，估计IE下就悲剧了最后，我现在迫切期待新浪微博的发布框能支持这个功能15513 条评论分享收藏感谢收起function onPasteEvent (e)
if (e && e.clipboardData && e.clipboardData.getData)
if (/image/.test(e.clipboardData.types))
//粘贴图片
var imageContent = e.clipboardData.getData('image/xxxx');
//检测图片来源
//如果是最原始的 data，比如 QQ 截图、Word 里复制所产生，直接把 data 上传
//这一部分可能用了是 HTML5 中 HTTP_CONTENT_DISPOSITION 上传机制
//除了 HTML5，非显式的 input[type="file"] 应该是无法上传文件的
//如果是 file，上传到知乎服务器
//如果是外部网站 URL，后台 curl get 转移到知乎服务器
//最后生成一个知乎的 URL，作为 img 标签插入到 contentEditable div 中
else if (/text\/plain/.test(e.clipboardData.types)) {
//粘贴简单文本 ....
if (e.preventDefault)
e.stopPropagation();
e.preventDefault();
return false;
219 条评论分享收藏感谢收起}