web網頁開發
發表時(shí)間：2018-9-19
發布人(rén)：融晨科技
浏覽次數：36
這(zhè)裏主要(yào / yāo)總結，web網頁的(de)開發，即我們經常所看見的(de)淘寶，新聞等網頁。我們将一個(gè)所見的(de)網頁中每次刷新不(bù)變的(de)部分，稱爲(wéi / wèi)靜态。這(zhè)些靜态由HTML和(hé / huò)CSS組成，他(tā)們形成了(le／liǎo)網頁的(de)樣式。HTML是(shì)一種标記語言，用來(lái)結構化我們的(de)網頁内容和(hé / huò)賦予内容含義（形成樹形結構），例如定義段落、标題、和(hé / huò)數據表,或在(zài)頁面中嵌入圖片和(hé / huò)視頻。CSS 是(shì)一種樣式規則語言，例如設置背景顔色和(hé / huò)字體，内容的(de)排版，然後我們将這(zhè)些樣式應用于(yú)我們的(de)HTML。
可參考教程:MDN
一個(gè)簡單的(de)HTML文件人(rén)下所示：
<!DOCTYPE html>
<html>
<head>
/*head主要(yào / yāo)有HTML的(de)标題，指定你的(de)文檔中字符的(de)編碼，作者和(hé / huò)描述，在(zài)HTML中應用CSS和(hé / huò)JavaScript等 */
<meta charset="UTF-8">
<title></title><!--标題-->
<link rel="stylesheet" type="text/css" href="css/css.css"/><!--引用外部css-->
<style type="text/css">/*使用内部CSS*/
.hello{
// 設置class=hello的(de)樣式
color: red;
}
</style>
</head>
<body>
//body是(shì)HTML的(de)主要(yào / yāo)内容，描述了(le／liǎo)頁面的(de)結構。
<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">/*使用内部js*/
var hello=document.querySelector(".hello");<!—采用DOM的(de)API,引用html中的(de)元素-->
var newhello=document.createElement("button");<!--新建html中的(de)元素-->
newhello.textContent="botton";//設置這(zhè)個(gè)元素的(de)屬性以(yǐ)及内容
hello.appendChild(newhello);<!--在(zài)元素後面新插入元素-->
newhello.onclick()=function (){
/*onclick 爲(wéi / wèi)鼠标點擊事件
鼠标點擊時(shí)，觸發事件，運行後面的(de)函數function*/
}
function hanshu (){
// 單獨的(de)函數
}
</script>
</html>
如果說(shuō)HTML和(hé / huò)css幫助我們完成了(le／liǎo)頁面上(shàng)的(de)樣式的(de)設計，那麽JavaScript就(jiù)幫助我們完成與用戶之(zhī)間的(de)交互，如用戶點擊，滑動，輸入等。Js(JavaScript的(de)簡稱)是(shì)一種編程語言，允許你創建動态更新的(de)内容，控制多媒體，圖像動畫，和(hé / huò)一些其他(tā)的(de)東西。JS通過對HTML上(shàng)元素的(de)引用對網頁上(shàng)産生的(de)事件（浏覽器中發生的(de)動作，例如點擊按鈕，加載頁面或播放視頻）進行響應。
大(dà)多數現代的(de)web站點是(shì)動态的(de)—它們在(zài)服務端使用各種類型的(de)數據庫來(lái)存儲數據(服務器), 之(zhī)後通過運行服務器（server-side） 代碼來(lái)重新獲取需要(yào / yāo)的(de)數據，把其數據插入到(dào)靜态頁面的(de)模闆中，并且生成出(chū)HTML渲染到(dào)用戶浏覽上(shàng)。爲(wéi / wèi)此使用HTTP/HTTPS協議在(zài) Web 上(shàng)進行數據交換，并在(zài)數據傳輸的(de)過程中需經過DNS和(hé / huò)TCP/IP 協議。它是(shì)client-server協議。客戶端和(hé / huò)服務端通過交換各自的(de)消息（與數據流正好相反）進行交互。由像浏覽器這(zhè)樣的(de)客戶端發出(chū)的(de)消息叫做 requests，被服務端回應的(de)消息叫做
responses。它是(shì)應用層的(de)協議，通過TCP（HTTP），或者是(shì)TLS（加密的(de)TCP ,HTTPS）連接來(lái)發送。
舉個(gè)例子(zǐ)：
當你在(zài)浏覽器裏輸入一個(gè)網址時(shí)（在(zài)我們的(de)例子(zǐ)裏就(jiù)是(shì)走向商店的(de)路上(shàng)時(shí)）：
- 浏覽器在(zài)域名系統服務器（DNS）上(shàng)找出(chū)存放網頁的(de)服務器的(de)實際地(dì / de)址（IP地(dì / de)址）（找出(chū)商店的(de)位置）。
- 浏覽器發送 HTTP 請求信息（數據的(de)傳輸遵守TCP/IP 協議）到(dào)服務器來(lái)請拷貝一份網頁到(dào)客戶端（你走到(dào)商店并下訂單）。
- 服務器同意客戶端的(de)請求後，會返回一個(gè)“200 OK”信息，同意傳輸，然後開始将網頁的(de)文件以(yǐ)數據包的(de)形式傳輸到(dào)浏覽器。
- 浏覽器将數據包聚集成完整的(de)網頁然後将網頁呈現給你。
這(zhè)樣一個(gè)簡單的(de)網頁就(jiù)完成了(le／liǎo)，但是(shì)在(zài)實際過程中，仍會許多問題。比如：HTTP是(shì)無狀态的(de)：在(zài)同一個(gè)連接中，兩個(gè)執行成功的(de)請求之(zhī)間是(shì)沒有關系的(de)。這(zhè)就(jiù)帶來(lái)了(le／liǎo)一個(gè)問題，用戶沒有辦法在(zài)同一個(gè)網站中進行連續的(de)交互，比如在(zài)一個(gè)電商網站裏，用戶把某個(gè)商品加入到(dào)購物車，切換一個(gè)頁面後再次添加了(le／liǎo)商品，這(zhè)兩次添加商品的(de)請求之(zhī)間沒有關聯，浏覽器無法知道(dào)用戶最終選擇了(le／liǎo)哪些商品。再比如：如果傳輸的(de)數據較多，較大(dà)，那麽每次交互時(shí)，均重新請求時(shí)，用戶需等待較長時(shí)間，體驗不(bù)好。爲(wéi / wèi)解決這(zhè)些問題，開發人(rén)員們設計了(le／liǎo)AJAX,緩存，web worker，CORS等技術。
Asynchronous JavaScript and XML（Ajax）：異步，指無需重新加載整個(gè)頁面的(de)情況下，隻更新部分頁面的(de)技術。主要(yào / yāo)是(shì)通過XMLHttpRequest （）（通常縮寫爲(wéi / wèi)XHR）或 Fetch（）來(lái)請求。爲(wéi / wèi)了(le／liǎo)進一步提高速度，有些網站還會在(zài)首次請求時(shí)将資産和(hé / huò)數據存儲在(zài)用戶的(de)計算機上(shàng)，這(zhè)意味着在(zài)後續訪問中，他(tā)們将使用本地(dì / de)版本，而(ér)不(bù)是(shì)在(zài)首次加載頁面時(shí)下載新副本。 内容僅在(zài)更新後從服務器重新加載。XHR允許你使用它的(de) alt="image" />
AJAX代碼：
var request = new XMLHttpRequest();
request.open('GET, url);
request.responseType = 'text';//XHR默認返回文本，可修改格式
request.onload = function() {
var.textContent = request.response;//返回 };
request.send();
與XHR不(bù)同，fetch()返回一個(gè)解析HTTP響應的(de)promise，它将解析從服務器發回的(de)響應。我們使用then()來(lái)運行一些後續代碼，這(zhè)是(shì)我們在(zài)其内部定義的(de)函數。這(zhè)相當于(yú)XHR版本中的(de)onload事件處理程序。
Fetch代碼：
fetch(url).then(function(response) {
response.text().then(function(text)
{//text() 也(yě)返回了(le／liǎo)一個(gè) promise
var.textContent = text;
}
}
對于(yú)前面所說(shuō)的(de)，将資産和(hé / huò)數據存儲在(zài)用戶的(de)計算機上(shàng)，主要(yào / yāo)才采取cookie，sessionStorage和(hé / huò) localStorage。這(zhè)些參數均可在(zài)浏覽器的(de)開發者模式中application中查看。Cookie可以(yǐ)采用http頭部擴展的(de)方式，把Cookies添加到(dào)頭部中，創建一個(gè)會話讓每次請求都能共享相同的(de)上(shàng)下文信息，達成相同的(de)狀态。注意，HTTP本質是(shì)無狀态的(de)，使用Cookies可以(yǐ)創建有狀态的(de)會話。sessionStorage，隻要(yào / yāo)浏覽器開着，數據就(jiù)會一直保存 (關閉浏覽器時(shí)數據會丢失)。localStorage，一直保存數據，甚至到(dào)浏覽器關閉又開啓後也(yě)是(shì)這(zhè)樣。每個(gè)域都有一個(gè)單獨的(de)數據存儲區，無法交錯使用。Session，由于(yú)HTTP協議是(shì)無狀态的(de)協議，所以(yǐ)服務端需要(yào / yāo)記錄用戶的(de)狀态時(shí)，就(jiù)需要(yào / yāo)用某種機制來(lái)識具體的(de)用戶.典型的(de)場景比如購物車，當你點擊下單按鈕時(shí)，由于(yú)HTTP協議無狀态，所以(yǐ)并不(bù)知道(dào)是(shì)哪個(gè)用戶操作的(de)，所以(yǐ)服務端要(yào / yāo)爲(wéi / wèi)特定的(de)用戶創建了(le／liǎo)特定的(de)Session，用用于(yú)标識這(zhè)個(gè)用戶，并且跟蹤用戶，這(zhè)樣才知道(dào)購物車裏面有幾本書。這(zhè)個(gè)Session是(shì)保存在(zài)服務端的(de)，有一個(gè)唯一标識。Session是(shì)在(zài)服務端保存的(de)一個(gè)數據結構，用來(lái)跟蹤用戶的(de)狀态，這(zhè)個(gè)數據可以(yǐ)保存在(zài)集群、數據庫、文件中；
Cookie是(shì)客戶端保存用戶信息的(de)一種機制，用來(lái)記錄用戶的(de)一些信息，也(yě)是(shì)實現Session的(de)一種方式。
如果你的(de)網站需跨域，去獲取資源，則需要(yào / yāo)使用CORS（Cross-Origin Resource Sharing）技術。這(zhè)是(shì)HTML5定義的(de)如何跨域訪問資源的(de)方法。Origin表示本域，也(yě)就(jiù)是(shì)浏覽器當前頁面的(de)域。當JavaScript向外域（如sina.com）發起請求後，浏覽器收到(dào)響應後，首先檢查Access-Control-Allow-Origin是(shì)否包含本域，如果是(shì)，則此次跨域請求成功，如果不(bù)是(shì)，則請求失敗，JavaScript将無法獲取到(dào)響應的(de)任何數據。
假設本域是(shì)my.com，外域是(shì)sina.com，隻要(yào / yāo)響應頭Access-Control-Allow-Origin爲(wéi / wèi)http://my.com，或者是(shì)*，本次請求就(jiù)可以(yǐ)成功。
可見，跨域能否成功，取決于(yú)對方服務器是(shì)否願意給你設置一個(gè)正确的(de)Access-Control-Allow-Origin，決定權始終在(zài)對方手中。
