正文

简述web的工作原理（简述Web的工作原理）

发布时间：2023-04-22 02:10:02 稿源：创意岭阅读： 93

大家好！今天让创意岭的小编来大家介绍下关于简述web的工作原理的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。

开始之前先推荐一个非常厉害的Ai人工智能工具，一键生成原创文章、方案、文案、工作计划、工作报告、论文、代码、作文、做题和对话答疑等等

只需要输入关键词，就能返回你想要的内容，越精准，写出的就越详细，有微信小程序端、在线网页版、PC客户端

官网：https://ai.de1919.com。

创意岭作为行业内优秀的企业，服务客户遍布全球各地，如需了解SEO相关业务请拨打电话175-8598-2043，或添加微信：1454722008

本文目录:

1、Web服务器是什么？通俗易懂的回答
2、web2.0的工作原理
3、什么是Web前端？
4、浏览器工作原理？

简述web的工作原理（简述Web的工作原理）

一、Web服务器是什么？通俗易懂的回答

WEB服务器也称为WWW(WORLD WIDE WEB)服务器，主要功能是提供网上信息浏览服务。 WWW 是 Internet 的多媒体信息查询工具，是 Internet 上发展起来的服务，也是发展最快和目前用的最广泛的服务。其工作特点为：

1、服务器是一种被动程序：只有当Internet上运行其他计算机中的浏览器发出的请求时，服务器才会响应。

2 、最常用的Web服务器是Apache和Microsoft的Internet信息服务器（Internet Information Services，IIS）。

3、Internet上的服务器也称为Web服务器，是一台在Internet上具有独立IP地址的计算机，可以向Internet上的客户机提供WWW、Email和FTP等各种Internet服务。

4、Web服务器是指驻留于因特网上某种类型计算机的程序。当Web浏览器（客户端）连到服务器上并请求文件时，服务器将处理该请求并将文件反馈到该浏览器上，附带的信息会告诉浏览器如何查看该文件。服务器使用HTTP（超文本传输协议）与客户机浏览器进行信息交流。

简述web的工作原理（简述Web的工作原理）

扩展资料：

工作原理：

1、连接过程：Web服务器和其浏览器之间所建立起来的一种连接。查看连接过程是否实现，用户可以找到和打开socket这个虚拟文件，这个文件的建立意味着连接过程这一步骤已经成功建立。

2、请求过程：Web的浏览器运用socket这个文件向其服务器而提出各种请求。

3、应答过程就是运用HTTP协议把在请求过程中所提出来的请求传输到Web的服务器，进而实施任务处理，然后运用HTTP协议把任务处理的结果传输到Web的浏览器，同时在Web的浏览器上面展示上述所请求之界面。

4、关闭连接就是当上一个过程--应答过程完成以后，Web服务器和其浏览器之间断开连接之过程。Web服务器上述4个步骤环环相扣、紧密相联，逻辑性比较强，可以支持多个进程、多个线程以及多个进程与多个线程相混合的技术。

考资料来源：百度百科-web服务器

二、web2.0的工作原理

最近互联网上比较火热的话题当然是关于WEB2.0的应用，其中AJAX又是WEB2.0的核心之一。AJAX是Asynchronous JavaScript and XML 的缩写。它并不是一门新的语言或技术，它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用，它包括

使用XHTML和CSS标准化呈现；

使用DOM实现动态显示和交互；

使用XML和XSLT进行数据交换与处理；

使用XMLHttpRequest进行异步数据读取；

最后用JavaScript绑定和处理所有数据；

Ajax的工作原理相当于在用户和服务器之间加了—个中间层，使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，从而达到节约ISP的空间及带宽租用成本的目的。

我们以两个验证通行证帐号是否存在的例子来讲述AJAX在实际中的应用：

(1) 用文本字符串的方式返回服务器的响应来验证网易通行证帐号是否存在；

(2) 以XMLDocument对象方式返回响应来验证金山通行证帐号是否存在；

首先，我们需要用JavaScript来创建XMLHttpRequest 类向服务器发送一个HTTP请求， XMLHttpRequest 类首先由Internet Explorer以ActiveX对象引入，被称为XMLHTTP。后来Mozilla、Netscape、Safari 和其他浏览器也提供了XMLHttpRequest类，不过它们创建XMLHttpRequest类的方法不同。

对于Internet Explorer浏览器，创建XMLHttpRequest 方法如下：

xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0

xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");

xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");

由于在不同Internet Explorer浏览器中XMLHTTP版本可能不一致，为了更好的兼容不同版本的Internet Explorer浏览器，因此我们需要根据不同版本的Internet Explorer浏览器来创建XMLHttpRequest类，上面代码就是根据不同的Internet Explorer浏览器创建XMLHttpRequest类的方法。

对于Mozilla、Netscape、Safari等浏览器，创建XMLHttpRequest 方法如下：

xmlhttp_request = new XMLHttpRequest();

如果服务器的响应没有XML mime-type header，某些Mozilla浏览器可能无法正常工作。为了解决这个问题，如果服务器响应的header不是text/xml，可以调用其它方法修改该header。

xmlhttp_request = new XMLHttpRequest();

xmlhttp_request.overrideMimeType('text/xml');

在实际应用中，为了兼容多种不同版本的浏览器，一般将创建XMLHttpRequest类的方法写成如下形式：

try{

if( window.ActiveXObject ){

for( var i = 5; i; i-- ){

try{

if( i == 2 ){

xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );

}else{

xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );

}

xmlhttp_request.setRequestHeader("Content-Type","text/xml");

xmlhttp_request.setRequestHeader("Content-Type","gb2312");

break;}

catch(e){

xmlhttp_request = false;

}

}else if( window.XMLHttpRequest ){

xmlhttp_request = new XMLHttpRequest();

if (xmlhttp_request.overrideMimeType) {

xmlhttp_request.overrideMimeType('text/xml');

}

}catch(e){

xmlhttp_request = false;

}

在定义了如何处理响应后，就要发送请求了。可以调用HTTP请求类的open()和send()方法，如下所示：

xmlhttp_request.open('GET', URL, true);

xmlhttp_request.send(null);

open()的第一个参数是HTTP请求方式—GET，POST或任何服务器所支持的您想调用的方式。按照HTTP规范，该参数要大写；否则，某些浏览器(如Firefox)可能无法处理请求。

第二个参数是请求页面的URL。

第三个参数设置请求是否为异步模式。如果是TRUE，JavaScript函数将继续执行，而不等待服务器响应。这就是"AJAX"中的"A"。

用JavaScript来创建XMLHttpRequest 类向服务器发送一个HTTP请求后，接下来要决定当收到服务器的响应后，需要做什么。这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名，如下所示：

xmlhttp_request.onreadystatechange =FunctionName;

FunctionName是用JavaScript创建的函数名，注意不要写成FunctionName()，当然我们也可以直接将JavaScript代码创建在onreadystatechange之后，例如：

xmlhttp_request.onreadystatechange = function(){

// JavaScript代码段

};

在这个函数中。首先要检查请求的状态。只有当一个完整的服务器响应已经收到了，函数才可以处理该响应。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。

readyState的取值如下：

0 (未初始化)

1 (正在装载)

2 (装载完毕)

3 (交互中)

4 (完成)

所以只有当readyState=4时，一个完整的服务器响应已经收到了，函数才可以处理该响应。具体代码如下：

if (http_request.readyState == 4) {

// 收到完整的服务器响应

} else {

// 没有收到完整的服务器响应

}

当readyState=4时，一个完整的服务器响应已经收到了，接着，函数会检查HTTP服务器响应的状态值。完整的状态取值可参见W3C文档。当HTTP服务器响应的值为200时，表示状态正常。

在检查完请求的状态值和响应的HTTP状态值后，就可以处理从服务器得到的数据了。有两种方式可以得到这些数据：

(1) 以文本字符串的方式返回服务器的响应

(2) 以XMLDocument对象方式返回响应

实例一：用文本字符串的方式返回服务器的响应来验证网易通行证帐号是否存在

首先，我们登陆网易通行证注册页面，可以看到检测用户名是否存在是将用户名提交给checkssn.jsp页面进行判断，格式为：

reg.163.com/register/checkssn.jsp?username=用户名

根据上面讲到的方法，我们可以利用AJAX技术对网易通行证用户名进行检测：

第一步：新建一个基于Xhtml标准的网页，在<head>区域插入Javascript函数如下：

function getXMLRequester( ){

var xmlhttp_request = false;

try{

if( window.ActiveXObject ){

for( var i = 5; i; i-- ){

try{

if( i == 2 ){

xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );

}else{

xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );

xmlhttp_request.setRequestHeader("Content-Type","text/xml");

xmlhttp_request.setRequestHeader("Content-Type","gb2312");

}

break;}

catch(e){

xmlhttp_request = false;

}

}else if( window.XMLHttpRequest ){

xmlhttp_request = new XMLHttpRequest();

if (xmlhttp_request.overrideMimeType) {

xmlhttp_request.overrideMimeType('text/xml');

}

}catch(e){

xmlhttp_request = false;

}

return xmlhttp_request ;

}

function IDRequest(n) {//定义收到服务器的响应后需要执行的JavaScript函数

url=n+document.getElementById('163id').value;//定义网址参数

xmlhttp_request=getXMLRequester();//调用创建XMLHttpRequest的函数

xmlhttp_request.onreadystatechange = doContents;//调用doContents函数

xmlhttp_request.open('GET', url, true);

xmlhttp_request.send(null);

}

function doContents() {

if (xmlhttp_request.readyState == 4) {// 收到完整的服务器响应

if (xmlhttp_request.status == 200) {//HTTP服务器响应的值OK

document.getElementById('message').innerHTML = xmlhttp_request.responseText;

//将服务器返回的字符串写到页面中ID为message的区域

} else {

alert(http_request.status);

}

</script>

在<body>区域建立一个文本框，id为163id

再建一个id为messsge的空白区域用来显示返回字符串(也可以通过Javascript函数截取一部分字符串显示)：

这样，一个基于AJAX技术的用户名检测页面就做好了，不过这个页面将返回服务器响应生成页面的所有字符串，当然还可以对返回的字符串进行一些操作，便于应用到不同的需要当中。

实例二：以XMLDocument对象方式返回响应来验证金山通行证帐号是否存在

在上面的例子中，当服务器对HTTP请求的响应被收到后，我们会调用请求对象的reponseText属性。该属性包含了服务器返回响应文件的内容。现在我们以XMLDocument对象方式返回响应，此时将不再需要reponseText属性而使用responseXML属性。

首先登陆金山通行证注册页面，我们发现金山通行证用户名的检测方式为：

pass.kingsoft.com/ksgweb/jsp/login/uid.jsp?uid=用户名,并且返回XML数据:

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>

<method>isExistedUid</method>

</response>

当result值为-1时表示此用户名已被注册，当result值为-2时表示此用户名尚未注册，因此通过对result值的判断可以知道用户名是否被注册。

对上例代码进行修改：

首先找到

document.getElementById('message').innerHTML = xmlhttp_request.responseText;

改为:

var response = xmlhttp_request.responseXML.documentElement;

var result = response.getElementsByTagName('result')[0].firstChild.data;//返回result节点数据

if(result ==-2){

document.getElementById('message').innerHTML = "用户名"+document.getElementById('163id').value+"尚未注册";

}

else if(result ==-1){

document.getElementById('message').innerHTML = "对不起,用户名"+document.getElementById('163id').value+"已经注册";

}

通过以上两个实例说明了AJAX的客户端基础应用，采用的是网易和金山现成的服务器端程序，当然为了开发合适自己页面的程序，还需要对自己编写服务器端程序，这设计到程序语言及数据库的操作，对于有一定程序基础的读者一定不是很难的事情，本文着重讨论了客户端AJAX的应用体验，广大读者可以根据本文讲的原理结合各种样式表现手法作出绚丽多彩的应用，希望本文能够起到抛砖引玉的作用。

附录

(一) HTTP 1.1支持的状态代码

100 Continue 初始的请求已经接受，客户应当继续发送请求的其余部分

101 Switching Protocols 服务器将遵从客户的请求转换到另外一种协议

200 OK 一切正常，对GET和POST请求的应答文档跟在后面。

201 Created 服务器已经创建了文档，Location头给出了它的URL。

202 Accepted 已经接受请求，但处理尚未完成。

203 Non-Authoritative Information 文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝

204 No Content 没有新文档，浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的

205 Reset Content 没有新的内容，但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容

206 Partial Content 客户发送了一个带有Range头的GET请求，服务器完成了它

300 Multiple Choices 客户请求的文档可以在多个位置找到，这些位置已经在返回的文档内列出。如果服务器要提出优先选择，则应该在Location应答头指明。

301 Moved Permanently 客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。

302 Found 类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。

303 See Other 类似于301/302，不同之处在于，如果原来的请求是POST，Location头指定的重定向目标文档应该通过GET提取

304 Not Modified 客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。

305 Use Proxy 客户请求的文档应该通过Location头所指明的代理服务器提取

307 Temporary Redirect 和302（Found）相同。许多浏览器会错误地响应302应答进行重定向，即使原来的请求是POST，即使它实际上只能在POST请求的应答是303时才能重定向。由于这个原因，HTTP 1.1新增了307，以便更加清除地区分几个状态代码：当出现303应答时，浏览器可以跟随重定向的GET和POST请求；如果是307应答，则浏览器只能跟随对GET请求的重定向。

400 Bad Request 请求出现语法错误。

401 Unauthorized 客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头，浏览器据此显示用户名字/密码对话框，然后在填写合适的Authorization头后再次发出请求。

403 Forbidden 资源不可用。

404 Not Found 无法找到指定位置的资源

405 Method Not Allowed 请求方法（GET、POST、HEAD、DELETE、PUT、TRACE等）对指定的资源不适用。

406 Not Acceptable 指定的资源已经找到，但它的MIME类型和客户在Accpet头中所指定的不兼容

407 Proxy Authentication Required 类似于401，表示客户必须先经过代理服务器的授权。

408 Request Timeout 在服务器许可的等待时间内，客户一直没有发出任何请求。客户可以在以后重复同一请求。

409 Conflict 通常和PUT请求有关。由于请求和资源的当前状态相冲突，因此请求不能成功。

410 Gone 所请求的文档已经不再可用，而且服务器不知道应该重定向到哪一个地址。它和404的不同在于，返回407表示文档永久地离开了指定的位置，而404表示由于未知的原因文档不可用。

411 Length Required 服务器不能处理请求，除非客户发送一个Content-Length头。

412 Precondition Failed 请求头中指定的一些前提条件失败

413 Request Entity Too Large 目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求，则应该提供一个Retry-After头

414 Request URI Too Long URI太长

416 Requested Range Not Satisfiable 服务器不能满足客户在请求中指定的Range头

500 Internal Server Error 服务器遇到了意料不到的情况，不能完成客户的请求

501 Not Implemented 服务器不支持实现请求所需要的功能。例如，客户发出了一个服务器不支持的PUT请求

502 Bad Gateway 服务器作为网关或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答

503 Service Unavailable 服务器由于维护或者负载过重未能应答。例如，Servlet可能在数据库连接池已满的情况下返回503。服务器返回503时可以提供一个Retry-After头

504 Gateway Timeout 由作为代理或网关的服务器使用，表示不能及时地从远程服务器获得应答

505 HTTP Version Not Supported 服务器不支持请求中所指明的HTTP版本

(二) XMLHttpRequest 对象方法

abort() 停止当前请求

getAllResponseHeaders() 作为字符串返问完整的headers

getResponseHeader("headerLabel") 作为字符串返问单个的header标签

open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 设置未决的请求的目标 URL, 方法, 和其他参数

send(content) 发送请求

setRequestHeader("label", "value") 设置header并和请求一起发送

(三) XMLHttpRequest 对象属性

onreadystatechange 状态改变的事件触发器

readyState 对象状态(integer):

0 = 未初始化

1 = 读取中

2 = 已读取

3 = 交互中

4 = 完成

responseText 服务器进程返回数据的文本版本

responseXML 服务器进程返回数据的兼容DOM的XML文档对象

status 服务器返回的状态码, 如：404 = "文件末找到" 、200 ="成功"

statusText 服务器返回的状态文本信息

三、什么是Web前端？

许多初学者对WEB前端还很陌生，不知道什么是Web前端？web前端是干什么的？以及web前端技术需要学习什么？其实Web前端开发也戏称“web前端开发攻城狮”，目前这个职位也叫“大前端”。这个职位好多人并不知道是怎么叫出来的，那么我偷偷告诉你：其实是淘宝团队，发明出来的本土化的名称，因为历史原因，淘宝在2005以后迅速崛起，并且爆发式的访问量，让淘宝网的用户体验受到巨大考验和急需前进。

然后淘宝官方第一次有了【web前端开发】这个字眼和招聘职位，或许其他网站也想到了这样一种描述，但是毕竟知名度巨高的淘宝，受关注度自然高，口碑相传，就把前端开发这个叫法发扬光大了。

而那时候的网页设计师如果要入此道，必须要掌握的就是Dreamweaver，并不是说只有他能写html和css，而是它在当时的自动提示实在太好用、太强大了，简直不用费脑细胞，你就可以轻轻松松地完成你所想。在当时前端工具和编辑器贫乏的时代，这个绝对是神奇级别了（当然后来写的多了都熟悉基本不用提示的）。当年还有很多基于Dreamweaver构建网站的教程，那时候真的是个基情满满的年代，这些工具类的历史产物，有兴趣的朋友可以去了解一下就好了.

Web前端工程师主要做什么？前端工程师需要的知识和技能？

前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲，前端工程师使用HTML、CSS、JavaScript等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域。

前端是最接近产品和设计的工程师，起到衔接产品和技术的作用，前端为用户可以看到的部分负责，所以也是最接近用户的工程师。

在多终端的时代，如果一个产品同时支持PC、移动端，前端工程师还需要和更多的角色打交道。

前端要解决界面和交互问题，实际上UI层面上的问题一直是软件工程方面的一个难题，因为UI不停地在变化。浏览器各个版本的兼容性、Web标准、移动设备、多终端适配，给了前端工程师很大的挑战，对前端工程师的能力也有很高的要求。许多UI问题有不只一种解决方法，许多问题有非常巧妙的思路和精彩的解决办法，前端在工程师群体里是属于非常有创造力的一个群体，因为这个行业需要丰富的创造力和想象力。

前端工程师还是Web标准的制定者、实践者和推动者，而现在的W3C标准不仅仅局限于浏览器，还包括各种手持智能设备，车载设备、智能家居等等。在未来万物互联的时代，前端将不仅仅是网页上的工程师，而是所有人机交互领域的工程师。

web前端自学建议：

1、作为一个初学者，你必须明确系统的学习方案，我建议一定要有一个指导人，全靠自己学，放弃的几率非常大，在你对于web前端还没有任何概念的时候，需要一个人领进门，之后就全靠自己钻研，第一步就是确定web前端都需要学哪些东西，并且在多长时间内学完，建议时间6个月保底。

2、视频为主，书为辅。很多初学者在学习前端的时候非常喜欢去买书，但是最后的结果是什么？看来看去什么都不会写，所以在这里告诉大家，书可以看，但是是建立在你已经对于某个知识点有了具体的操作的执行后，再用书去巩固概念，这样更加利于你对知识的理解。

3、对于学习技术来讲，掌握一个学习方法是非常重要的，其实对于学习web前端来讲，学习方法确实很多都是相通的，一旦学习方法不对，可能就会造成“方法不对，努力白费”。其实关于这反面还是很多的，我就简单说个例子，有的人边听课边敲代码，这样是不对的，听课的时候就专心听，做题的时候就专心做题，这都是过来人的经验，一定要听。根据每个人的不同，可能学习方法也会有所出路，找到适合自己的学习方法是学习的前提。