web網(wǎng)頁(yè)開(kāi)發(fā)

發(fā)表時(shí)間：2018-9-19

發(fā)布人：葵宇科技

瀏覽次數(shù)：36

這里主要總結(jié)，web網(wǎng)頁(yè)的開(kāi)發(fā)，即我們經(jīng)常所看見(jiàn)的淘寶，新聞等網(wǎng)頁(yè)。我們將一個(gè)所見(jiàn)的網(wǎng)頁(yè)中每次刷新不變的部分，稱為靜態(tài)。這些靜態(tài)由HTML和CSS組成，他們形成了網(wǎng)頁(yè)的樣式。HTML是一種標(biāo)記語(yǔ)言，用來(lái)結(jié)構(gòu)化我們的網(wǎng)頁(yè)內(nèi)容和賦予內(nèi)容含義（形成樹(shù)形結(jié)構(gòu)），例如定義段落、標(biāo)題、和數(shù)據(jù)表,或在頁(yè)面中嵌入圖片和視頻。CSS 是一種樣式規(guī)則語(yǔ)言，例如設(shè)置背景顏色和字體，內(nèi)容的排版，然后我們將這些樣式應(yīng)用于我們的HTML。

可參考教程:MDN

一個(gè)簡(jiǎn)單的HTML文件人下所示：

<!DOCTYPE html>
<html>
	<head>
	/*head主要有HTML的標(biāo)題，指定你的文檔中字符的編碼，作者和描述，在HTML中應(yīng)用CSS和JavaScript等	*/
		<meta charset="UTF-8">
		<title></title><!--標(biāo)題-->
		<link rel="stylesheet" type="text/css" href="css/css.css"/><!--引用外部css-->
		<style type="text/css">/*使用內(nèi)部CSS*/
			.hello{
//    設(shè)置class=hello的樣式
				color: red;
			}
		</style>
	</head>
	<body>
	//body是HTML的主要內(nèi)容，描述了頁(yè)面的結(jié)構(gòu)。
		<h1>hello</h1>
		<div class="hello">	
		</div>
	</body>
	<script src="js/main.js" type="text/javascript" charset="utf-8"></script><!--引用外部js-->
	<script type="text/javascript">/*使用內(nèi)部js*/
		var hello=document.querySelector(".hello");<!—采用DOM的API,引用html中的元素-->
		var newhello=document.createElement("button");<!--新建html中的元素-->
		newhello.textContent="botton";//設(shè)置這個(gè)元素的屬性以及內(nèi)容
		hello.appendChild(newhello);<!--在元素后面新插入元素-->
		newhello.onclick()=function (){
			/*onclick 為鼠標(biāo)點(diǎn)擊事件
			 鼠標(biāo)點(diǎn)擊時(shí)，觸發(fā)事件，運(yùn)行后面的函數(shù)function*/
		}
		function hanshu (){
//			單獨(dú)的函數(shù)
		}
	</script>
</html>

如果說(shuō)HTML和css幫助我們完成了頁(yè)面上的樣式的設(shè)計(jì)，那么JavaScript就幫助我們完成與用戶之間的交互，如用戶點(diǎn)擊，滑動(dòng)，輸入等。Js(JavaScript的簡(jiǎn)稱)是一種編程語(yǔ)言，允許你創(chuàng)建動(dòng)態(tài)更新的內(nèi)容，控制多媒體，圖像動(dòng)畫(huà)，和一些其他的東西。JS通過(guò)對(duì)HTML上元素的引用對(duì)網(wǎng)頁(yè)上產(chǎn)生的事件（瀏覽器中發(fā)生的動(dòng)作，例如點(diǎn)擊按鈕，加載頁(yè)面或播放視頻）進(jìn)行響應(yīng)。

大多數(shù)現(xiàn)代的web站點(diǎn)是動(dòng)態(tài)的—它們?cè)诜?wù)端使用各種類型的數(shù)據(jù)庫(kù)來(lái)存儲(chǔ)數(shù)據(jù)(服務(wù)器), 之后通過(guò)運(yùn)行服務(wù)器（server-side）代碼來(lái)重新獲取需要的數(shù)據(jù)，把其數(shù)據(jù)插入到靜態(tài)頁(yè)面的模板中，并且生成出HTML渲染到用戶瀏覽上。為此使用HTTP/HTTPS協(xié)議在 Web 上進(jìn)行數(shù)據(jù)交換，并在數(shù)據(jù)傳輸?shù)倪^(guò)程中需經(jīng)過(guò)DNS和TCP/IP 協(xié)議。它是client-server協(xié)議。客戶端和服務(wù)端通過(guò)交換各自的消息（與數(shù)據(jù)流正好相反）進(jìn)行交互。由像瀏覽器這樣的客戶端發(fā)出的消息叫做 requests，被服務(wù)端回應(yīng)的消息叫做
responses。它是應(yīng)用層的協(xié)議，通過(guò)TCP（HTTP），或者是TLS（加密的TCP ,HTTPS）連接來(lái)發(fā)送。

舉個(gè)例子：
當(dāng)你在瀏覽器里輸入一個(gè)網(wǎng)址時(shí)（在我們的例子里就是走向商店的路上時(shí)）：

瀏覽器在域名系統(tǒng)服務(wù)器（DNS）上找出存放網(wǎng)頁(yè)的服務(wù)器的實(shí)際地址（IP地址）（找出商店的位置）。
瀏覽器發(fā)送 HTTP 請(qǐng)求信息（數(shù)據(jù)的傳輸遵守TCP/IP 協(xié)議）到服務(wù)器來(lái)請(qǐng)拷貝一份網(wǎng)頁(yè)到客戶端（你走到商店并下訂單）。
服務(wù)器同意客戶端的請(qǐng)求后，會(huì)返回一個(gè)“200 OK”信息，同意傳輸，然后開(kāi)始將網(wǎng)頁(yè)的文件以數(shù)據(jù)包的形式傳輸?shù)綖g覽器。
瀏覽器將數(shù)據(jù)包聚集成完整的網(wǎng)頁(yè)然后將網(wǎng)頁(yè)呈現(xiàn)給你。

這樣一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)就完成了，但是在實(shí)際過(guò)程中，仍會(huì)許多問(wèn)題。比如：HTTP是無(wú)狀態(tài)的：在同一個(gè)連接中，兩個(gè)執(zhí)行成功的請(qǐng)求之間是沒(méi)有關(guān)系的。這就帶來(lái)了一個(gè)問(wèn)題，用戶沒(méi)有辦法在同一個(gè)網(wǎng)站中進(jìn)行連續(xù)的交互，比如在一個(gè)電商網(wǎng)站里，用戶把某個(gè)商品加入到購(gòu)物車(chē)，切換一個(gè)頁(yè)面后再次添加了商品，這兩次添加商品的請(qǐng)求之間沒(méi)有關(guān)聯(lián)，瀏覽器無(wú)法知道用戶最終選擇了哪些商品。再比如：如果傳輸?shù)臄?shù)據(jù)較多，較大，那么每次交互時(shí)，均重新請(qǐng)求時(shí)，用戶需等待較長(zhǎng)時(shí)間，體驗(yàn)不好。為解決這些問(wèn)題，開(kāi)發(fā)人員們?cè)O(shè)計(jì)了AJAX,緩存，web worker，CORS等技術(shù)。

Asynchronous JavaScript and XML（Ajax）：異步，指無(wú)需重新加載整個(gè)頁(yè)面的情況下，只更新部分頁(yè)面的技術(shù)。主要是通過(guò)XMLHttpRequest （）（通?？s寫(xiě)為XHR）或 Fetch（）來(lái)請(qǐng)求。為了進(jìn)一步提高速度，有些網(wǎng)站還會(huì)在首次請(qǐng)求時(shí)將資產(chǎn)和數(shù)據(jù)存儲(chǔ)在用戶的計(jì)算機(jī)上，這意味著在后續(xù)訪問(wèn)中，他們將使用本地版本，而不是在首次加載頁(yè)面時(shí)下載新副本。內(nèi)容僅在更新后從服務(wù)器重新加載。XHR允許你使用它的 alt="image" />
AJAX代碼：

var request = new XMLHttpRequest();
request.open('GET, url);
request.responseType = 'text';//XHR默認(rèn)返回文本，可修改格式
request.onload = function() { 
var.textContent = request.response;//返回 };
request.send();

與XHR不同，fetch()返回一個(gè)解析HTTP響應(yīng)的promise，它將解析從服務(wù)器發(fā)回的響應(yīng)。我們使用then()來(lái)運(yùn)行一些后續(xù)代碼，這是我們?cè)谄鋬?nèi)部定義的函數(shù)。這相當(dāng)于XHR版本中的onload事件處理程序。
Fetch代碼：

fetch(url).then(function(response) {
response.text().then(function(text)
 {//text() 也返回了一個(gè) promise 
var.textContent = text;
}
}

對(duì)于前面所說(shuō)的，將資產(chǎn)和數(shù)據(jù)存儲(chǔ)在用戶的計(jì)算機(jī)上，主要才采取cookie，sessionStorage和 localStorage。這些參數(shù)均可在瀏覽器的開(kāi)發(fā)者模式中application中查看。Cookie可以采用http頭部擴(kuò)展的方式，把Cookies添加到頭部中，創(chuàng)建一個(gè)會(huì)話讓每次請(qǐng)求都能共享相同的上下文信息，達(dá)成相同的狀態(tài)。注意，HTTP本質(zhì)是無(wú)狀態(tài)的，使用Cookies可以創(chuàng)建有狀態(tài)的會(huì)話。sessionStorage，只要瀏覽器開(kāi)著，數(shù)據(jù)就會(huì)一直保存 (關(guān)閉瀏覽器時(shí)數(shù)據(jù)會(huì)丟失)。localStorage，一直保存數(shù)據(jù)，甚至到瀏覽器關(guān)閉又開(kāi)啟后也是這樣。每個(gè)域都有一個(gè)單獨(dú)的數(shù)據(jù)存儲(chǔ)區(qū)，無(wú)法交錯(cuò)使用。Session，由于HTTP協(xié)議是無(wú)狀態(tài)的協(xié)議，所以服務(wù)端需要記錄用戶的狀態(tài)時(shí)，就需要用某種機(jī)制來(lái)識(shí)具體的用戶.典型的場(chǎng)景比如購(gòu)物車(chē)，當(dāng)你點(diǎn)擊下單按鈕時(shí)，由于HTTP協(xié)議無(wú)狀態(tài)，所以并不知道是哪個(gè)用戶操作的，所以服務(wù)端要為特定的用戶創(chuàng)建了特定的Session，用用于標(biāo)識(shí)這個(gè)用戶，并且跟蹤用戶，這樣才知道購(gòu)物車(chē)?yán)锩嬗袔妆緯?shū)。這個(gè)Session是保存在服務(wù)端的，有一個(gè)唯一標(biāo)識(shí)。Session是在服務(wù)端保存的一個(gè)數(shù)據(jù)結(jié)構(gòu)，用來(lái)跟蹤用戶的狀態(tài)，這個(gè)數(shù)據(jù)可以保存在集群、數(shù)據(jù)庫(kù)、文件中；
Cookie是客戶端保存用戶信息的一種機(jī)制，用來(lái)記錄用戶的一些信息，也是實(shí)現(xiàn)Session的一種方式。

如果你的網(wǎng)站需跨域，去獲取資源，則需要使用CORS（Cross-Origin Resource Sharing）技術(shù)。這是HTML5定義的如何跨域訪問(wèn)資源的方法。Origin表示本域，也就是瀏覽器當(dāng)前頁(yè)面的域。當(dāng)JavaScript向外域（如sina.com）發(fā)起請(qǐng)求后，瀏覽器收到響應(yīng)后，首先檢查Access-Control-Allow-Origin是否包含本域，如果是，則此次跨域請(qǐng)求成功，如果不是，則請(qǐng)求失敗，JavaScript將無(wú)法獲取到響應(yīng)的任何數(shù)據(jù)。
假設(shè)本域是my.com，外域是sina.com，只要響應(yīng)頭Access-Control-Allow-Origin為http://my.com，或者是*，本次請(qǐng)求就可以成功。
可見(jiàn)，跨域能否成功，取決于對(duì)方服務(wù)器是否愿意給你設(shè)置一個(gè)正確的Access-Control-Allow-Origin，決定權(quán)始終在對(duì)方手中。