前端學HTTP之URL

前面的話

　　通常地，URL和URI比較難以區分。接下來，本文以區分URL和URI爲引子，詳細介紹URL的用法

┌─────────────────────────────────────────────────────────────────────────────┐
│                                    href                                     │
├──────────┬┬───────────┬─────────────────┬───────────────────────────┬───────┤
│ protocol ││   auth    │      host       │           path            │ hash  │
│          ││           ├──────────┬──────┼──────────┬────────────────┤       │
│          ││           │ hostname │ port │ pathname │     search     │       │
│          ││           │          │      │          ├─┬──────────────┤       │
│          ││           │          │      │          │ │    query     │       │
"  http:   // user:pass @ host.com : 8080   /p/a/t/h  ?  query=string   #hash "
│          ││           │          │      │          │ │              │       │
└──────────┴┴───────────┴──────────┴──────┴──────────┴─┴──────────────┴───────┘

 

與URI區別

　　URI是Uniform Resource Identifier的縮寫，稱爲統一資源標識符。URI是一個通用的概念，由兩個主要的子集URL和URN構成，URL是經過描述資源的位置來標識資源的，而URN則是經過名字來識別資源的，與它們當前所處位置無關

　　URL是Uniform Resource Locator的縮寫，稱爲統一資源定位符。URL正是使用web瀏覽器等訪問web頁面時須要輸入的網頁地址

　　URL是一種強有力的工具。但URL並不完美。它表示的是實際的地址，而不是準確的名字。這種方案的缺點在於若是資源被移走了，URL也就再也不有效了。那時，它就沒法對對象進行定位了 

　　若是有了對象的準確名稱，則不論其位於何處均可以找到這個對象。就像人同樣，只要給定了資源的名稱和其餘一些狀況，不管資源移到何處，都可以追蹤到它。爲了應對這個問題，因特網工程任務組(Internet Engineering Task Force, IETF) 已經對URN的新標準作了一段時間的研究了。不管對象搬移到什麼地方，URN都能爲對象提供一個穩定的名稱

　　可是，從URL轉換成URN是一項巨大的工程，支持URN須要進行不少改動——標準主體的一致性，對各類HTTP應用程序的修改等。因此，還要等待更合適的時機才能進行這種轉換

 

URL語法

　　URL語法創建在由下面9部分構成的通用格式上。其中，URL最重要的3個部分是方案(scheme)、主機(host)和路徑(path)

<scheme>://<user>:<password>@<host>:<port>/<path>:<params>?<query>#<frag>

【方案】

　　方案其實是規定如何訪問指定資源的主要標識符，它會告訴負責解析URL的應用程序應該使用什麼協議

　　方案組件必須以一個字母符號開始，由第一個「:」符號將其與URL的其他部分分隔開來。方案名是大小寫無關的，所以URL「http://www.hardware.com」和「HTTP://www.hardware.com」 是等價的

　　常見的方案以下

一、HTTP

　　HTTP是一種超文本傳輸協議方案，除了沒有用戶名和密碼以外，與通用的URL格式相符。若是省略了端口，就默認爲80

　　基本格式：

http://<host>:<port>/<path>?<query>#<frag>

　　示例：

http://www.hardware.com/index.html
http://www.hardware.com:80/index.html

二、https

　　方案https與方案http是一對。惟一的區別在於方案https使用了網景的SSL， SSL爲HTTP鏈接提供了端到端的加密機制。其語法與HTTP的語法相同，默認端口爲443

　　基本格式：

https://<host>:<port>/<path>?<query>#<frag>

　　示例：

https://www.hardware.com/secure.html

三、Mailto 

　　Mailto URL指向的是E-mail地址。因爲E-mail的行爲與其餘方案都有所不一樣(它並不指向任何能夠直接訪問的對象)，因此mailto URL的格式與標準URL的格式也有所不一樣

　　示例：

mailto:joe@hardware.com

四、ftp

　　文件傳輸協議URL能夠用來從FTP服務器上下載或向其上傳文件，並獲取FTP服務器上的目錄結構內容的列表

　　在Web和URL出現以前，FTP就已經存在了。Web應用程序將FTP做爲一種數據訪問方案使用

　　基本格式：

ftp://<user>:<password>@<host>:<port>/<path>;<params>

　　示例：

ftp://anonymous:joe%40hardware.com@prep.ai.mit.edu:21/pub/gnu/

五、rtsp,rtspu

　　RTSP URL是能夠經過實時流傳輸協議(Real Time Streaming Protocol)解析的音/視頻媒體資源的標識符

　　方案rtspu中的u表示它是使用UDP協議來獲取資源的

　　基本格式：

rtsp://<user>:<password>@<host>:<port>/<path>
rtspu://<user>:<password>@<host>:<port>/<path>

　　示例：

rtsp://www.hardware.com:554/interview/cto_video

六、file

　　方案file表示一臺指定主機(經過本地磁盤、網絡文件系統或其餘一些文件共享系統)上可直接訪問的文件。各字段都遵循通用格式。若是省略了主機名，就默認爲正在使用URL的本地主機

　　基本格式：

file ://<host>/<path>

　　示例：

file://OFFICE-FS/policies/casual-fridays.doc

七、telnet

　　方案telnet用於訪問交互式業務。它表示的不是對象自身，而是可經過telnet協議訪問的交互式應用程序(資源)

　　基本格式：

telnet://<user>:<password>@<host>:<port>/

　　示例：

telnet://slurp:webhound@joes-hardware.com:23/

　　[注意]除了以上常見的7種方案以外，若是要查看所有的URI方案列表，請移步至此

【主機和端口】

　　要想在因特網上找到資源，應用程序要知道是哪臺機器裝載了資源，以及在那臺機器的什麼地方能夠找到能對目標資源進行訪問的服務器。URL的主機和端口組件提供了這兩組信息

　　主機組件標識了因特網上可以訪問資源的宿主機器。能夠用上述主機名(www.hardware.com)或者IP地址來表示主機名

　　[注意]IP地址能夠是192.168.1.1這類IPv4地址名，還能夠是[0:0:0:0:0:0:0:1]這樣用括號括起來的IPv6地址名

　　好比，下面兩個URL就指向同一個資源——第一個URL經過主機名，第二個經過IP地址指向服務器：

http://www.hardware.com:80/index.html 
http://161.58.228.45:80/index.html

　　端口組件標識了服務器正在監聽的網絡端口。對下層使用了TCP協議的HTTP來講，默認端口號爲80

【用戶名和密碼】

　　不少服務器都要求輸入用戶名和密碼纔會容許用戶訪問數據。FTP服務器就是這樣一個常見的實例

ftp://ftp.prep.ai.mit.edu/pub/gnu
ftp://anonymous@ftp.prep.ai.mit.edu/pub/gnu
ftp://anonymous:my_passwd@ftp.prep.ai.mit.edu/pub/gnu 
http://joe:joespasswd@www.joes-hardware.com/sales_info.txt

　　第一個例子沒有用戶或密碼組件，只有標準的方案、主機和路徑。若是某應用程序使用的URL方案要求輸入用戶名和密碼，好比FTP，但用戶沒有提供，它一般會插入一個默認的用戶名和密碼。好比，若是向瀏覽器提供一個FTP URL，但沒有指定用戶名和密碼，它就會插入anonymous(匿名用戶)做爲你的用戶名，併發送一個默認的密碼(IE會發送IEUser)

　　第二個例子顯示了一個指定爲anonymous的用戶名。這個用戶名與主機組件組合在一塊兒，看起來就像E-mail地址同樣。字符將用戶和密碼組件與URL的其他部分分隔開來

　　在第三個例子中，指定了用戶名(anonymous)和密碼(my_passwd)，二者之間由字符「:」分隔

【路徑】

　　URL的路徑組件說明了資源位於服務器的什麼地方。路徑一般很像一個分級的文件系統路徑

http://www.hardware.com:80/seasonal/index-fall.html 

　　這個URL中的路徑爲/seasonal/index-fall.html，很像UNIX文件系統中的文件系統路徑。路徑是服務器定位資源時所需的信息。能夠用字符「/」將HTTP URL的路徑組件劃分紅一些路徑段(path segment)，每一個路徑段都有本身的參數(param)組件

【參數】

　　對不少方案來講，只有簡單的主機名和到達對象的路徑是不夠的。除了服務器正在監聽的端口，以及是否可以經過用戶名和密碼訪問資源外，不少協議都還須要更多的信息才能工做

　　負責解析URL的應用程序須要這些協議參數來訪問資源。不然，另外一端的服務器可能就不會爲請求提供服務，或者更糟糕的是，提供錯誤的服務。好比，像FTP這樣的協議，有兩種傳輸模式：二進制和文本形式。確定不但願以文本形式來傳送二進制圖片，這樣的話，二進制圖片可能會變得一團糟

　　爲了嚮應用程序提供它們所需的輸入參數，以便正確地與服務器進行交互，URL中有一個參數組件。這個組件就是URL中的名值對列表，由字符「;」將其與URL的其他部分(以及各名值對)分隔開來。它們爲應用程序提供了訪問資源所需的全部附加信息。好比：

ftp://prep.ai.mit.edu/pub/gnu;type=d

　　在這個例子中，有一個參數type=d，參數名爲type，值爲d

　　如前所述，HTTP URL的路徑組件能夠分紅若干路徑段。每段均可以有本身的參數。好比：

http://www.hardware.com/hammers;sale=false/index.html;graphics=true

　　這個例子就有兩個路徑段，hammers和index.html。hammers路徑段有參數sale，其值爲false。index.html段有參數graphics，其值爲true

【查詢字符串】

　　不少資源，好比數據庫服務，都是能夠經過提問題或進行査詢來縮小所請求資源類型範圍的。假設數據庫中維護着一個未售貨物的清單，並能夠對淸單進行査詢，以判斷產品是否有貨，那就能夠用下列URL來査詢Web數據庫網關，看看編號爲1273一、顏色爲blue、尺寸爲large的條目是否有貨：

http://www.hardware.com/inventory-check.cgi?item=12731&color=blue&size=large

　　這個URL的大部分都與咱們見過的其餘URL相似。只有問號(?)右邊的內容是新出現的。這部分被稱爲查詢(query)組件。URL的査詢組件和標識網關資源的URL路徑組件一塊兒被髮送給網關資源

　　除了有些不合規則的字符須要特別處理以外，對査詢組件的格式沒什麼要求。按照常規，不少網關都但願査詢字符串以一系列「名/值」對的形式出現，名值對之間用字符「&」分隔

【片斷】

　　有些資源類型，好比HTML，除了資源級以外，還能夠作進一步的劃分。好比，對一個帶有章節的大型文本文檔來講，資源的URL會指向整個文本文檔，但理想的狀況是，可以指定資源中的那些章節

　　爲了引用部分資源或資源的一個片斷，URL支持使用片斷(frag)組件來表示一個資源內部的片斷。好比，URL能夠指向HTML文檔中一個特定的圖片或小節

　　片斷掛在URL的右手邊，最前面有一個字符「#」。好比：

http://www.hardware.com/tools.html#drills

　　在這個例子中，片斷drills引用了Web服務器上頁面/tools.html中的一個部分。這部分的名字叫作drills

　　HTTP服務器一般只處理整個對象，而不是對象的片斷，客戶端不能將片斷傳送給服務器。瀏覽器從服務器得到了整個資源以後，會根據片斷來顯示感興趣的那部分資源

 

字符

　　URL的設計者們認識到有時人們可能會但願URL中包含除通用的安全字母表以外的二進制數據或字符。所以，須要有一種轉義機制，可以將不安全的字符編碼爲安全字符，再進行傳輸

　　人們設計了一種編碼機制，用來在URL中表示各類不安全的字符。這種編碼機制就是經過一種「轉義」表示法來表示不安全字符的，這種轉義表示法包含一個百分號(%)，後面跟着兩個表示字符ASCII碼的十六進制數

　　下面是一些例子

　　在URL中，有幾個字符被保留起來，有着特殊的含義。有些字符不在定義的US- ASCII可打印字符集中。還有些字符會與某些因特網網關和協議產生混淆，所以不同意使用

　　下面列出了保留及受限的字符

 

編碼方法

【encodeURI()】

　　encodeURI()函數把字符串做爲URI進行編碼，實際上enchodeURI()函數只把參數中的空格編碼爲%20，其他特殊字符均不會轉換

　　encodeURI()的不編碼字符有82個:

! # $ & ' ( ) * + , - . / : ; = ? @ _ ~ 0-9 a-z A-Z

//'http://www.w3school.com.cn<br />'
console.log(encodeURI("http://www.w3school.com.cn")+ "<br />")

//'http://www.w3school.com.cn/My%20first/'
console.log(encodeURI("http://www.w3school.com.cn/My first/"))

//',/?:@&=+$#'
console.log(encodeURI(",/?:@&=+$#"))

　　[注意]encodeURI()能夠編碼中文

//'%E6%B5%8B%E8%AF%95'
console.log(encodeURI('測試'));

【decodeURI()】

　　decodeURI()函數可對encodeURI()函數編碼過的URI進行解碼。實際上，decodeURI()僅僅會把%20轉換爲空格顯示

//"http://www.w3school.com.cn/My first/"
console.log(decodeURI("http://www.w3school.com.cn/My%20first/"));

【encodeURIComponent()】

　　encodeURIComponent()函數可把字符串做爲URI組件進行編碼。該方法主要對;/?:@&=+$,#等這些用於分隔URI組件的字符以及中文進行編碼

　　encodeURIComponent不編碼字符有71個：

!， '，(，)，*，-，.，_，~，0-9，a-z，A-Z

　　因爲此方法對:/都進行了編碼，因此不能用它來對網址進行編碼，而適合對URI中的參數進行編碼

　　[注意]encodeURIComponent()能夠編碼中文

var uri = "http://www.wrox.com/illegal value.htm#start";

//'http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start'
console.log(encodeURIComponent(uri));

//'%E6%B5%8B%E8%AF%95'
console.log(encodeURIComponent('測試'));

【decodeURIComponent()】

　　decodeURIComponent()函數可對encodeURIComponent()函數編碼的URI進行解碼

var uri = 'http%3A%2F%2Fwww.wrox.com%2Fillegal%20value.htm%23start';
//'http://www.wrox.com/illegal value.htm#start'
console.log(decodeURIComponent(uri));

【escape()】

　　escape()函數對字符串進行編碼，將字符的unicode編碼轉化爲16進制序列

　　ES3中反對escape()的使用，並建議用encodeURI和encodeURIComponent代替，不過escape()依然被普遍的用於cookie的編碼，由於escape()剛好編碼了cookie中的非法字符而且對路徑中常出現的「/」不進行編碼

　　escape()的不編碼字符有69個:

* + - . / @ _ 0-9 a-z A-Z

　　[注意]escape()能夠編碼中文

var uri = "http://www.wrox.com/illegal value.htm#start";

//'http%3A//www.wrox.com/illegal%20value.htm%23start'
console.log(escape(uri));

//%u6D4B%u8BD5
console.log(escape('測試'));

【unescape()】

　　unescape()函數用於對escape()函數編碼的URI進行解碼

//http://www.wrox.com/illegal value.htm#start
console.log(unescape('http%3A//www.wrox.com/illegal%20value.htm%23start'));

//'測試'
console.log(unescape('%u6D4B%u8BD5'));