客戶端與服務(wù)器端通信

1、客戶端與服務(wù)器端通信cookieCookie 是網(wǎng)景公司開發(fā)的，便于服務(wù)器端程序通過它可以存儲和檢索客戶端機器 上的信息，一個 Cookie就是一些簡單的變量，用于存儲客戶端機器上 web 頁面 所需要的信息。Cookie以 Cookie文件的形式將一些簡單的記錄存儲在用戶機器上，這些 Cookie 文件可以由 CGI 或客戶端 Javascript創(chuàng)建，然后將被保存直到過期，它是由服務(wù) 器端程序發(fā)送的，用于相應(yīng)瀏覽器 URL 請求的信息組成。當(dāng)瀏覽器向 web服務(wù)器發(fā)出一個 URL請求時，首先檢查請求的 URL 是否可以和 本地的 Cookie匹配，那么瀏覽器將這個 Cookie作為 HTT

2、P請求 URL的一部分發(fā) 送給 web 服務(wù)器。如果用戶是第一次訪問網(wǎng)站， CGI 程序（或其他的服務(wù)器端程 序）將通過 HTTP 響應(yīng)創(chuàng)建并向瀏覽器發(fā)送 Cookie，當(dāng)服務(wù)器端程序向瀏覽器發(fā) 送 Cookie以響應(yīng) URL 請求并時，客戶端機器上的 Cookie將被更新，這樣，當(dāng)服 務(wù)器端程序被調(diào)用的時候就實現(xiàn)了客戶端機器狀態(tài)信息的更新。使用 Cookie，網(wǎng)站可以識別該客戶端是第一次訪問，還是多次訪問，還可以得到 客戶端的訪問信息。Cookie 還可以為瀏覽器提供方便的服務(wù)，例如在安全性要求不高的場合避免重復(fù) 輸入賬號和密碼，針對性地投放廣告等。但是由于 Cookie 可以記錄客戶端信息

3、，一些惡意代碼可以收集客戶端信息，例如 芯片類型等，還可以隨意修改客戶段的系統(tǒng)設(shè)置，發(fā)送廣告或者垃圾郵件等。 javascript 主要在兩個方面使用 Cookie 第一個是記錄訪客的信息，例如上次登陸的用戶名和密碼，光臨網(wǎng)站的次數(shù)等。 第二個是在頁面間傳遞變量。如果需要在頁面間傳遞信息，方法之一就是將變量 用 Cookie 的形式保存下來，需要獲取變量的頁面通過讀取 Cookie 來獲得變量的 值。（1）name ：Cookie 的唯一標(biāo)志。（2）value：保存在 Cookie 中的值，在存入之前要進行編碼。（3）empires：是時間類型的，單位是毫秒。記錄 Cookie 在客戶端保留的

4、時間。 當(dāng)系統(tǒng)時間大于 Empires屬性時， Cookie 將被刪除。（4）path：用來確定 Cookie 對象傳送的位置。（5）domain：指定關(guān)聯(lián)的 web 服務(wù)器或域，值是域名。（6）secure：Cookie 的安全性標(biāo)志，取值范圍為 true/false。如果這個屬性被設(shè)置 為 true，Cookie 會在一個安全的方式 “SSL連接”下發(fā)送到客戶端。通過 JavaScript可以設(shè)置 Cookie、讀取 Cookie 及刪除 Cookie，但由于接口函數(shù)比 較少，在 JavaScript中操作 Cookie 比較麻煩。利用 document.Cookie屬性可以獲得計算機中存

5、儲的 Cookie 的名字和值。 document.Cookie屬性的顯示方法是：Cookie名字Cookie 值；對 document.Cookie 賦值可以創(chuàng)建一個 Cookie，并且不會刪除原有的 Cookie function writeCookie(name, value, day)expire = ""expire = new Date(new Date().getTime() + (day * 24*60*60*1000);expire = " expires=" + expire.toGMTString();document.cookie

6、 = name +“ =” + escape(value) + expire;/escape()將字符串按照 URL 編碼方式進行編碼function readCookie(name)if(begin!=-1)begin=begin+name.length+1;if(end=-1)return null;return null;function delcookie(name)var exp=new Date();exp.setTime(exp.getTime()-1); if(readcookie(name)!=null)document.cookie=name+"="+&

7、quot;expires="+exp.toGMTString(); xmlhttp 多數(shù)瀏覽支持在 JavaScript中直接建立 HTTP 請求,實現(xiàn)向服務(wù)器發(fā)送數(shù)據(jù)及接收 從服務(wù)器返回的數(shù)據(jù)等操作 ,達到客戶端和服務(wù)器商通信的目的 ,實現(xiàn)這些功能的 核心技術(shù)就是微軟所建立的 XMLHttp 對象。在 JavaScript 腳本中 , 通過 XMLHttp 對象可以方便的建立客戶與服務(wù)器端的通信 , 完成所需要的數(shù)據(jù)交互 ,最主要的交互方式為 GET 和 post方法。XMLHttp 對象實質(zhì)是一組 API 函數(shù)集，可以被腳本語言或編程語言調(diào)用，通過 HTTP 請求在瀏覽器和服務(wù)器

8、之間收發(fā) XML 或其他數(shù)據(jù)。要使用 XMLHttp 對象，首先要創(chuàng)建 XMLHttp 對象的實例。不同瀏覽器創(chuàng)建和使 用的方法稍有不同。在 IE 中，微軟通過 ActiveX 控件方式獲得 XMLHttp 對象實例： var XMLHttpRquest=new ActiveXObject(“ MSXML2.XMLHTT”P)var XMLHttpRquest=new ActiveXObject(“ MSXML.XMLHTT”P)使用哪種方法創(chuàng)建，取決于客戶端所安裝的 MSXML 版本，參數(shù)可以是 “ 、 、 、MSXML2.XMLHTTP 和 Microsoft.XMLHttp 為方便開發(fā)者

9、找到客戶端的最新 MSXML 版本，可以利用函數(shù)創(chuàng)建 XMLHttp 對 象實例 function createXMLHTTP( ) var arrVersions=“ ”, “ , ” ” , ” MSXML2.XMLHTT”P, ” Microsoft.XMLHttp ” ; for (var i=0;i<arrVersions.length;i+)tryvar request=new ActiveObject(arrVersionsi); return; catch(exception) alert( 系“統(tǒng)沒有安裝 MSXML”! );XMLHttp 對象的 8 個屬性和 6 個

10、方法。XMLHttp 對象的兩種執(zhí)行模式：同步模式和異步模式。使用 XMLHttp 對象實現(xiàn)客戶端與服務(wù)器端通信，通常分兩大部分：發(fā)送請求和 處理響應(yīng)。 使用 XMLHttp 對象實現(xiàn)通信的過程一般分五步： 創(chuàng)建 XMLHttp 對象，一般可以用創(chuàng)建函數(shù)來完成。建立客戶端與服務(wù)器端的連接，同時定義指令發(fā)送方式，設(shè)置服務(wù)網(wǎng)頁( URL ) 和請求權(quán)限。向服務(wù)器發(fā)送請求，使用 send()方法發(fā)送指令 等待并接收服務(wù)器端響應(yīng)，并處理返回結(jié)果。釋放 XMLHttp 對象。使用 GET()方法同步取得本地文件 d12.txt，并提示相應(yīng)信息。var XMLHttpRequest=createXMLHT

11、TP(); XMLHttpRequest.open("get","d12.txt",false);XMLHttpRequest.send(null); if(XMLHttpRequest.status=200) alert("服務(wù)器返回的數(shù)據(jù)為 :"+XMLHttpRequest.responseText);else alert("錯誤代碼 :"+XMLHttpRequest.status+" 錯誤描 述:"+XMLHttpRequest.statusText); 使用 GET()方法異步取得本

12、地文件 d12.txt，則 要用 onreadystatechange來附加判斷 readyState屬性是否達到 4(完成狀態(tài) )。var XMLHttpRequest=createXMLHTTP(); XMLHttpRequest.open("get","d12.txt",true);XMLHttpRequest.onreadstatechange=function() if (XMLHttpRequest.readyState=4) alert (" 服務(wù)器返回的數(shù)據(jù)為 :"+XMLHttpRequest.responseTex

13、t); XMLHttpRequest.send(null);if(XMLHttpRequest.status=200) alert("服務(wù)器返回的數(shù)據(jù)為 :"+XMLHttpRequest.responseText);else alert("錯誤代碼 :"+XMLHttpRequest.status+" 錯誤描 述:"+XMLHttpRequest.statusText); GET 請求使用最普遍，瀏覽器將創(chuàng)建一個請 求，該請注包含頁面 URL、一個問號及參數(shù)。瀏覽器會將該該請求返回給 URL 中指定的腳本。GET 請求 URL 參數(shù)

14、對表示形式：open 方法參數(shù) URL 后面，用？開頭，以 name/value參數(shù)對的方式出現(xiàn)，當(dāng)有多 個參數(shù)對時，參數(shù)對之間用 & 隔開XMLHttpRequest.open( “get ” ,mle1=value&na me2=value,false);GET 請求中 URL 最大字符為 2MB ，參數(shù)對要使用 encodeURIComponent()函數(shù)來 進行編碼。 在寫 URL 時，有時不能一次性確定所有參數(shù)對，則需要對已有的 URL 添加新參數(shù)對。 參數(shù)對添加函數(shù) function addURLParamGet(sURL,sName,sValue)/sURL: 原

15、有的 URL sName:新參數(shù)名 sValue:新參數(shù)的值 sURL+=(sURL.indexOf( “?”-)1= =? “?”:;” &”) sURL+=encodeURIComponent(sName)+” =“ enencodeURIComponent(sValue); return sURL;var XMLHttpRequest=createXMLHTTP();var sURL= “ ”;sURL=addURLParamGet(sURL”, name” , ” yourname” ); sURL=addURLParamGet(sURL”, sex ”, ”male”); X

16、MLHtt pRequest.open( “get ” ,sURL,false);XMLHttpRequest.send(null);if (XMLHttpRequest.status=200)alert( 服“務(wù)器返回的數(shù)據(jù)為： ” :XMLHttpRequest.responseText);elsealert( 出“錯！ ” + XMLHttpRequest.statusText);post 請求的參數(shù) URL 中不直接包含參數(shù)對。參數(shù)對作為 send( )方法參數(shù)發(fā)送出去 參數(shù)對添加函數(shù)function addURLParamPost(sParams,sName,sValue) /sPa

17、rams原: 有參數(shù)字符 sName:新參數(shù)名 sValue:新參數(shù)的值if (sParams.length>0) sParams+= “ &” ; return sParams+encodeURIComponent(sName)+ ” =“ enencodeURIComponent(sValue); post請求的 HTTP 頭部比 GET 請求的 HTTP 頭部復(fù)雜XMLHttpRequest.setRequestHeader( “nCt-oTnytepe” , ” applicatio-nw/xww-form- urlencoded ” ); var XMLHttpRequ

18、est=createXMLHTTP();var sParams= “”;sParams =addURLParamPost(sParams, ” name” , ” yourname” ); sParams =addURLParamGet(sParams, ” sex ”, ”male”); XMLHttpRequest.open( “ post ” , ” search.asp ” ,false);XMLHttpRe quest.setRequestHeader( “ C-oTnytpeen”t , ” applicatio-nw/xww-form- urlencoded ” ); XMLHt

19、tpRequest.send(sParams);Ajax對 web 應(yīng)用來說，有很多不適合其發(fā)揮特長的應(yīng)用領(lǐng)域，如對實時要求比較高的 電話系統(tǒng)、銀行系統(tǒng)等。此外由于網(wǎng)速、硬件配置等原因，在一些 web 應(yīng)用本應(yīng)發(fā)揮特長的領(lǐng)域也表現(xiàn)得 不盡如意，如瀏覽網(wǎng)頁在頁面跳轉(zhuǎn)時等待較長時間，局部頁面數(shù)據(jù)提交造成整個 頁面的刷新等。傳統(tǒng)的 WEB 應(yīng)用模型采用同步交互模式 ,如圖所示：Ajax WEB 應(yīng)用模式 ,如圖所示：Ajax 采用異步交互模式 ,可以僅向服務(wù)器發(fā)送并取回必需的數(shù)據(jù) ,并在客戶端采用 JavaScript處理來自服務(wù)器的響應(yīng)。使用 Ajax Web 應(yīng)用模式的優(yōu)勢： 無刷新更新頁面 ,

20、減少用戶等待時間 減輕服務(wù)器的負(fù)擔(dān) 帶來更好的用戶體驗Ajax 可以把以前一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)給客戶端 ,利用客戶端的能力來處理 ,減 輕服務(wù)器和帶寬的負(fù)擔(dān)Ajax 可以調(diào)用外部數(shù)據(jù) ,增加了 Ajax 的靈活性 基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù) 促進頁面呈現(xiàn)和數(shù)據(jù)的分離Ajax 的出現(xiàn)揭開了無刷新更新頁面的序幕 ,并有代替?zhèn)鹘y(tǒng) web 開發(fā)中采用表單遞 交方式來更新 web 頁面的趨勢。Ajax 最早認(rèn)為是異步 JavaScript和 XML 的縮寫 ,更深的理解是 Ajax 為一種結(jié)合了 Java、XML 與 JavaScript 等編程技術(shù)的創(chuàng)建交互式網(wǎng)頁應(yīng)用的 web 開發(fā)技術(shù)。 Aj

21、ax 是使用客戶端腳本與 web 服務(wù)器異步交換數(shù)據(jù)的 web應(yīng)用開發(fā)方法。使用 Ajax ，可以在不中斷交互流程的情況下，重新加載 web 頁面，從而實現(xiàn)動態(tài)更 新；使用 Ajax ，可以創(chuàng)建接近本地桌面應(yīng)用的、直接的、易用的、更豐富的、更 動態(tài)的 web 用戶接口界面。Ajax 不是一種新技術(shù)，而幾種技術(shù)的組合，這些技術(shù)主要包含：XHTML 和 CSS：使用 XHTML 和 CSS 標(biāo)準(zhǔn)化呈現(xiàn)；DOM ：使用 DOM 實現(xiàn)動態(tài)顯示和交互；XML 和XSLT ：使用 XML 和 XSLT進行數(shù)據(jù)交換和處理； XMLHttpRequest:使用 XMLHttpRequest 進行異步數(shù)據(jù)讀取J

22、avaScript： 使用 JavaScript綁定和處理所有數(shù)據(jù)JavaScript:編寫 Ajax 引擎的腳本語言 ,同時負(fù)責(zé)綁定和處理所有數(shù)據(jù) ,起到紐帶的作 用. XMLHttpRequest:主要的通信代理 ,實現(xiàn)客戶端和服務(wù)器端的異步數(shù)據(jù)交互 . DOM: 對已載入頁面進行動態(tài)更新 ,實現(xiàn)動態(tài)顯示和交互 .XML: 數(shù)據(jù)交互格式 ,隨著 XML 的滸其將成為 Ajax 的一部分 隨著 Ajax 技術(shù)的流行 ,越來越多的商業(yè)網(wǎng)站使用 Ajax 技術(shù)來改進其用戶體驗 ,并獲 得了很好的效果 ,受到廣大用戶的歡迎。成功案例： Google主頁、 Google Maps等Ajax 的特點在

23、于異步通信、按需讀取數(shù)據(jù)、動態(tài)地更新 Web 頁面，適用于頻繁 交互、頻繁讀取數(shù)據(jù)、需要動態(tài)更新的 Web 應(yīng)用。主要應(yīng)用場景有：數(shù)據(jù)驗證按需讀取數(shù)據(jù)自動實時更新頁面使用 GET()方法異步取得本地文件 d12.txt，則要用 onreadystatechange來附加判斷 readyState屬性是否達到 4(完成狀態(tài) )。var XMLHttpRequest=createXMLHTTP(); XMLHttpRequest.open("get","d12.txt",true); XMLHttpRequest.onreadstatechange=function() if (XMLHttpRequest.rea