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

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

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

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

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

5、儲(chǔ)的 Cookie 的名字和值。 document.Cookie屬性的顯示方法是：Cookie名字Cookie 值；對(duì) document.Cookie 賦值可以創(chuàng)建一個(gè) Cookie，并且不會(huì)刪除原有的 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 編碼方式進(jìn)行編碼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 請(qǐng)求,實(shí)現(xiàn)向服務(wù)器發(fā)送數(shù)據(jù)及接收 從服務(wù)器返回的數(shù)據(jù)等操作 ,達(dá)到客戶端和服務(wù)器商通信的目的 ,實(shí)現(xiàn)這些功能的 核心技術(shù)就是微軟所建立的 XMLHttp 對(duì)象。在 JavaScript 腳本中 , 通過(guò) XMLHttp 對(duì)象可以方便的建立客戶與服務(wù)器端的通信 , 完成所需要的數(shù)據(jù)交互 ,最主要的交互方式為 GET 和 post方法。XMLHttp 對(duì)象實(shí)質(zhì)是一組 API 函數(shù)集，可以被腳本語(yǔ)言或編程語(yǔ)言調(diào)用，通過(guò) HTTP 請(qǐng)求在瀏覽器和服務(wù)器

8、之間收發(fā) XML 或其他數(shù)據(jù)。要使用 XMLHttp 對(duì)象，首先要?jiǎng)?chuàng)建 XMLHttp 對(duì)象的實(shí)例。不同瀏覽器創(chuàng)建和使 用的方法稍有不同。在 IE 中，微軟通過(guò) ActiveX 控件方式獲得 XMLHttp 對(duì)象實(shí)例： 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 對(duì) 象實(shí)例 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 對(duì)象的 8 個(gè)屬性和 6 個(gè)

10、方法。XMLHttp 對(duì)象的兩種執(zhí)行模式：同步模式和異步模式。使用 XMLHttp 對(duì)象實(shí)現(xiàn)客戶端與服務(wù)器端通信，通常分兩大部分：發(fā)送請(qǐng)求和 處理響應(yīng)。 使用 XMLHttp 對(duì)象實(shí)現(xiàn)通信的過(guò)程一般分五步： 創(chuàng)建 XMLHttp 對(duì)象，一般可以用創(chuàng)建函數(shù)來(lái)完成。建立客戶端與服務(wù)器端的連接，同時(shí)定義指令發(fā)送方式，設(shè)置服務(wù)網(wǎng)頁(yè)( URL ) 和請(qǐng)求權(quán)限。向服務(wù)器發(fā)送請(qǐng)求，使用 send()方法發(fā)送指令 等待并接收服務(wù)器端響應(yīng)，并處理返回結(jié)果。釋放 XMLHttp 對(duì)象。使用 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("錯(cuò)誤代碼 :"+XMLHttpRequest.status+" 錯(cuò)誤描 述:"+XMLHttpRequest.statusText); 使用 GET()方法異步取得本

12、地文件 d12.txt，則 要用 onreadystatechange來(lái)附加判斷 readyState屬性是否達(dá)到 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("錯(cuò)誤代碼 :"+XMLHttpRequest.status+" 錯(cuò)誤描 述:"+XMLHttpRequest.statusText); GET 請(qǐng)求使用最普遍，瀏覽器將創(chuàng)建一個(gè)請(qǐng) 求，該請(qǐng)注包含頁(yè)面 URL、一個(gè)問(wèn)號(hào)及參數(shù)。瀏覽器會(huì)將該該請(qǐng)求返回給 URL 中指定的腳本。GET 請(qǐng)求 URL 參數(shù)

14、對(duì)表示形式：open 方法參數(shù) URL 后面，用？開頭，以 name/value參數(shù)對(duì)的方式出現(xiàn)，當(dāng)有多 個(gè)參數(shù)對(duì)時(shí)，參數(shù)對(duì)之間用 & 隔開XMLHttpRequest.open( “get ” ,mle1=value&na me2=value,false);GET 請(qǐng)求中 URL 最大字符為 2MB ，參數(shù)對(duì)要使用 encodeURIComponent()函數(shù)來(lái) 進(jìn)行編碼。 在寫 URL 時(shí)，有時(shí)不能一次性確定所有參數(shù)對(duì)，則需要對(duì)已有的 URL 添加新參數(shù)對(duì)。 參數(shù)對(duì)添加函數(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( 出“錯(cuò)！ ” + XMLHttpRequest.statusText);post 請(qǐng)求的參數(shù) URL 中不直接包含參數(shù)對(duì)。參數(shù)對(duì)作為 send( )方法參數(shù)發(fā)送出去 參數(shù)對(duì)添加函數(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請(qǐng)求的 HTTP 頭部比 GET 請(qǐng)求的 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對(duì) web 應(yīng)用來(lái)說(shuō)，有很多不適合其發(fā)揮特長(zhǎng)的應(yīng)用領(lǐng)域，如對(duì)實(shí)時(shí)要求比較高的 電話系統(tǒng)、銀行系統(tǒng)等。此外由于網(wǎng)速、硬件配置等原因，在一些 web 應(yīng)用本應(yīng)發(fā)揮特長(zhǎng)的領(lǐng)域也表現(xiàn)得 不盡如意，如瀏覽網(wǎng)頁(yè)在頁(yè)面跳轉(zhuǎn)時(shí)等待較長(zhǎng)時(shí)間，局部頁(yè)面數(shù)據(jù)提交造成整個(gè) 頁(yè)面的刷新等。傳統(tǒng)的 WEB 應(yīng)用模型采用同步交互模式 ,如圖所示：Ajax WEB 應(yīng)用模式 ,如圖所示：Ajax 采用異步交互模式 ,可以僅向服務(wù)器發(fā)送并取回必需的數(shù)據(jù) ,并在客戶端采用 JavaScript處理來(lái)自服務(wù)器的響應(yīng)。使用 Ajax Web 應(yīng)用模式的優(yōu)勢(shì)： 無(wú)刷新更新頁(yè)面 ,

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

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

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

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