1. 程式人生 > >jQuery-AJAX模組解析-response部分

jQuery-AJAX模組解析-response部分

上回說完request部分,這次就是response部分了。閒話少敘,切入正題。

處理response資料,jQuery的方式主要是使用ajaxHandleResponse(型別適配)和ajaxConvert(型別轉換)。

先看下注冊處理函式的流程:

transport.send( requestHeaders, done );
send: function( headers, complete ) {
	// Listener
	callback = function( _, isAbort ) {
		// Call complete if needed
		if ( responses ) {
			complete( status, statusText, responses, xhr.getAllResponseHeaders() );
		}
	};

	if ( !options.async ) {
		// if we're in sync mode we fire the callback
		callback();
	} else if ( xhr.readyState === 4 ) {
		// (IE6 & IE7) if it's in cache and has been
		// retrieved directly we need to fire the callback
		setTimeout( callback );
	} else {
		// Add to the list of active xhr callbacks
		xhr.onreadystatechange = xhrCallbacks[ id ] = callback;
	}
}

這是普通的transport物件進行監聽readystatechange事件,處理回撥的方式。

send: function( _, callback ) {

	script = document.createElement("script");

	// Attach handlers for all browsers
	script.onload = script.onreadystatechange = function( _, isAbort ) {

		if ( isAbort || !script.readyState || /loaded|complete/.test( script.readyState ) ) {

			// Callback if not abort
			if ( !isAbort ) {
				callback( 200, "success" );
			}
		}
	};
	head.insertBefore( script, head.firstChild );
}
這是跨域的transport物件進行監聽script的onload或readystatechange事件,處理回撥的方式。

上述兩種方式使用的都是done函式來處理資料,所以ajax的response部分著重就在於done函數了,來看下done方法:

function done( status, nativeStatusText, responses, headers ) {
	var isSuccess, success, error, response, modified,
		statusText = nativeStatusText;
	//略...
	// Get response data
	if ( responses ) {
		response = ajaxHandleResponses( s, jqXHR, responses );
	}

	// Convert no matter what (that way responseXXX fields are always set)
	response = ajaxConvert( s, response, jqXHR, isSuccess );
	//略...
}

done函式處理response資料使用了ajaxHandleResponse和ajaxConvert。

型別適配主要做的是試著猜測對應的資料型別和返回改型別的資料,並且改變dataTypes的值。來看下型別適配:

send: function( headers, complete ) {
	// Listener
	callback = function( _, isAbort ) {
		// Call complete if needed
		if ( responses ) {
			complete( status, statusText, responses, xhr.getAllResponseHeaders() );
		}
	};

	if ( !options.async ) {
		// if we're in sync mode we fire the callback
		callback();
	} else if ( xhr.readyState === 4 ) {
		// (IE6 & IE7) if it's in cache and has been
		// retrieved directly we need to fire the callback
		setTimeout( callback );
	} else {
		// Add to the list of active xhr callbacks
		xhr.onreadystatechange = xhrCallbacks[ id ] = callback;
	}
}
send: function( _, callback ) {

	script = document.createElement("script");

	// Attach handlers for all browsers
	script.onload = script.onreadystatechange = function( _, isAbort ) {

		if ( isAbort || !script.readyState || /loaded|complete/.test( script.readyState ) ) {

			// Callback if not abort
			if ( !isAbort ) {
				callback( 200, "success" );
			}
		}
	};
	head.insertBefore( script, head.firstChild );
}

function done( status, nativeStatusText, responses, headers ) {
	var isSuccess, success, error, response, modified,
		statusText = nativeStatusText;
	//略...
	// Get response data
	if ( responses ) {
		response = ajaxHandleResponses( s, jqXHR, responses );
	}

	// Convert no matter what (that way responseXXX fields are always set)
	response = ajaxConvert( s, response, jqXHR, isSuccess );
	//略...
}

/* Handles responses to an ajax request:
 * - finds the right dataType (mediates between content-type and expected dataType)
 * - returns the corresponding response
 */
function ajaxHandleResponses( s, jqXHR, responses ) {
	var firstDataType, ct, finalDataType, type,
		contents = s.contents,
		dataTypes = s.dataTypes;

	// Remove auto dataType and get content-type in the process
	while ( dataTypes[ 0 ] === "*" ) {
		dataTypes.shift();
		if ( ct === undefined ) {
			//試著根據mimeType型別和頭資訊的Content-Type去猜測他的資料型別
			ct = s.mimeType || jqXHR.getResponseHeader("Content-Type");
		}
	}

	// Check if we're dealing with a known content-type
	if ( ct ) {
		for ( type in contents ) {
			/*
				xml: /xml/,
				html: /html/,
				json: /json/
				符合上述三種類型會放到dataTypes中
			*/
			if ( contents[ type ] && contents[ type ].test( ct ) ) {
				dataTypes.unshift( type );
				break;
			}
		}
	}

	// Check to see if we have a response for the expected dataType
	if ( dataTypes[ 0 ] in responses ) {
		finalDataType = dataTypes[ 0 ];
	} else {
		// Try convertible dataTypes
		for ( type in responses ) {
			if ( !dataTypes[ 0 ] || s.converters[ type + " " + dataTypes[0] ] ) {
				finalDataType = type;
				break;
			}
			if ( !firstDataType ) {
				firstDataType = type;
			}
		}
		// Or just use first one
		//獲取最終的finalDataType
		finalDataType = finalDataType || firstDataType;
	}

	// If we found a dataType
	// We add the dataType to the list if needed
	// and return the corresponding response
	if ( finalDataType ) {
		if ( finalDataType !== dataTypes[ 0 ] ) {
			dataTypes.unshift( finalDataType );
		}
		return responses[ finalDataType ];
	}
}
ajaxHandleResponse最終會當存在該型別中返回response資料,並改變s.dataTypes中的值,會影響到下面ajaxConvert的行為。

ajaxConvert做的是獲取正確的轉換器並試著去轉換資料,然後返回正確型別的資料。

/* Chain conversions given the request and the original response
 * Also sets the responseXXX fields on the jqXHR instance
 */
function ajaxConvert( s, response, jqXHR, isSuccess ) {
	var conv2, current, conv, tmp, prev,
		converters = {},
		// Work with a copy of dataTypes in case we need to modify it for conversion
		dataTypes = s.dataTypes.slice();

	// Create converters map with lowercased keys
	if ( dataTypes[ 1 ] ) {
		for ( conv in s.converters ) {
			converters[ conv.toLowerCase() ] = s.converters[ conv ];
		}
	}

	current = dataTypes.shift();

	// Convert to each sequential dataType
	while ( current ) {

		if ( s.responseFields[ current ] ) {
			jqXHR[ s.responseFields[ current ] ] = response;
		}

		// Apply the dataFilter if provided
		if ( !prev && isSuccess && s.dataFilter ) {
			response = s.dataFilter( response, s.dataType );
		}

		prev = current;
		current = dataTypes.shift();

		if ( current ) {

			// There's only work to do if current dataType is non-auto
			if ( current === "*" ) {

				current = prev;

			// Convert response if prev dataType is non-auto and differs from current
			} else if ( prev !== "*" && prev !== current ) {

				// Seek a direct converter
				conv = converters[ prev + " " + current ] || converters[ "* " + current ];

				// If none found, seek a pair
				if ( !conv ) {
					for ( conv2 in converters ) {

						// If conv2 outputs current
						tmp = conv2.split( " " );
						if ( tmp[ 1 ] === current ) {

							// If prev can be converted to accepted input
							conv = converters[ prev + " " + tmp[ 0 ] ] ||
								converters[ "* " + tmp[ 0 ] ];
							if ( conv ) {
								// Condense equivalence converters
								if ( conv === true ) {
									conv = converters[ conv2 ];

								// Otherwise, insert the intermediate dataType
								} else if ( converters[ conv2 ] !== true ) {
									current = tmp[ 0 ];
									dataTypes.unshift( tmp[ 1 ] );
								}
								break;
							}
						}
					}
				}

				// Apply converter (if not an equivalence)
				if ( conv !== true ) {

					// Unless errors are allowed to bubble, catch and return them
					if ( conv && s[ "throws" ] ) {
						response = conv( response );
					} else {
						try {
							response = conv( response );
						} catch ( e ) {
							return { state: "parsererror", error: conv ? e : "No conversion from " + prev + " to " + current };
						}
					}
				}
			}
		}
	}

	return { state: "success", data: response };
}

ajaxConvert看起來比較直觀,無非是獲取到完整的dataType,然後在converters裡面的尋找對應的轉換器,最後返回轉換好的資料。

最後根據response的資料fire對應的回撥列表:

// Success/Error
if ( isSuccess ) {
	deferred.resolveWith( callbackContext, [ success, statusText, jqXHR ] );
} else {
	deferred.rejectWith( callbackContext, [ jqXHR, statusText, error ] );
}
ajax的response模組相對較為直接,就不再贅述。

jQuery的ajax部分到這裡基本就結束了,有疑問或錯誤之處歡迎指出~

允許轉載,請帶上出處:http://blog.csdn.net/z905951024 by denied.

另外關於http頭資訊的資料下面貼一下:


本文根據RFC2616(HTTP/1.1規範),參考

通常HTTP訊息包括客戶機向伺服器的請求訊息和伺服器向客戶機的響應訊息。這兩種型別的訊息由一個起始行,一個或者多個頭域,一個只是頭域結束的空行和可 選的訊息體組成。HTTP的頭域包括通用頭,請求頭,響應頭和實體頭四個部分。每個頭域由一個域名,冒號(:)和域值三部分組成。域名是大小寫無關的,域 值前可以新增任何數量的空格符,頭域可以被擴充套件為多行,在每行開始處,使用至少一個空格或製表符。 

  通用頭域 (通用首部)

通用頭域包含請求和響應訊息都支援的頭域,提供了與報文相關的最基本的資訊,通用頭域包含 

Connection 允許客戶端和伺服器指定與請求/響應連線有關的選項

Date 提供日期和時間標誌,說明報文是什麼時間建立的

MIME-Version 給出傳送端使用的MIME版本

Trailer 如果報文采用了分塊傳輸編碼(chunked transfer encoding) 方式,就可以用這個首部列出位於報文拖掛(trailer)部分的首部集合

Transfer-Encoding 告知接收端為了保證報文的可靠傳輸,對報文采用了什麼編碼方式

Upgrade 給出了傳送端可能想要"升級"使用的新版本和協議

Via 顯示了報文經過的中間節點(代理,網嘎un)

對通用頭域的擴充套件要求通訊雙方都支援此擴 展,如果存在不支援的通用頭域,一般將會作為實體頭域處理。下面簡單介紹幾個在UPnP訊息中使用的通用頭域。 


  Cache-Control頭域 

Cache -Control指定請求和響應遵循的快取機制。在請求訊息或響應訊息中設定 Cache-Control並不會修改另一個訊息處理過程中的快取處理過程。請求時的快取指令包括no-cache、no-store、max-age、 max-stale、min-fresh、only-if-cached,響應訊息中的指令包括public、private、no-cache、no- store、no-transform、must-revalidate、proxy-revalidate、max-age。各個訊息中的指令含義如 下: 

Public指示響應可被任何快取區快取。 

Private指示對於單個使用者的整個或部分響應訊息,不能被共享快取處理。這允許伺服器僅僅描述當用戶的部分響應訊息,此響應訊息對於其他使用者的請求無效。 

no-cache指示請求或響應訊息不能快取 

no-store用於防止重要的資訊被無意的釋出。在請求訊息中傳送將使得請求和響應訊息都不使用快取。 

max-age指示客戶機可以接收生存期不大於指定時間(以秒為單位)的響應。 

min-fresh指示客戶機可以接收響應時間小於當前時間加上指定時間的響應。 

max-stale指示客戶機可以接收超出超時期間的響應訊息。如果指定max-stale訊息的值,那麼客戶機可以接收超出超時期指定值之內的響應訊息。 


  Date頭域 

Date頭域表示訊息傳送的時間,時間的描述格式由rfc822定義。例如,Date:Mon,31Dec200104:25:57GMT。Date描述的時間表示世界標準時,換算成本地時間,需要知道使用者所在的時區。 

  Pragma頭域 

Pragma頭域用來包含實現特定的指令,最常用的是Pragma:no-cache。在HTTP/1.1協議中,它的含義和Cache- Control:no-cache相同。 

  請求訊息 

請求訊息的第一行為下面的格式: 

MethodSPRequest-URISPHTTP-VersionCRLFMethod 表示對於Request-URI完成的方法,這個欄位是大小寫敏感的,包括OPTIONS、GET、HEAD、POST、PUT、DELETE、 TRACE。方法GET和HEAD應該被所有的通用WEB伺服器支援,其他所有方法的實現是可選的。GET方法取回由Request-URI標識的資訊。 HEAD方法也是取回由Request-URI標識的資訊,只是可以在響應時,不返回訊息體。POST方法可以請求伺服器接收包含在請求中的實體資訊,可 以用於提交表單,向新聞組、BBS、郵件群組和資料庫傳送訊息。 

SP表示空格。Request-URI遵循URI格式,在此欄位為星 號(*)時,說明請求並不用於某個特定的資源地址,而是用於伺服器本身。HTTP- Version表示支援的HTTP版本,例如為HTTP/1.1。CRLF表示換行回車符。請求頭域允許客戶端向伺服器傳遞關於請求或者關於客戶機的附加 資訊。請求頭域可能包含下列欄位Accept、Accept-Charset、Accept- Encoding、Accept-Language、Authorization、From、Host、If-Modified-Since、If- Match、If-None-Match、If-Range、If-Range、If-Unmodified-Since、Max-Forwards、 Proxy-Authorization、Range、Referer、User-Agent。對請求頭域的擴充套件要求通訊雙方都支援,如果存在不支援的請 求頭域,一般將會作為實體頭域處理。 

  典型的請求訊息: 

GET http://download.google.com/somedata.exe 
Host: download.google.com
Accept:*/* 
Pragma: no-cache 
Cache-Control: no-cache 
Referer: http://download.google.com
User-Agent:Mozilla/4.04[en](Win95;I;Nav) 
Range:bytes=554554- 

上例第一行表示HTTP客戶端(可能是瀏覽器、下載程式)通過GET方法獲得指定URL下的檔案。棕色的部分表示請求頭域的資訊,綠色的部分表示通用頭部分。 

  Host頭域 

Host頭域指定請求資源的Intenet主機和埠號,必須表示請求url的原始伺服器或閘道器的位置。HTTP/1.1請求必須包含主機頭域,否則系統會以400狀態碼返回。 

  Referer頭域 

Referer 頭域允許客戶端指定請求uri的源資源地址,這可以允許伺服器生成回退連結串列,可用來登陸、優化cache等。他也允許廢除的或錯誤的連線由於維護的目的被 追蹤。如果請求的uri沒有自己的uri地址,Referer不能被髮送。如果指定的是部分uri地址,則此地址應該是一個相對地址。 

  Range頭域 

Range頭域可以請求實體的一個或者多個子範圍。例如, 
表示頭500個位元組:bytes=0-499 
表示第二個500位元組:bytes=500-999 
表示最後500個位元組:bytes=-500 
表示500位元組以後的範圍:bytes=500- 
第一個和最後一個位元組:bytes=0-0,-1 
同時指定幾個範圍:bytes=500-600,601-999 

但是伺服器可以忽略此請求頭,如果無條件GET包含Range請求頭,響應會以狀態碼206(PartialContent)返回而不是以200 (OK)。 

  User-Agent頭域 

User-Agent頭域的內容包含發出請求的使用者資訊。 

  響應訊息 

響應訊息的第一行為下面的格式: 

HTTP-VersionSPStatus-CodeSPReason-PhraseCRLF 

HTTP -Version表示支援的HTTP版本,例如為HTTP/1.1。Status- Code是一個三個數字的結果程式碼。Reason-Phrase給Status-Code提供一個簡單的文字描述。Status-Code主要用於機器自 動識別,Reason-Phrase主要用於幫助使用者理解。Status-Code的第一個數字定義響應的類別,後兩個數字沒有分類的作用。第一個數字可 能取5個不同的值: 

1xx:資訊響應類,表示接收到請求並且繼續處理 

2xx:處理成功響應類,表示動作被成功接收、理解和接受 

3xx:重定向響應類,為了完成指定的動作,必須接受進一步處理 

4xx:客戶端錯誤,客戶請求包含語法錯誤或者是不能正確執行 

5xx:服務端錯誤,伺服器不能正確執行一個正確的請求 

響應頭域允許伺服器傳遞不能放在狀態行的附加資訊,這些域主要描述伺服器的資訊和 Request-URI進一步的資訊。響應頭域包含Age、Location、Proxy-Authenticate、Public、Retry- After、Server、Vary、Warning、WWW-Authenticate。對響應頭域的擴充套件要求通訊雙方都支援,如果存在不支援的響應頭 域,一般將會作為實體頭域處理。 

典型的響應訊息: 

HTTP/1.0200OK 
Date:Mon,31Dec200104:25:57GMT 
Server:Apache/1.3.14(Unix) 
Content-type:text/html 
Last-modified:Tue,17Apr200106:46:28GMT 
Etag:"a030f020ac7c01:1e9f" 
Content-length:39725426 
Content-range:bytes554554-40279979/40279980 

上例第一行表示HTTP服務端響應一個GET方法。棕色的部分表示響應頭域的資訊,綠色的部分表示通用頭部分,紅色的部分表示實體頭域的資訊。 

  Location響應頭 

Location響應頭用於重定向接收者到一個新URI地址。 

  Server響應頭 

Server響應頭包含處理請求的原始伺服器的軟體資訊。此域能包含多個產品標識和註釋,產品標識一般按照重要性排序。 

  實體 

請求訊息和響應訊息都可以包含實體資訊,實體資訊一般由實體頭域和實體組成。實體頭域包含關於實體的原資訊,實體頭包括Allow、Content- Base、Content-Encoding、Content-Language、 Content-Length、Content-Location、Content-MD5、Content-Range、Content-Type、 Etag、Expires、Last-Modified、extension-header。extension-header允許客戶端定義新的實體 頭,但是這些域可能無法未接受方識別。實體可以是一個經過編碼的位元組流,它的編碼方式由Content-Encoding或Content-Type定 義,它的長度由Content-Length或Content-Range定義。 

  Content-Type實體頭 

Content-Type實體頭用於向接收方指示實體的介質型別,指定HEAD方法送到接收方的實體介質型別,或GET方法傳送的請求介質型別 Content-Range實體頭 

Content-Range實體頭用於指定整個實體中的一部分的插入位置,他也指示了整個實體的長度。在伺服器向客戶返回一個部分響應,它必須描述響應覆蓋的範圍和整個實體長度。一般格式: 

Content-Range:bytes-unitSPfirst-byte-pos-last-byte-pos/entity-legth 

例如,傳送頭500個位元組次欄位的形式:Content-Range:bytes0- 499/1234如果一個http訊息包含此節(例如,對範圍請求的響應或對一系列範圍的重疊請求),Content-Range表示傳送的範圍, Content-Length表示實際傳送的位元組數。 

  Last-modified實體頭 

應答頭 說明
Allow 伺服器支援哪些請求方法(如GET、POST等)。
Content-Encoding 文 檔的編碼(Encode)方法。只有在解碼之後才可以得到Content-Type頭指定的內容型別。利用gzip壓縮文件能夠顯著地減少HTML文件的 下載時間。Java的GZIPOutputStream可以很方便地進行gzip壓縮,但只有Unix上的Netscape和Windows上的IE 4、IE 5才支援它。因此,Servlet應該通過檢視Accept-Encoding頭(即request.getHeader("Accept- Encoding"))檢查瀏覽器是否支援gzip,為支援gzip的瀏覽器返回經gzip壓縮的HTML頁面,為其他瀏覽器返回普通頁面。
Content-Length 表 示內容長度。只有當瀏覽器使用持久HTTP連線時才需要這個資料。如果你想要利用持久連線的優勢,可以把輸出文件寫入 ByteArrayOutputStram,完成後檢視其大小,然後把該值放入Content-Length頭,最後通過 byteArrayStream.writeTo(response.getOutputStream()傳送內容。
Content-Type 表示後面的文件屬於什麼MIME型別。Servlet預設為text/plain,但通常需要顯式地指定為text/html。由於經常要設定Content-Type,因此HttpServletResponse提供了一個專用的方法setContentTyep。 
Date 當前的GMT時間。你可以用setDateHeader來設定這個頭以避免轉換時間格式的麻煩。
Expires 應該在什麼時候認為文件已經過期,從而不再快取它?
Last-Modified 文 檔的最後改動時間。客戶可以通過If-Modified-Since請求頭提供一個日期,該請求將被視為一個條件GET,只有改動時間遲於指定時間的文件 才會返回,否則返回一個304(Not Modified)狀態。Last-Modified也可用setDateHeader方法來設定。
Location 表示客戶應當到哪裡去提取文件。Location通常不是直接設定的,而是通過HttpServletResponse的sendRedirect方法,該方法同時設定狀態程式碼為302。
Refresh 表示瀏覽器應該在多少時間之後重新整理文件,以秒計。除了重新整理當前文件之外,你還可以通過setHeader("Refresh", "5; URL=http://host/path")讓瀏覽器讀取指定的頁面。 
注 意這種功能通常是通過設定HTML頁面HEAD區的<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://host/path">實現,這是因為,自動重新整理或重定向對於那些不能使用CGI或Servlet的 HTML編寫者十分重要。但是,對於Servlet來說,直接設定Refresh頭更加方便。 

注意Refresh的意義是“N秒之後 重新整理本頁面或訪問指定頁面”,而不是“每隔N秒重新整理本頁面或訪問指定頁面”。因此,連續重新整理要求每次都發送一個Refresh頭,而傳送204狀態程式碼則 可以阻止瀏覽器繼續重新整理,不管是使用Refresh頭還是<META HTTP-EQUIV="Refresh" ...>。 

注意Refresh頭不屬於HTTP 1.1正式規範的一部分,而是一個擴充套件,但Netscape和IE都支援它。
Server 伺服器名字。Servlet一般不設定這個值,而是由Web伺服器自己設定。
Set-Cookie 設定和頁面關聯的Cookie。Servlet不應使用response.setHeader("Set-Cookie", ...),而是應使用HttpServletResponse提供的專用方法addCookie。參見下文有關Cookie設定的討論。
WWW-Authenticate 客 戶應該在Authorization頭中提供什麼型別的授權資訊?在包含401(Unauthorized)狀態行的應答中這個頭是必需的。例如, response.setHeader("WWW-Authenticate", "BASIC realm=\"executives\"")。 
注意Servlet一般不進行這方面的處理,而是讓Web伺服器的專門機制來控制受密碼保護頁面的訪問(例如.htaccess)。