1. 程式人生 > >web中的同步請求和非同步請求的差別(重點是ajax中的同步與非同步)

web中的同步請求和非同步請求的差別(重點是ajax中的同步與非同步)

此前,對於web中同步請求和非同步請求的概念模糊不清,不過對於這樣的知識盲點,不去克服的話都不好意思說自己是一名前端開發人員了[捂臉][捂臉]。還好,功夫不負有心人。通過自己的方式終於讓自己理解了,這兩個概念,因此,也想把自己的理解作博文,跟大家分享,如果說的不對,還請各位同行多多指教。

一、web中的同步和非同步:
(1)同步請求:順序處理,即當我們向伺服器發出一個請求時,在伺服器沒返回結果給客戶端之前,我們要一直處於等待狀態直至伺服器將結果返回到客戶端,我們才能執行下一步操作。例如普通的B/S模式就是同步請求(注:B/S模式 也即伺服器與瀏覽器通訊主要採用HTTP協議;通訊方式為“請求——響應”,瀏覽器發出請求;伺服器做出響應。)
(2)非同步請求:並行處理,當我們向伺服器發出一個請求時,在伺服器沒返回結果之前,我們還是可以執行其他操作。例如AJAX技術就是非同步請求。

二、ajax中的同步與非同步:
不要懷疑,在ajax中其實也存在著同步請求的選項,下面就讓我們重點來說說這塊的內容。各位小夥伴搬好小板凳坐好了嗎?咱們要開始講解了哈:

ajax的open()方法
用法:open(http-method,url,async,userID,password)
後面是帳號和密碼,在禁止匿名訪問的http頁面中,需要使用者名稱和口令。
ajax.open方法中,第3個引數是設同步或者非同步。prototype等js類庫一般都預設為非同步,即設為true。 先說下同步的情況下,js會等待請求返回,獲取status。不需要onreadystatechange事件處理函式。 而非同步則需要onreadystatechange事件處理,且值為4再正確處理下面的內容。
首先看看非同步處理方式。
其中async是一個布林值。如果是非同步通訊方式(true),客戶機就不等待伺服器的響應;如果是同步方式(false),客戶機就要等到伺服器返回訊息後才去執行其他操作。我們需要根據實際需要來指定同步方式,在某些頁面中,可能會發出多個請求,甚至是有組織有計劃有隊形大規模的高強度的request,而後一個是會覆蓋前一個的,這個時候當然要指定同步方式:Flase。
請求方式
GET
最為常見的HTTP請求,普通上網瀏覽頁面就是GET。GET方式的引數請求直接跟在URL後,以問號開始。(JS中用window.location.search獲得)。引數可以用encodeURIComponent進行編碼,使用方式:
1
var EnParam = encodeURIComponent(param);
URL只支援大約2K的長度,即2048字元數;
使用GET進行AJAX請求時候會快取導致出現的頁面不是正確的,一般方法加random引數值;
ajax.send(null)。
POST
向伺服器提交資料用到。
需要將form表單中的值先取出轉換成字串,用&符號連線,(同GET傳引數一樣);
提交資料量2GB;
使用ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'),處理提交的字串;

ajax.send(strings),這個strings表示form中需要提交的內容,例如a=1&b=2類似這樣的字串。

下面是ajax中同步請求與非同步請求的程式碼示例,相信通過程式碼的比較,大家理解起來就不難了:

		<script>
                  //同步示例
			function RequestByGet(nProducttemp, nCountrytemp) {
				var xmlhttp
				if(window.XMLHttpRequest) {
					//isIE   =   false;  
					xmlhttp = new XMLHttpRequest();
				} else if(window.ActiveXObject) {
					//isIE   =   true;  
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}

				//Web page location.
				var URL = "http://www.baidu.com/;
				xmlhttp.open("GET", URL, false);
				//xmlhttp.SetRequestHeader("Content-Type","text/html; charset=Shift_JIS")
				xmlhttp.send(null);
				var result = xmlhttp.status;

				//OK
				if(result == 200) {
					document.getElementById("div_RightBarBody").innerHTML = xmlhttp.responseText;
				}
				xmlhttp = null;
			}
		</script>
		<script>
		//非同步示例
			var xmlhttp

			function RequestByGet(nProducttemp, nCountrytemp) {
				if(window.XMLHttpRequest) {
					//isIE   =   false;  
					xmlhttp = new XMLHttpRequest();
				} else if(window.ActiveXObject) {
					//isIE   =   true;  
					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
				}

				//Web page location.
				var URL = "http://www.baidu.com/";
				xmlhttp.open("GET", URL, true);
				xmlhttp.onreadystatechange = handleResponse;
				//xmlhttp.SetRequestHeader("Content-Type","text/html; charset=UTF-8")
				xmlhttp.send(null);
			}

			function handleResponse() {
				if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					document.getElementById("div_RightBarBody").innerHTML = xmlhttp.responseText;
					xmlhttp = null;
				}
			}
		</script>

對比過上面的程式碼大家是不是清晰多了呢?

三、Ajax如何確定選擇同步還是非同步:

相信這是部分初學者包括我在內一直困惑的問題,就是什麼時候該選擇同步,什麼時候該選擇非同步呢?

首先要清楚Ajax中的同步選擇是為極少數既不能使用非同步呼叫也不能重新載入整個頁面的情況而準備的。而非同步處理是為避免了伺服器檢索時候的延時問題,因為你的訪客可以繼續在頁面進行操作,而要求的資訊也可以在更新頁面的同時得到處理。

注:文中的程式碼是借鑑 簡易現代魔法的http://www.nowamagic.net/program/program_SynchronousAndAsynchronous.php,有興趣的同行可以看看這篇文章,相信也會有所收益。

相關推薦

php模擬post,get請求接受請求詳細講解

上傳 有一種 har for nts input time verify 有時 在php中我們經常用到curl拓展來進行模擬post、get請求,下面就來具體說說怎麽模擬: 一、首先模擬post請求: function http_post_data($url, $quer

AndroidHTTP PostGet請求

簡單的隨手記,適合初學者使用,現在網路請求比較流行使用OKHttp,後期部落格會寫到如何使用。 在AndroidManifest加入以下許可權 <uses-permission android:name="android.permission.INTERNET" />

ajax post 請求 get 請求的區別(二)

get 請求 1、傳遞資料方式: 資料直接在post 的 url 中傳遞,直接拼接在 url ? 後面,多個數據用 & 符號拼接 xhr.open('get ‘, 2.get.php?username = Tom & age = 30&’)

【ASP.NET】HTTP的 get post 請求

GET和POST是什麼?HTTP協議中的兩種傳送請求的方法。 HTTP是什麼?HTTP是基於TCP/IP的關於資料如何在全球資訊網中如何通訊的協議。 HTTP的底層是TCP/IP。所以GET和POST的底層也是TCP/IP,也就是說,GET/POST都是TCP連

如何在java發起httphttps請求

一般呼叫外部介面會需要用到http和https請求。 一.發起http請求 1.寫http請求方法 //處理http請求 requestUrl為請求地址 requestMethod請求方式,值為"GET"或"POST" public static String h

如何在java發起httphttps請求 配置信任

記錄下專案中遇到的問題一般呼叫外部介面會需要用到http和https請求。一.發起http請求1.寫http請求方法//處理http請求  requestUrl為請求地址  requestMethod請求方式,值為"GET"或"POST"    publicstatic St

J2EEget方式post請求方式亂碼的解決辦法

J2EE中中文亂碼的問題 J2EE中中文亂碼的問題主要就是出現在瀏覽器給伺服器提交引數資料的時候出現的。而瀏覽器與伺服器傳遞資料的方式有兩種 ①post提交方式,因為post提交方式都是把請求引數放在

ajax碰到請求url過長的問題! ajaxgetpost的區別

ajax碰到請求url過長的問題 一個超大文字框textarea裡面有大量資料,ajax通過URL請求service返回結果,URL裡面包含了各種引數,當然也包含之前的超大文字框的內容。 之前開發的時候一直用Firefox在除錯,4000長度的字串在textarea裡面通

jQuery的closest()parents()的差別

sel function ++ urn ade ron mar ber popu jQuery中的closest()和parents()的差別 jQuery中closest()和parents()的作用非常類似,都是向上尋找符合選擇器條件的元素,可是他

Python關於splitsplitext的差別運用

world spa 完整 過程 bubuko 遍歷 pan 搜索字符串 pat 在使用Python的過程中,在處理字符串的時候會遇到split()和os.path.split()兩個函數,他們的主要區別可以概括為一個從前往後搜索字符串,後者則是從後往前搜索 ‘.‘(reve

ajax跨域簡單請求複雜請求

1. 簡單請求: 滿足一下兩個條件的請求。 (1) 請求方法是以下三種方法之一: HEAD GET POST (2)HTTP的頭資訊不超出以下幾種欄位: Accept Accept-Language Content-Language Last-Event-ID

DRF跨域,簡單請求複雜請求

跨域就是跨域名,跨埠 - 為什麼會有跨域?   瀏覽器有同源限制策略 - 繞過瀏覽器同源策略就可以跨域   - jsonp(利用瀏覽器特性)      動態建立script標籤      同源策略會阻止ajax請求,但不阻止具有src屬性的標籤      <script src='xxx'

利用ajax請求,後臺返回map,ajax解析map資料

後臺返回的資料為: Map<String, String> mapList = new HashMap<String, String>(); mapList.put(key, value); Map<String, Map<String, String&g

HttpURLConnection ----GET請求 POST請求:

你想要了解HttpUrlConnection嗎? ————瞭解一個httpUrlConnection請求的順序: -帶著問題你看我的文章,理解起來會簡單許多! 1. 怎麼獲取HttpURLConnection呢?為什麼要拿它?

讓JSON請求引數請求一樣,可以通過Struts2的模型驅動給Action的類成員變數賦值(欄位驅動模型驅動)

自己定義一個攔截器: import com.opensymphony.xwork2.ActionContext; import com.opensymphony.xwork2.ActionInvocation; import com.opensymphony.xwork2.

MySql儲存過程傳參不傳參以及java呼叫程式碼

資料庫表結構 1.mysql不傳參寫儲存過程 create procedure product() -- product為儲存過程名稱 begin select * from book; end 呼叫此儲存過程為 CALL product

Linux,.a.so,其實就是靜態連結庫動態連結庫

詳細查了一下,.a與.so的區別,其實就是靜態連結庫與動態連結庫。有一篇博文,很詳細,附上鍊接:http://blog.csdn.net/nieyinyin/article/details/6890557   Linux下的.so是基於Linux下的動態連結,其功能和作用類

作業系統的中斷陷阱、以及程式語言的異常區別

在閱讀作業系統概念聖經書導論部分中,學習到了中斷和陷阱,同時聯絡到高階語言中的異常處理,下面我們介紹他們的概念。   陷阱 計算機有兩種執行模式:使用者態, 核心態。 其中作業系統執行在核心態,在核心態中,作業系統具有對所有硬體的完全訪問許可權,可以使機器執行任何指令;相反

win7 64系統Anaconda3.5.2安裝tensorflowtensorflow-gpu、Ubuntu系統Anaconda安裝tensorflowtensorflow-gpu

注意: 你的系統和安裝的Python都必須是64位,才支援Tensorflow,TensorFlow不支援32位! win64系統中Anaconda3.5.2中安裝tensorflow和tensorflow-gpu: Anaconda3.5.2中安裝tensorflow

Oracle主鍵唯一索引的區別oracle聯合主鍵的作用

 在建立主鍵的同時會生成對應的唯一索引,主鍵在保證資料唯一性的同時不允許為空, 而唯一索引可以有一個為空的資料項,一個表中只能有一個主鍵,但是一個主鍵可以有多個欄位,一個表中可以有多個唯一索引。 聯合主鍵只是讓記錄聯合的那幾個欄位總體上是唯一的,比如id1 id2 id3三