1. 程式人生 > >location物件屬性及查詢字串的處理

location物件屬性及查詢字串的處理

Global(全域性)物件中的encodeURL()和encodeURIComponent()方法可以對URI進行編碼,以便傳送給瀏覽器。有效的URI中不能包含某些字元,比如說空格。而這兩個URI編碼方法可以對URI進行編碼,它們同特殊的UTF-8編碼替換所有的無效字元,從而讓瀏覽器可以接收和理解,下面以表格的形式來表達它們的作用和區別:

encodeURL() encodeURIComponent()
主要區別 不會對本身屬於URI特殊字元進行編碼,例如冒號、正斜槓、問號和井字號(“:”、“/”、“?”、“#”.....) 會對它所處理的URI中任何非標準字元字元進行編碼
例子

如圖

作用 encodeURI()主要用於整個URI的編碼 encodeURIComponent()主要用於某個URI片段的編碼,如例中的問號之後的片段。Component(譯:成分、元件);
相應的解碼方法 decondeURI() decodeURIComponent()
備註:在實際運用中,常需要對查詢字串進行編碼,所以我們運用encodeURIComponent()的情況比較多;
		<script type="text/javascript">
			var uri="https://mp.csdn net/post edit?not_checkout=1";
			document.write(uri+"<br />");
			//https://mp.csdn net/post edit?not_checkout=1
			document.write(encodeURI(uri)+"<br />");
			//https://mp%20csdn%20net/postedit?not_checkout=1
			document.write(encodeURIComponent(uri));
			//https%3A%2F%2Fmp%20csdn%20net%2Fpostedit%3Fnot_checkout%3D1
		</script>

location物件是常用的物件,它提供了與當前視窗中載入的文件的有關資訊,還提供了一些導航功能。事實上,location物件既是window物件的屬性,也是document物件的屬性;換句話說,window.location和doument.location引用的是同一個物件。location儲存著當前文件的資訊,並且可以將URI解析成獨立的片段,通過以下屬性可以訪問且獲得這個片段:

屬性名 例子 說明 片段名稱及作用
hash "#content" 返回URI中的hash(#號之後的零或多個字元),如果URI中不包含雜湊,則返回空的字串; 片段識別符號:在URI的末端,通常可標記出以獲取資源中的子資源(文件內的某個位置)。為URI中的可選項;
host "www.wrox.com:80" 返回伺服器名稱和埠(如果有); 伺服器地址的冒號之後為伺服器埠號,伺服器地址可以是類似wrox.com這種可解析的域名,或是192.168.1.1這類的IPv4地址名,還可以是[0:0:0:0:0:0:0:1]這樣用方括號括起來的IPv6地址名;
hostname "www.wrox.com" 單獨返回伺服器名稱; 返回不帶埠號的伺服器名稱

pathname

(譯:路徑名)

"/WileyCDA/" 返回URI中的目錄和(或)檔名; 帶層次的檔案路徑:指定伺服器上的檔案路徑來定位特指的資源。
port "8080" 返回URI中指定的埠號。如果URI中不包含埠號,則這個屬性返回空字串; 埠號:指定伺服器連線的網路埠號,此項在URI中也是可選部分;若使用者省略則自動使用預設埠號;
protocol "http:" 返回頁面使用的協議,通常為http:或https:; 協議方案名:不區分字母大小寫,最後跟一個冒號;也可以使用data:或javascript:這類指定資料或指令碼程式的方案名;
search "?q=javascript" 返回URI的查詢字串。這個字串以問號開頭; 查詢字串:針對已指定的檔案路徑內的資源,可以使用查詢字串傳入任意的引數。此項可選。

雖然通過上面的location物件的屬性可以獲取URI中的大多數資訊,但是獲取查詢字串的屬性並不方便,因為location.search獲取的查詢字串還需要再進行處理才可以使用,所以可以建立這樣一個函式來處理;

<script type="text/javascript">
	function getQueryStringArgs(){
		//取得查詢字串,並去掉開頭的問號之後的所有字元;
		var qs=(location.search.length>0?location.search.substring(1):""),
		//建立一個用來儲存資料的物件;
		args={},
		//如果qs的長度不是0,在&符號處將字串分割開,化為陣列;
		items=qs.length?qs.split("&"):[],
		item=null,
		name=null,
		value=null,
		i=0,
		len=itmes.length;
		
		for(i=0;i<len;i++){
			//遍歷items陣列,把items陣列中的每一項在“=”處分開,化為陣列,陣列只有兩項;
			item=items[i].split("=",2);
			name=decodeURIComponent(item[0]);
                        //查詢字串有可能是被編碼過的,所以使用decodeURIComponent處理
			value=decodeURIComponent(item[1]);
			//將不是空值的name值作為屬性賦給args,以相應的value為屬性值;
			if(name.length){
				args[name]=value;
			}
		}
		return args;
	}
</script>

假設本地地址location的uri為https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd=CSDN
獲取到的查詢字串為  	?tn=monline_3_dg&ie=utf-8&wd=CSDN
去掉問號為	tn=monline_3_dg&ie=utf-8&wd=CSDN
第一次使用split("&")獲得陣列items	 ["tn=monline_3_dg","ie=utf-8","wd=CSDN"]
每次遍歷陣列會得到一個元素項數為2的陣列item例如: ["tn","monline_3_dg"]....
將第一項item[0]作為名,第二項item[1]作為值,增強arges物件;