正文

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

發(fā)布時間：2023-04-22 02:10:02 稿源：創(chuàng)意嶺閱讀： 93

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關于簡述web的工作原理的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

開始之前先推薦一個非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計劃、工作報告、論文、代碼、作文、做題和對話答疑等等

只需要輸入關鍵詞，就能返回你想要的內容，越精準，寫出的就越詳細，有微信小程序端、在線網頁版、PC客戶端

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

創(chuàng)意嶺作為行業(yè)內優(yōu)秀的企業(yè)，服務客戶遍布全球各地，如需了解SEO相關業(yè)務請撥打電話175-8598-2043，或添加微信：1454722008

本文目錄:

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

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

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

WEB服務器也稱為WWW(WORLD WIDE WEB)服務器，主要功能是提供網上信息瀏覽服務。 WWW 是 Internet 的多媒體信息查詢工具，是 Internet 上發(fā)展起來的服務，也是發(fā)展最快和目前用的最廣泛的服務。其工作特點為：

1、服務器是一種被動程序：只有當Internet上運行其他計算機中的瀏覽器發(fā)出的請求時，服務器才會響應。

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

3、Internet上的服務器也稱為Web服務器，是一臺在Internet上具有獨立IP地址的計算機，可以向Internet上的客戶機提供WWW、Email和FTP等各種Internet服務。

4、Web服務器是指駐留于因特網上某種類型計算機的程序。當Web瀏覽器（客戶端）連到服務器上并請求文件時，服務器將處理該請求并將文件反饋到該瀏覽器上，附帶的信息會告訴瀏覽器如何查看該文件。服務器使用HTTP（超文本傳輸協(xié)議）與客戶機瀏覽器進行信息交流。

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

擴展資料：

工作原理：

1、連接過程：Web服務器和其瀏覽器之間所建立起來的一種連接。查看連接過程是否實現(xiàn)，用戶可以找到和打開socket這個虛擬文件，這個文件的建立意味著連接過程這一步驟已經成功建立。

2、請求過程：Web的瀏覽器運用socket這個文件向其服務器而提出各種請求。

3、應答過程就是運用HTTP協(xié)議把在請求過程中所提出來的請求傳輸?shù)絎eb的服務器，進而實施任務處理，然后運用HTTP協(xié)議把任務處理的結果傳輸?shù)絎eb的瀏覽器，同時在Web的瀏覽器上面展示上述所請求之界面。

4、關閉連接就是當上一個過程--應答過程完成以后，Web服務器和其瀏覽器之間斷開連接之過程。Web服務器上述4個步驟環(huán)環(huán)相扣、緊密相聯(lián)，邏輯性比較強，可以支持多個進程、多個線程以及多個進程與多個線程相混合的技術。

考資料來源：百度百科-web服務器

二、web2.0的工作原理

最近互聯(lián)網上比較火熱的話題當然是關于WEB2.0的應用，其中AJAX又是WEB2.0的核心之一。AJAX是Asynchronous JavaScript and XML 的縮寫。它并不是一門新的語言或技術，它實際上是幾項技術按一定的方式組合在一在同共的協(xié)作中發(fā)揮各自的作用，它包括

使用XHTML和CSS標準化呈現(xiàn)；

使用DOM實現(xiàn)動態(tài)顯示和交互；

使用XML和XSLT進行數(shù)據(jù)交換與處理；

使用XMLHttpRequest進行異步數(shù)據(jù)讀取；

最后用JavaScript綁定和處理所有數(shù)據(jù)；

Ajax的工作原理相當于在用戶和服務器之間加了—個中間層，使用戶操作與服務器響應異步化。這樣把以前的一些服務器負擔的工作轉嫁到客戶端，利于客戶端閑置的處理能力來處理，減輕服務器和帶寬的負擔，從而達到節(jié)約ISP的空間及帶寬租用成本的目的。

我們以兩個驗證通行證帳號是否存在的例子來講述AJAX在實際中的應用：

(1) 用文本字符串的方式返回服務器的響應來驗證網易通行證帳號是否存在；

(2) 以XMLDocument對象方式返回響應來驗證金山通行證帳號是否存在；

首先，我們需要用JavaScript來創(chuàng)建XMLHttpRequest 類向服務器發(fā)送一個HTTP請求， XMLHttpRequest 類首先由Internet Explorer以ActiveX對象引入，被稱為XMLHTTP。后來Mozilla、Netscape、Safari 和其他瀏覽器也提供了XMLHttpRequest類，不過它們創(chuàng)建XMLHttpRequest類的方法不同。

對于Internet Explorer瀏覽器，創(chuàng)建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瀏覽器，因此我們需要根據(jù)不同版本的Internet Explorer瀏覽器來創(chuàng)建XMLHttpRequest類，上面代碼就是根據(jù)不同的Internet Explorer瀏覽器創(chuàng)建XMLHttpRequest類的方法。

對于Mozilla、Netscape、Safari等瀏覽器，創(chuàng)建XMLHttpRequest 方法如下：

xmlhttp_request = new XMLHttpRequest();

如果服務器的響應沒有XML mime-type header，某些Mozilla瀏覽器可能無法正常工作。為了解決這個問題，如果服務器響應的header不是text/xml，可以調用其它方法修改該header。

xmlhttp_request = new XMLHttpRequest();

xmlhttp_request.overrideMimeType('text/xml');

在實際應用中，為了兼容多種不同版本的瀏覽器，一般將創(chuàng)建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;

}

在定義了如何處理響應后，就要發(fā)送請求了?？梢哉{用HTTP請求類的open()和send()方法，如下所示：

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

xmlhttp_request.send(null);

open()的第一個參數(shù)是HTTP請求方式—GET，POST或任何服務器所支持的您想調用的方式。按照HTTP規(guī)范，該參數(shù)要大寫；否則，某些瀏覽器(如Firefox)可能無法處理請求。

第二個參數(shù)是請求頁面的URL。

第三個參數(shù)設置請求是否為異步模式。如果是TRUE，JavaScript函數(shù)將繼續(xù)執(zhí)行，而不等待服務器響應。這就是"AJAX"中的"A"。

用JavaScript來創(chuàng)建XMLHttpRequest 類向服務器發(fā)送一個HTTP請求后，接下來要決定當收到服務器的響應后，需要做什么。這需要告訴HTTP請求對象用哪一個JavaScript函數(shù)處理這個響應。可以將對象的onreadystatechange屬性設置為要使用的JavaScript的函數(shù)名，如下所示：

xmlhttp_request.onreadystatechange =FunctionName;

FunctionName是用JavaScript創(chuàng)建的函數(shù)名，注意不要寫成FunctionName()，當然我們也可以直接將JavaScript代碼創(chuàng)建在onreadystatechange之后，例如：

xmlhttp_request.onreadystatechange = function(){

// JavaScript代碼段

};

在這個函數(shù)中。首先要檢查請求的狀態(tài)。只有當一個完整的服務器響應已經收到了，函數(shù)才可以處理該響應。XMLHttpRequest 提供了readyState屬性來對服務器響應進行判斷。

readyState的取值如下：

0 (未初始化)

1 (正在裝載)

2 (裝載完畢)

3 (交互中)

4 (完成)

所以只有當readyState=4時，一個完整的服務器響應已經收到了，函數(shù)才可以處理該響應。具體代碼如下：

if (http_request.readyState == 4) {

// 收到完整的服務器響應

} else {

// 沒有收到完整的服務器響應

}

當readyState=4時，一個完整的服務器響應已經收到了，接著，函數(shù)會檢查HTTP服務器響應的狀態(tài)值。完整的狀態(tài)取值可參見W3C文檔。當HTTP服務器響應的值為200時，表示狀態(tài)正常。

在檢查完請求的狀態(tài)值和響應的HTTP狀態(tài)值后，就可以處理從服務器得到的數(shù)據(jù)了。有兩種方式可以得到這些數(shù)據(jù)：

(1) 以文本字符串的方式返回服務器的響應

(2) 以XMLDocument對象方式返回響應

實例一：用文本字符串的方式返回服務器的響應來驗證網易通行證帳號是否存在

首先，我們登陸網易通行證注冊頁面，可以看到檢測用戶名是否存在是將用戶名提交給checkssn.jsp頁面進行判斷，格式為：

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

根據(jù)上面講到的方法，我們可以利用AJAX技術對網易通行證用戶名進行檢測：

第一步：新建一個基于Xhtml標準的網頁，在<head>區(qū)域插入Javascript函數(shù)如下：

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) {//定義收到服務器的響應后需要執(zhí)行的JavaScript函數(shù)

url=n+document.getElementById('163id').value;//定義網址參數(shù)

xmlhttp_request=getXMLRequester();//調用創(chuàng)建XMLHttpRequest的函數(shù)

xmlhttp_request.onreadystatechange = doContents;//調用doContents函數(shù)

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的區(qū)域

} else {

alert(http_request.status);

}

</script>

在<body>區(qū)域建立一個文本框，id為163id

再建一個id為messsge的空白區(qū)域用來顯示返回字符串(也可以通過Javascript函數(shù)截取一部分字符串顯示)：

這樣，一個基于AJAX技術的用戶名檢測頁面就做好了，不過這個頁面將返回服務器響應生成頁面的所有字符串，當然還可以對返回的字符串進行一些操作，便于應用到不同的需要當中。

實例二：以XMLDocument對象方式返回響應來驗證金山通行證帳號是否存在

在上面的例子中，當服務器對HTTP請求的響應被收到后，我們會調用請求對象的reponseText屬性。該屬性包含了服務器返回響應文件的內容?，F(xiàn)在我們以XMLDocument對象方式返回響應，此時將不再需要reponseText屬性而使用responseXML屬性。

首先登陸金山通行證注冊頁面，我們發(fā)現(xiàn)金山通行證用戶名的檢測方式為：

pass.kingsoft.com/ksgweb/jsp/login/uid.jsp?uid=用戶名,并且返回XML數(shù)據(jù):

<?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節(jié)點數(shù)據(jù)

if(result ==-2){

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

}

else if(result ==-1){

document.getElementById('message').innerHTML = "對不起,用戶名"+document.getElementById('163id').value+"已經注冊";

}

通過以上兩個實例說明了AJAX的客戶端基礎應用，采用的是網易和金山現(xiàn)成的服務器端程序，當然為了開發(fā)合適自己頁面的程序，還需要對自己編寫服務器端程序，這設計到程序語言及數(shù)據(jù)庫的操作，對于有一定程序基礎的讀者一定不是很難的事情，本文著重討論了客戶端AJAX的應用體驗，廣大讀者可以根據(jù)本文講的原理結合各種樣式表現(xiàn)手法作出絢麗多彩的應用，希望本文能夠起到拋磚引玉的作用。

附錄

(一) HTTP 1.1支持的狀態(tài)代碼

100 Continue 初始的請求已經接受，客戶應當繼續(xù)發(fā)送請求的其余部分

101 Switching Protocols 服務器將遵從客戶的請求轉換到另外一種協(xié)議

200 OK 一切正常，對GET和POST請求的應答文檔跟在后面。

201 Created 服務器已經創(chuàng)建了文檔，Location頭給出了它的URL。

202 Accepted 已經接受請求，但處理尚未完成。

203 Non-Authoritative Information 文檔已經正常地返回，但一些應答頭可能不正確，因為使用的是文檔的拷貝

204 No Content 沒有新文檔，瀏覽器應該繼續(xù)顯示原來的文檔。如果用戶定期地刷新頁面，而Servlet可以確定用戶文檔足夠新，這個狀態(tài)代碼是很有用的

205 Reset Content 沒有新的內容，但瀏覽器應該重置它所顯示的內容。用來強制瀏覽器清除表單輸入內容

206 Partial Content 客戶發(fā)送了一個帶有Range頭的GET請求，服務器完成了它

300 Multiple Choices 客戶請求的文檔可以在多個位置找到，這些位置已經在返回的文檔內列出。如果服務器要提出優(yōu)先選擇，則應該在Location應答頭指明。

301 Moved Permanently 客戶請求的文檔在其他地方，新的URL在Location頭中給出，瀏覽器應該自動地訪問新的URL。

302 Found 類似于301，但新的URL應該被視為臨時性的替代，而不是永久性的。

303 See Other 類似于301/302，不同之處在于，如果原來的請求是POST，Location頭指定的重定向目標文檔應該通過GET提取

304 Not Modified 客戶端有緩沖的文檔并發(fā)出了一個條件性的請求（一般是提供If-Modified-Since頭表示客戶只想比指定日期更新的文檔）。服務器告訴客戶，原來緩沖的文檔還可以繼續(xù)使用。

305 Use Proxy 客戶請求的文檔應該通過Location頭所指明的代理服務器提取

307 Temporary Redirect 和302（Found）相同。許多瀏覽器會錯誤地響應302應答進行重定向，即使原來的請求是POST，即使它實際上只能在POST請求的應答是303時才能重定向。由于這個原因，HTTP 1.1新增了307，以便更加清除地區(qū)分幾個狀態(tài)代碼：當出現(xiàn)303應答時，瀏覽器可以跟隨重定向的GET和POST請求；如果是307應答，則瀏覽器只能跟隨對GET請求的重定向。

400 Bad Request 請求出現(xiàn)語法錯誤。

401 Unauthorized 客戶試圖未經授權訪問受密碼保護的頁面。應答中會包含一個WWW-Authenticate頭，瀏覽器據(jù)此顯示用戶名字/密碼對話框，然后在填寫合適的Authorization頭后再次發(fā)出請求。

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 在服務器許可的等待時間內，客戶一直沒有發(fā)出任何請求。客戶可以在以后重復同一請求。

409 Conflict 通常和PUT請求有關。由于請求和資源的當前狀態(tài)相沖突，因此請求不能成功。

410 Gone 所請求的文檔已經不再可用，而且服務器不知道應該重定向到哪一個地址。它和404的不同在于，返回407表示文檔永久地離開了指定的位置，而404表示由于未知的原因文檔不可用。

411 Length Required 服務器不能處理請求，除非客戶發(fā)送一個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 服務器不支持實現(xiàn)請求所需要的功能。例如，客戶發(fā)出了一個服務器不支持的PUT請求

502 Bad Gateway 服務器作為網關或者代理時，為了完成請求訪問下一個服務器，但該服務器返回了非法的應答

503 Service Unavailable 服務器由于維護或者負載過重未能應答。例如，Servlet可能在數(shù)據(jù)庫連接池已滿的情況下返回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, 方法, 和其他參數(shù)

send(content) 發(fā)送請求

setRequestHeader("label", "value") 設置header并和請求一起發(fā)送

(三) XMLHttpRequest 對象屬性

onreadystatechange 狀態(tài)改變的事件觸發(fā)器

readyState 對象狀態(tài)(integer):

0 = 未初始化

1 = 讀取中

2 = 已讀取

3 = 交互中

4 = 完成

responseText 服務器進程返回數(shù)據(jù)的文本版本

responseXML 服務器進程返回數(shù)據(jù)的兼容DOM的XML文檔對象

status 服務器返回的狀態(tài)碼, 如：404 = "文件末找到" 、200 ="成功"

statusText 服務器返回的狀態(tài)文本信息

三、什么是Web前端？

許多初學者對WEB前端還很陌生，不知道什么是Web前端？web前端是干什么的？以及web前端技術需要學習什么？其實Web前端開發(fā)也戲稱“web前端開發(fā)攻城獅”，目前這個職位也叫“大前端”。這個職位好多人并不知道是怎么叫出來的，那么我偷偷告訴你：其實是淘寶團隊，發(fā)明出來的本土化的名稱，因為歷史原因，淘寶在2005以后迅速崛起，并且爆發(fā)式的訪問量，讓淘寶網的用戶體驗受到巨大考驗和急需前進。

然后淘寶官方第一次有了【web前端開發(fā)】這個字眼和招聘職位，或許其他網站也想到了這樣一種描述，但是畢竟知名度巨高的淘寶，受關注度自然高，口碑相傳，就把前端開發(fā)這個叫法發(fā)揚光大了。

而那時候的網頁設計師如果要入此道，必須要掌握的就是Dreamweaver，并不是說只有他能寫html和css，而是它在當時的自動提示實在太好用、太強大了，簡直不用費腦細胞，你就可以輕輕松松地完成你所想。在當時前端工具和編輯器貧乏的時代，這個絕對是神奇級別了（當然后來寫的多了都熟悉基本不用提示的）。當年還有很多基于Dreamweaver構建網站的教程，那時候真的是個基情滿滿的年代，這些工具類的歷史產物，有興趣的朋友可以去了解一下就好了.

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

前端工程師是互聯(lián)網時代軟件產品研發(fā)中不可缺少的一種專業(yè)研發(fā)角色。從狹義上講，前端工程師使用HTML、CSS、JavaScript等專業(yè)技能和工具將產品UI設計稿實現(xiàn)成網站產品，涵蓋用戶PC端、移動端網頁，處理視覺和交互問題。從廣義上來講，所有用戶終端產品與視覺和交互有關的部分，都是前端工程師的專業(yè)領域。

前端是最接近產品和設計的工程師，起到銜接產品和技術的作用，前端為用戶可以看到的部分負責，所以也是最接近用戶的工程師。

在多終端的時代，如果一個產品同時支持PC、移動端，前端工程師還需要和更多的角色打交道。

前端要解決界面和交互問題，實際上UI層面上的問題一直是軟件工程方面的一個難題，因為UI不停地在變化。瀏覽器各個版本的兼容性、Web標準、移動設備、多終端適配，給了前端工程師很大的挑戰(zhàn)，對前端工程師的能力也有很高的要求。許多UI問題有不只一種解決方法，許多問題有非常巧妙的思路和精彩的解決辦法，前端在工程師群體里是屬于非常有創(chuàng)造力的一個群體，因為這個行業(yè)需要豐富的創(chuàng)造力和想象力。

前端工程師還是Web標準的制定者、實踐者和推動者，而現(xiàn)在的W3C標準不僅僅局限于瀏覽器，還包括各種手持智能設備，車載設備、智能家居等等。在未來萬物互聯(lián)的時代，前端將不僅僅是網頁上的工程師，而是所有人機交互領域的工程師。

web前端自學建議：

1、作為一個初學者，你必須明確系統(tǒng)的學習方案，我建議一定要有一個指導人，全靠自己學，放棄的幾率非常大，在你對于web前端還沒有任何概念的時候，需要一個人領進門，之后就全靠自己鉆研，第一步就是確定web前端都需要學哪些東西，并且在多長時間內學完，建議時間6個月保底。

2、視頻為主，書為輔。很多初學者在學習前端的時候非常喜歡去買書，但是最后的結果是什么？看來看去什么都不會寫，所以在這里告訴大家，書可以看，但是是建立在你已經對于某個知識點有了具體的操作的執(zhí)行后，再用書去鞏固概念，這樣更加利于你對知識的理解。

3、對于學習技術來講，掌握一個學習方法是非常重要的，其實對于學習web前端來講，學習方法確實很多都是相通的，一旦學習方法不對，可能就會造成“方法不對，努力白費”。其實關于這反面還是很多的，我就簡單說個例子，有的人邊聽課邊敲代碼，這樣是不對的，聽課的時候就專心聽，做題的時候就專心做題，這都是過來人的經驗，一定要聽。根據(jù)每個人的不同，可能學習方法也會有所出路，找到適合自己的學習方法是學習的前提。