JavaScript系列學習筆記 —— Ajax異步刷新技術

一、概念詳解

1、Ajax概念

Ajax是Asynchronous JavaScript and XML的縮寫，意思是異步的JavaScript和XML。它是一種運用於瀏覽器中的技術。在瀏覽器和服務器之間使用異步交互，從而使用戶從HTTP協議的“請求 - 響應”的同步循環中解脫出來。

使用Ajax的Web應用程序無需重新加載整個頁面便能向服務器發送請求進行交互，網頁向服務器索取少量信息而不是整個頁面的所有信息，通過JavaScript和CSS等技術來相應的更新局部數據，用戶甚至感覺不到瀏覽器正在與服務器進行通信。這種操作減少了用戶的等待時間，減少了傳輸的信息量，減輕了服務器和寬帶的負擔，使頁面的響應速度大大加快。

使用Java技術，在客戶端執行網頁更新位用戶提供了很大的靈活性。下面時使用Ajax可以完成的功能：

* 減少從服務器下載的的數據量，提升了站點性能。

* 消除了每次用戶輸入或訪問時的頁面刷新，提高了用戶體驗。

* 即時編輯數據，提高了數據的操作性。

* Ajax沒有平臺限制。Ajax把服務器的角色由原本傳輸內容轉變傳輸數據，而數據格式可以是純文本和XML格式。

* 將一部分工作轉移到客戶端，利用客戶端閒置的資源進行處理，減輕服務器和寬帶的負擔，節約空間和成本。

2、Ajax定義

Ajax是指一種運用於瀏覽器中的技術。在瀏覽器和服務器之間，它使用一步數據進行轉換，並允許網頁向服務器索取少量信息而非整個頁面資源。這標誌着網絡應用程序的微小化、迅捷化以及便捷化，是一種不需要依靠服務器軟件而獨立運行的瀏覽器技術。但實際上，Ajax並不是一門新的語言或技術，他是JavaScript、XML、CSS、DOM等多種成熟的技術以新的方式組合而成。

* 使用XHTML和CSS進行標準化呈現

* 使用DOM（Document Object Model）進行動態顯示及交互

* 使用XML和XSLT進行數據交換及相關處理

* 使用XMLHttpRequest進行異步數據查詢、檢索

* 使用JavaScript綁定和處理所有數據

3、Ajax原理

Ajax能夠實現上述在桌面應用程序中很常見的功能，是因爲它在Web頁面與服務器之間建立了一個額外的“處理層”。

這個“處理層”通常被稱爲Ajax引擎或Ajax框架。它解釋來自用戶的請求，並在後臺“安靜”地處理服務器通信。這意味着與傳統開發模式相比，對於用戶操作，服務器請求與響應不需要再同步一致，而是允許用戶在當前頁面瀏覽、單擊輸入數據。

從上圖可以看到，一個頁面可以發送多次請求訪問服務器進行數據的處理並獲取。在傳統開發模式中，往往只能等請求-響應結束之後才能對頁面操作或者等待頁面再次刷新完成才能進行其他的操作。而對於Ajax的應用還可以在一個頁面內實現多個頁面的Ajax操作，體現了Ajax的強大之處。

當然，沒有什麼都是完美的，Ajax雖然很強大，但也由一些缺點，具體表現在以下幾個方面：

* 大量的JavaScript代碼，不易維護。

* 可視化設計上比較困難。

* 打破“頁”的概念

* 給搜索引擎帶來困難

4、Ajax原則

Ajax Web應用程序基於JavaScript和HTTP請求。通過Ajax，用戶可以創建更好、更快以及更友好的Web應用程序。Ajax編程雖然使用了多種技術，它的最終目的都是爲了改善用戶的Web體驗。在編程過程中有一些通用的原則需要遵守，這些原則如下：

* 儘量減少客戶端和服務器之間的通信量。Ajax應用程序向服務器發送的信息量以及從服務器接收的信息量儘可能地少，確保Ajax應用程序不發送和接收不需要的消息，以增強其可靠性。

* 尊重用戶的使用習慣。Ajax應用程序與傳統模式相反，一些Ajax應用程序使用諸如拖放、雙擊等其他用戶界面風格。無論如何，一定要確保用戶知道下一步如何操作，不要讓用戶感到意外和無所適從。

* 遵循常規。不要花費太多的事件在開發用戶不熟悉的交互模型上。

* 儘量減少頁面的干擾因素。這裏的干擾因素就很多了，比如過多的動態元素或者過多的數據變化等等。

* 提高可訪問性。設計之初，必須要考慮到應用程序的主要用戶羣體、次要用戶羣體的構成等等，以便根據需求制定相應的計劃。

* 儘量使用戶交互連續而流暢，避免下載整個網頁。除了頁面的訪問，所有與服務器的通信都將由Ajax引擎管理。不要一些地方通過Ajax來完成少量數據的下載，而在另外的地方卻重新下載整個頁面，這將對用戶的Web體驗造成破壞。

5、Ajax最常使用的場景

* 表單交互。

傳統網頁的表單提交後，必須等待後臺處理完畢返回結果，整個頁面刷新之後顯示結果是否正確。使用Ajax，在表單提交內容之後，立刻進行異步處理，並在頁面上的某一部分快速顯示結果，這裏並沒有刷新整個頁面。

* 數據過濾和數據操作

對數據使用過濾器，例如按照時間排序、名稱排序等操作或對數據進行增刪該查之後需要獲取最新數據時，使用Ajax可以加速對數據的查找和處理過程。

6、Ajax需要注意的幾個問題

問題		描述
安全問題	由於Web本身就是不安全的，所以儘可能降低Ajax的安全風險就顯得尤爲重要。主要體現在以下一個方面： JavaScript本身的安全性 Web瀏覽器中執行JavaScript代碼時，允許任何人編寫允許代碼，從而給網站帶來了安全隱患。數據在網絡上傳輸的安全問題 HTTP請求參數的所有代碼都是以明碼的方式在網絡上傳輸，容易被惡意路由讀取傳輸的內容。爲了保證HTTP傳輸數據的安全，可以對數據的數據進行加密，這樣即使被看到，危險也不是很大。客戶端調用遠程服務器的安全問題雖然Ajax允許客戶端完成部分服務器的工作，並可以通過JavaScript來檢查用戶權限，但是這種行爲並不可取，一些黑客可以輕鬆繞過JavaScript的權限檢查，直接訪問業務邏輯組件，從而對網站造成威脅。通常情況下，應該將所有Ajax請求都發送到控制器，由控制器負責檢查調用者是否具備資源的訪問權限。
性能問題	Ajax將大量的計算從服務器移到了客戶端，意味着瀏覽器將承受更大的負擔，而不僅是負責簡單的文檔顯示。由於Ajax的核心語言是JavaScript，而JavaScript並不以高性能知名。另外，JavaScirpt對象也不是輕量級的，特別是DOM元素耗費了大量的內存。因此，如何提高JavaScript代碼性能尤爲重要，下面介紹幾種優化Ajax應用執行速度的方法：儘量使用局部變量，而不使用全局變量。優化for循環儘量少用eval，每次使用都需要消耗大量的時間將DOM節點附加到文檔上儘量減少“.”操作符的使用
兼容問題	IE瀏覽器和非IE瀏覽器創建XMLHttpRequest對象的方式不一樣
亂碼問題	Ajax不支持多種字符集，它默認的字符集是UTF-8，所以在應用Ajax技術的程序中應該及時進行編碼轉換。

二、Ajax的核心XMLHttpRequest對象

Ajax是一系列相關技術的融合，其核心包括XMLHttpRequest、JavsScript和DOM技術，數據格式的不同可能會用到Json或者XML的技術。

而XMLHttpRequest是Ajax中最核心的技術，它是一個具有應用程序接口的JavaScript對象，能夠使用HTTP協議連接服務器進行動態交互。最大的優點是頁面內的javascript腳本可以不用刷新頁面，而直接和服務器發生交互，從而實現頁面無刷新的效果。

2.1 初始化XMLHttpRequest對象

在使用XMLHttpRequest對象發送請求和處理響應之前，首先需要初始化該對象。由於XMLHttpRequest不是一個W3C標準，所以IE瀏覽器和非IE瀏覽器初始化的方法不同。

* IE瀏覽器

IE 7.0版本之前的瀏覽器中，使用ActiveX技術創建XMLHttpRequest對象

var xmr = new ActiveXObject("Msxml2.XMLHTTP")

但是在不同版本的微軟XMLHTTP庫中，ActiveXObject對象的名稱有所不同

var xmr = new ActiveXObject("Microsoft.XMLHTTP")

* 非IE瀏覽器

非IE瀏覽器把XMLHttpRequest對象實例化爲一個本地JavaScript對象

var xmr = new XMLHttpRequest()

爲了提高程序的兼容性，通過判斷瀏覽是否提供了XMLHttpRequest類，來判斷是直接創建還是實例化一個ActiveX對象。

if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
}else{
		try{
			xhr = new ActiveXObject("Msxml2.XMLHTTP");
		}catch(e){
			try{
				xhr = new XMLHttpRequest("Microsoft.XMLHTTP");
			}catch(e){
				console.log(e)
			}
		}
}

2.2 XMLHttpRequest對象的常用方法

方法		描述
open()	設置進行異步請求的請求方法、目標的URL、請求方式（默認true爲異步，false表示同步）。語法：xhr.open("method","URL","true")
send()	向服務器發送請求。如果請求聲明爲異步，該方法將立即返回，否則將等到接收到響應爲止。語法：xhr.send(content) content:用於指定發送的數據，可以是DOM對象的實例、輸入流或字符串。
abort()	停止或放棄當前異步請求。語法：xhr.abort()
setRequestHeader()	爲請求的HTTP頭設置值。語法：xhr.setRequestHeader("header","value") 注意：SetRequestHeader()方法必須在調用open()方法之後才能調用
getResponseHeader()	返回指定的HTTP頭信息。語法：xhr.getResponseHeader("headerLabel") 注意：SetRequestHeader()方法必須在調用open()方法之後才能調用

2.3 XMLHttpRequest對象的常用屬性

1、指定狀態改變時觸發事件

與服務器訪問的過程中，每個狀態改變時都會觸發onreadystatechange事件處理器，該處理器通常會調用一個函數。

xhr.onreadystatechange = function(){
    //要執行的代碼...
}

2、獲取請求狀態

readyState屬性可以獲取Ajax與服務器訪問過程中的交互屬性值。

值	意義	值	意義
0	未初始化	3	交互中
1	正在加載	4	完成
2	已加載

當HTTP請求發送完畢，服務器返回響應數據，系統首先監測XMLHttpRequest對象的readyState屬性值，判斷HTTP請求的當前狀態。當該屬性值爲4時，代表服務器傳送數據完畢。

if(xhr.readyState == 4){	
    //信息已經返回，可以開始處理
}else{	
    //表示信息還沒有返回
}

3、返回服務器的HTTP狀態碼的屬性

status屬性可以獲取返回服務器的HTTP狀態碼。

值	意義	值	意義
100	繼續發送請求	404	文件未找到
200	請求成功	408	請求超時
202	請求被接受，但尚未處理	500	內部服務器錯誤
400	錯誤的請求

注意：status屬性只能在send()方法返回成功時纔有效

在實際應用中，該屬性用於判斷請求狀態是否完成，當請求完成時再判斷請求是否成功，如果成功再處理返回結果。

if(xhr.status == 200){
    //表示頁面正常，可以開始處理數據
}else{
    //表示頁面有問題
}

4、獲取服務器響應的字符串

responseText屬性可以獲取服務器響應的字符串內容

xhr.responseText

5、獲取服務器響應的XML

responseXML屬性可以獲取服務器響應的XML格式的內容，這個對象可以解析爲一個DOM對象。

xhr.responseXML

三、Ajax案例代碼

3.1 獲取文本字符串

text文本內容

Ajax獲取的本文內容

實例代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Ajax異步刷新技術練習</title>
		<script type="text/javascript">
			//單擊按鈕被調用的函數
			function startRequest(){
				var xhr = creatXMLHttpRequest();
				//開通請求通道，並準備傳輸內容（請求方式、請求路徑及傳遞參數）
				xhr.open("GET","content.txt");
				//發送請求
				xhr.send();
				//請求發送後執行
				xhr.onreadystatechange = handleStateChange;
			}
			
			//初始化XMLHttpRequest對象的函數
			function creatXMLHttpRequest(){
				var xhr;
				if(window.XMLHttpRequest){
					xhr = new XMLHttpRequest();
				}else{
					try{
						xhr = new ActiveXObject("Msxml2.XMLHTTP");
					}catch(e){
						try{
							xhr = new XMLHttpRequest("Microsoft.XMLHTTP");
						}catch(e){}
					}
				}
				return xhr;
			}
			
			//處理服務器返回信息的函數
			function handleStateChange(){
				if(this.readyState == 4){	//請求狀態完成
					if(this.status == 200){	//請求成功，開始處理返回結果
						document.body.innerText = this.responseText;
					}else{
						//請求失敗
						alert("請求失敗");
					}
				}
			}
		</script>
	</head>
	<body>
		<input type="button" value="發送請求" onclick="startRequest()"/>
	</body>
</html>

實例效果

3.2 獲取XML數據

text文本內容

<?xml version="1.0" encoding="UTF-8"?>
<peopleList>
	<people>
		<name>張三</name>
		<sex>男</sex>
		<age>17</age>
	</people>
	<people>
		<name>李四</name>
		<sex>男</sex>
		<age>18</age>
	</people>
	<people>
		<name>王五</name>
		<sex>男</sex>
		<age>19</age>
	</people>
</peopleList>

實例代碼

//****** JavaScript代碼 ******
//請求發送後執行
xhr.onreadystatechange = function() {
	if(this.readyState == 4 && this.status == 200) {
		//獲取返回的XML文檔數據內容
		var XMLCont = xhr.responseXML.documentElement;
		//獲取標籤名爲people的所有節點
		var users = XMLCont.getElementsByTagName("people");
		var user, name, sex, age, str = "";
		if(parameter == "all") {
			console.log("進入")
			for(var i = 0; i < users.length; i++) {
				user = users[i];
				name = user.getElementsByTagName("name")[0].childNodes[0].nodeValue;;
				sex = user.getElementsByTagName("sex")[0].childNodes[0].nodeValue;
				age = user.getElementsByTagName("age")[0].childNodes[0].nodeValue;
				str += "姓名:" + name + "  性別:" + sex + "  年齡:" + age + "<br />";
			}
		} else {
			for(var i = 0; i < users.length; i++) {
				if(users[i].getElementsByTagName("name")[0].childNodes[0].nodeValue == parameter) {
					user = users[i];
					name = user.getElementsByTagName("name")[0].childNodes[0].nodeValue;
					sex = user.getElementsByTagName("sex")[0].childNodes[0].nodeValue;
					age = user.getElementsByTagName("age")[0].childNodes[0].nodeValue;
					str += "姓名:" + name + "  性別:" + sex + "  年齡:" + age + "<br />";
					break;
				}
			}
		}
		document.getElementById("Content").innerHTML = str;
    }
}

//****** HTML代碼 ******
<input type="button" value="所有人" onclick="startRequest('all')"/>
<input type="button" value="張三信息" onclick="startRequest('張三')"/>
<input type="button" value="李四信息" onclick="startRequest('李四')"/>
<input type="button" value="王五信息" onclick="startRequest('王五')"/>
<div id="Content"></div>

實例效果

3.3 獲取JSON數據

JSON文件數據

[
	{"name":"張三","sex":"男","age":17},
	{"name":"李四","sex":"男","age":18},
	{"name":"王五","sex":"男","age":19}
]

實例代碼

/****** JavaScript代碼 ******
/處理服務器返回信息的函數
function handleStateChange() {
	if(this.readyState == 4 && this.status == 200) {
		var parseObj = JSON.parse(this.responseText);  
		var Str = "";
		for (var i in parseObj){
                Str += "姓名:" + parseObj[i].name + 
                       "性別:" + parseObj[i].sex + 
                       "年齡:" + parseObj[i].age + "<br />";
		}  
		document.getElementById("Content").innerHTML = Str;
	} else {
		alert("請求失敗");
	}
}

/****** HTML代碼 ******
<input type="button" value="所有人" onclick="startRequest('all')"/>
<input type="button" value="張三信息" onclick="startRequest('張三')"/>
<input type="button" value="李四信息" onclick="startRequest('李四')"/>
<input type="button" value="王五信息" onclick="startRequest('王五')"/>
<div id="Content"></div>

實例效果

四、實例過程解析

這部分只介紹實例一的執行過程，其他實例同理

1、點擊按鈕調用startRequest函數，在該函數中會訪問creatXMLHttpRequest函數將其返回值賦值給局部變量xhr。

2、在creatXMLHttpRequest函數中通過判斷當然瀏覽器對象具有的那一個XMLHttpRequest的聲明方式，最終返回這個對象。

3、startRequest函數獲取了XMLHttpRequest對象之後，通過open函數開通傳輸通道，準備請求信息。該信息包括請求方法爲GET、請求URL爲content.txt,默認的請求方式爲true表示異步請求。

4、通過send函數發送請求,訪問本地的content.txt文件。

5、xhr的onreadystatechange函數通過監聽響應狀態調用handleStateChange函數,如果響應完畢(readyState值爲4),並且HTTP的請求成功時(HTTP狀態碼爲200)時,即爲響應正常.通過XMLHttpRequest對象的responseText屬性獲取響應結果的字符串.並通過DOM對象的innerText屬性插入到body內容區中。

【注意】JavaScript的Ajax響應數據類型只有兩種 Text和XML，通過響應對象調用responseText或responseXML屬性

xhr.onreadystatechange = function() {
	if (this.readyState == 4) {
		if (this.status == 200) {
			let value = xhr.responseText || xhr.responseXML;
		}
	}
};

JavaScript系列學習筆記 —— Ajax異步刷新技術

目錄

一、概念詳解

二、Ajax的核心XMLHttpRequest對象

三、Ajax案例代碼

四、實例過程解析

開源高性能結構化日誌模塊NanoLog

杭州的 IT 崩盤了麼？

【簡寫Mybatis-02】註冊機的實現以及SqlSession處理

手繪二維碼

.NET藉助虛擬網卡實現一個簡單異地組網工具

JavaScript判斷數組的維度

Java系列學習筆記 --- 網絡編程總結

JavaScript系列學習筆記 —— Ajax異步刷新技術

【Eclipse使用教程】Java導包快捷鍵

JavaScript之Array.prototype.join.call(arguments,",") 理解

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結