深入淺出ajax

1、 深入淺出深入淺出AJAX董艷琴2016.7.14AJAX概念：2 什么是AJAX：Ajax:Asynchronous JavaScript And XML 異步的javascript和xml 為什么要使用AJAX？ 是為了解決傳統(tǒng)web應(yīng)用當(dāng)中“發(fā)送請求-等待響應(yīng)”這種模式的弊端而創(chuàng)建的技術(shù)。 傳統(tǒng)模式的弊端是： 瀏覽器在發(fā)送完請求之后，只能等待服務(wù)器的響應(yīng)，用戶不能做其它的操作，瀏覽器發(fā)送完請求，會拋棄整個頁面，等待服務(wù)器返回新的頁面，也就是說，瀏覽器和服務(wù)器之間交互的數(shù)據(jù)量很大，不能夠做到按需獲取數(shù)據(jù)。AJAX 原理：3 通過瀏覽器內(nèi)置的一個對象XmlHttpRequest異步地向服務(wù)器

2、發(fā)送請求，服務(wù)器在處理完請求之后，返回數(shù)據(jù)給XmlHttpRequest,通過javascript,可以獲取XmlHttpRequest中的數(shù)據(jù)，然后，使用該數(shù)據(jù)更新頁面。整個過程當(dāng)中，用戶不用等待服務(wù)器的響應(yīng)。 所謂異步，指的是瀏覽器并沒有拋棄整個頁面，用戶仍然可以操作原有的頁面，也就是，不是通過表單提交的方式向服務(wù)器發(fā)送請求。HTTP協(xié)議：4 HTTP是hypertext transfer protocol（超文本傳輸協(xié)議）的簡寫，它是TCP/IP協(xié)議的一個應(yīng)用層協(xié)議，用于定義WEB瀏覽器與WEB服務(wù)器之間交換數(shù)據(jù)的過程。 一個完整的HTTP請求過程，通常有下面7個步驟： 1.建立TCP連

3、接 2.Web瀏覽器向Web服務(wù)器發(fā)送請求命令 3.Web瀏覽器發(fā)送請求頭信息 4.Web服務(wù)器應(yīng)答 5.Web服務(wù)器發(fā)送應(yīng)答頭信息 6.Web服務(wù)器向?yàn)g覽器發(fā)送數(shù)據(jù) 7.Web服務(wù)器關(guān)閉TCP連接一個HTTP請求一般由四部分組成：5 1.HTTP請求的方法或動作，比如是GET還是POST請求 2.正在請求的URL，總得知道請求的地址是什么吧 3.請求頭，包含一些客戶端環(huán)境信息，身份驗(yàn)證信息等 4.請求體，也就是請求正文，請求正文中可以包含客戶提交的查詢字符串信息，表單信息等等 請求頭和請求體之間又一個空行，表示請求頭結(jié)束了，接下來的內(nèi)容就是請求體。請求方式GET和POST6 GET：一般用于

4、信息獲取，使用URL傳遞參數(shù)，對所發(fā)送的信息數(shù)量有限制，一般在2000個字符。（默認(rèn)的）。一般是用于查詢信息，而不是修改信息。 POST：一般用于修改服務(wù)器上的資源，對所發(fā)送信息的數(shù)量無限制。HTTP響應(yīng)：7 一個HTTP響應(yīng)一般由三部分組成： 1.一個數(shù)字和文字組成的狀態(tài)碼，用來顯示請求是成功還是失敗 2.響應(yīng)頭，和請求頭一樣包含許多有用的信息，例如服務(wù)器類型、日期時間、內(nèi)容類型和長度等 響應(yīng)頭和實(shí)體內(nèi)容之間要用空行隔開HTTP狀態(tài)碼 status8 HTTP狀態(tài)碼由3位數(shù)字構(gòu)成，其中首位數(shù)字定義了狀態(tài)碼的類型： 1*：信息類，表示收到Web瀏覽器請求，正在進(jìn)一步的處理中 2*：成功，表示用

5、戶請求被正確接收、理解和處理。例如：200 OK 3*：重定向，表示請求沒有成功，客戶必須采取進(jìn)一步的動作 4*：客戶端錯誤，表示客戶端提交的請求有錯誤，例如：404 NOT Found，表示請求中所引用的文檔不存在 5*：服務(wù)器錯誤，表示服務(wù)器不能完成對請求的處理：如 500XMLHTTPRequest對象9 作用：XMLHTTPRequest對象用于在后臺與服務(wù)器交換數(shù)據(jù) 創(chuàng)建XMLHTTPRequest對象： 所有現(xiàn)代瀏覽器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都內(nèi)建了 XMLHttpRequest 對象： xmlHttpRequest = new

6、 XMLHttpRequest(); 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象： xmlhttp=new ActiveXObject(Microsoft.XMLHTTP);xmlHttpRequest 的屬性：10 readyState HTTP 請求的狀態(tài)。當(dāng)一個 XMLHttpRequest 初次創(chuàng)建時，這個屬性的值從 0 開始，直到接收到完整的 HTTP 響應(yīng)，這個值增加到 4。 readyState 的值不會遞減，除非當(dāng)一個請求在處理過程中的時候調(diào)用了 abort() 或 open() 方法。每次這個屬性的值增加的時候，都會觸發(fā) o

7、nreadystatechange 事件句柄。 5 個狀態(tài)中每一個都有一個相關(guān)聯(lián)的非正式的名稱，下表列出了狀態(tài)、名稱和含義：xmlHttpRequest 的屬性：11 responseText：獲得字符串形式的響應(yīng)數(shù)據(jù) responseXML:獲得XML形式的響應(yīng)數(shù)據(jù) status：由服務(wù)器以數(shù)字形式返回的HTTP狀態(tài)代碼。如 200 表示成功，而 404 表示 Not Found 錯誤。當(dāng) readyState 小于 3 的時候讀取這一屬性會導(dǎo)致一個異常。 statusText：由服務(wù)器以文本形式返回HTTP狀態(tài)碼。當(dāng)狀態(tài)為 200 的時候它是 OK，當(dāng)狀態(tài)為 404 的時候它是 Not F

8、ound。和 status 屬性一樣，當(dāng) readyState 小于 3 的時候讀取這一屬性會導(dǎo)致一個異常。xmlHttpRequest 的事件句柄(是指事件發(fā)生時要進(jìn)行的操作)：12 onreadystatechange 每次 readyState 屬性改變的時候調(diào)用的事件句柄函數(shù)。當(dāng) readyState 為 3 時，它也可能調(diào)用多次。 onreadystatechange 是一個事件句柄。它的值是一個函數(shù)的名稱，當(dāng) XMLHttpRequest 對象的狀態(tài)發(fā)生改變時，會觸發(fā)此函數(shù)。狀態(tài)從 0 (uninitialized) 到 4 (complete) 進(jìn)行變化。僅在狀態(tài)為 4 時，我們

9、才執(zhí)行代碼。xmlHttpRequest 的方法：13：初始化 HTTP 請求參數(shù) method一般大寫(GET/POST)；URL可以用相對地址；async默認(rèn)true(異步) 這個方法初始化請求參數(shù)以供 send() 方法稍后使用。它把 readyState 設(shè)置為 1，刪除之前指定的所有請求頭部，以及之前接收的所有響應(yīng)頭部，并且把 responseText、responseXML、status 以及 statusText 參數(shù)設(shè)置為它們的默認(rèn)值。：發(fā)送一個HTTP請求 如果請求體不是必須的話，這個參數(shù)就為 null。對于任何其他方法，這個參數(shù)是不可用的，應(yīng)該為 null（有些實(shí)現(xiàn)不允許省

10、略該參數(shù)）。AJAX異步請求的步驟：14 1.創(chuàng)建XMLHttpRequest對象 2.設(shè)置回調(diào)函數(shù) 3.初始化XMLHttpRequest組件 4.發(fā)送請求參數(shù)問題：15 var url = /ajax/ValiAjax?userName=+document.getElementById(userName).value; xmlHttpRequest.open(GET,url,true); xmlHttpRequest.send(null); var url = /ajax/ValiAjax.php; xmlHttpRequest.open(POST,url,true); xmlHttpRe

11、quest.setRequestHeader(Content-Type,application/x-www-form-urlencoded); xmlHttpRequest.send(userName=+ document.getElementsByName(userName)0.value); POST請求要加：xmlHttpRequest.setRequestHeader(Content-Type,application/x-www-form-urlencoded); 為了告訴服務(wù)器，這是一個POST請求，請求的內(nèi)容是用這種URL的方式發(fā)送過來的。例子：16 var xhr; if (wi

12、ndow.XMLHttpRequest) / code for IE7+, Firefox, Chrome, Opera, Safari xhr=new XMLHttpRequest(); else / code for IE6, IE5 xhr=new ActiveXObject(Microsoft.XMLHTTP); xhr.open(GET,ajax.json,true);xhr.onreadystatechange = stateChange;function stateChange() if(xhr .readyState = 4) /HTTP響應(yīng)已經(jīng)完全接收 if(xhr.stat

13、us = 200) /請求成功，響應(yīng)完成 document.getElementById(myDiv).innerHTML=xhr.responseText; JSON17 Javascript object notation,它是一種輕量級的數(shù)據(jù)交換語言，一般用于客戶端與服務(wù)器端進(jìn)行數(shù)據(jù)交換(即服務(wù)器端生成符合json語法格式的字符串，發(fā)送給服務(wù)器，然后，客戶端再將該字符串轉(zhuǎn)換成javascript對象)。 JSON是存儲和交換文本信息的語法，類似XML，它采用鍵值對的方式來組織，易于人們閱讀和編寫，同時也易于機(jī)器解析和生成。 JSON是獨(dú)立于語言的，也就是說不管什么語言，都可以解析JSON

14、，只需要按照J(rèn)SON的規(guī)則來就行。18 語法：propName : value 其中propName代表屬性名，必須用或”括起來，value代表值，如果值是String，也必須用 或“ “括起來。值還可以是null，true/false。當(dāng)然，也可以是一個對象。如: 對象： “stuff“ : “ name“ : “ 小明 “ , “ age“: “ 20“ , “name” : “小紅” , “age” : “22” 數(shù)組： “propName“ : “value“ , “propName“ : “value“ 將符合json語法格式的字符串轉(zhuǎn)換成js對象: eval和JSON.parse eval不會去看JSON字符串是否合法，JSON字符串中的JS方法會直接執(zhí)行，這樣非常危險。用eval方法去執(zhí)行第三方的JSON數(shù)據(jù)，可能包含惡意代碼。盡可能用JSON.parse()方法解析字符串本身，該方法還可以捕捉JSON中的語法錯誤。JSON將符合json語法格式的字符串轉(zhuǎn)換成js對象:19用jQuery實(shí)現(xiàn)JSON20：類型，POST或GET，默認(rèn)為GET：發(fā)送請求的地址：預(yù)期服務(wù)器返回的數(shù)據(jù)類型，如果不指定，jQuery講自動根據(jù)HTTP包MIME信息來智能判斷，一般我們采用JSON格式