劉書影

（安徽新華學(xué)院 信息工程學(xué)院，安徽 合肥 230088）

基于Ajax XmlHttpRequest技術(shù)的通信實(shí)例及調(diào)試

劉書影

（安徽新華學(xué)院 信息工程學(xué)院，安徽 合肥 230088）

從應(yīng)用原理、運(yùn)行代碼和斷點(diǎn)分析3個(gè)層面對(duì)Ajax XmlHttpRequest技術(shù)的優(yōu)點(diǎn)進(jìn)行論述，提出該技術(shù)的運(yùn)用可以減少前臺(tái)和服務(wù)器的通信數(shù)據(jù)量，提高通信效率.通過(guò)對(duì)Ajax技術(shù)的簡(jiǎn)要介紹和與傳統(tǒng)B/S交互模式的對(duì)比分析后，詳述造成Ajax通信高效的兩個(gè)原因.其次給出以密碼校驗(yàn)為例的html、js、php和其完整的代碼實(shí)例，并指出該代碼在云平臺(tái)和手機(jī)端驗(yàn)證通過(guò)而生成.最后利用chrome瀏覽器內(nèi)嵌調(diào)試器進(jìn)行斷點(diǎn)調(diào)試，記錄通信階段的關(guān)鍵值，從而進(jìn)一步揭示 Ajax XmlHttpRequest整個(gè)通信過(guò)程.

Ajax；XmlHttpRequest；JavaScript；異步交互；網(wǎng)頁(yè)動(dòng)態(tài)刷新

0 引言

在經(jīng)典的Web前后臺(tái)交互中，有用信息隨完整網(wǎng)頁(yè)從服務(wù)器回傳，例如我們用html表單＜input type=“submit”＞向url提交數(shù)據(jù)時(shí)，瀏覽器會(huì)跳轉(zhuǎn)到該url頁(yè)面，由于同步交互和數(shù)據(jù)冗余，造成處理時(shí)間長(zhǎng)、用戶體驗(yàn)度低等缺點(diǎn)，制約互聯(lián)網(wǎng)特別是移動(dòng)互聯(lián)網(wǎng)的發(fā)展.近年來(lái)的JavaScript異步服務(wù)器數(shù)據(jù)交互技術(shù)，即Ajax（Asynchronous Java Script and XML），僅交互有用信息、提供異步交互模式，有效提高通信效率，節(jié)約傳輸帶寬，已成為目前主流的前后臺(tái)交互方法，在Ajax和傳統(tǒng)網(wǎng)頁(yè)交互對(duì)比實(shí)驗(yàn)中，Ajax技術(shù)使得帶寬分別節(jié)約61%和76%［1-2］.在web數(shù)據(jù)庫(kù)查詢返回中，Ajax技術(shù)克服傳統(tǒng)分頁(yè)極為緩慢的弊端［3］.本文結(jié)合項(xiàng)目開發(fā)實(shí)踐，兼顧理論性和實(shí)踐性，從技術(shù)原理、運(yùn)行代碼和斷點(diǎn)分析3個(gè)層面對(duì)該技術(shù)進(jìn)行論述.

1 Ajax概念

文章［4］中給出Ajax定義——幾項(xiàng)已有技術(shù)的組合，包含以下5點(diǎn)內(nèi)容：（1）基于XHTML和CSS標(biāo)準(zhǔn)的表示；（2）使用Document Object Model進(jìn)行動(dòng)態(tài)顯示和交互；（3）使用XML和XSLT進(jìn)行數(shù)據(jù)交換和處理；（4）使用XmlHttp Request與服務(wù)器進(jìn)行異步通信；（5）使用Java Script綁定.我們不難得到幾項(xiàng)技術(shù)的關(guān)聯(lián)性：XHTML和CSS負(fù)責(zé)網(wǎng)頁(yè)的整體顯示；Document Object Model提供網(wǎng)頁(yè)內(nèi)容的讀取和動(dòng)態(tài)更新方法；Xml和XSLT負(fù)責(zé)數(shù)據(jù)的存儲(chǔ)；XmlHttp Request是前后臺(tái)異步通信模塊，是Ajax的核心；Java Script腳本負(fù)責(zé)動(dòng)作執(zhí)行.

2 Ajax高通信效率原因分析

Ajax極大提高通信效率，主要原因在于減少數(shù)據(jù)冗余和引入異步交互模式，分別實(shí)現(xiàn)僅傳輸有效數(shù)據(jù)和釋放用戶操作資源兩個(gè)功能.

2.1 去數(shù)據(jù)冗余

由XmlHttp Request為核心的5個(gè)技術(shù)構(gòu)成Ajax引擎，解決傳輸數(shù)據(jù)冗余的問(wèn)題.圖1中描述經(jīng)典web應(yīng)用和Ajax web應(yīng)用前后臺(tái)通信模型.

圖1 經(jīng)典web應(yīng)用（左）與Ajax web應(yīng)用（右）前后臺(tái)通信模型對(duì)比

在經(jīng)典web應(yīng)用模型中，例如html表單＜input type=“submit”＞直接向服務(wù)器提交用戶名和密碼，服務(wù)器在進(jìn)行查詢、鑒權(quán)等處理后，瀏覽器會(huì)跳轉(zhuǎn)結(jié)果url上，即服務(wù)器將該url的完整網(wǎng)頁(yè)內(nèi)容以HTML+CSS數(shù)據(jù)形式交給用戶瀏覽器解析，服務(wù)器處理的返回有用信息一般很少，但需“包裹”在數(shù)據(jù)量較大的HT?ML+CSS中，頁(yè)面完整動(dòng)態(tài)顯示，造成傳輸冗余和瀏覽器“過(guò)分”計(jì)算.

在Ajax web應(yīng)用通信模型中，在客戶端和服務(wù)器端引進(jìn)一個(gè)中間層——Ajax引擎，當(dāng)向服務(wù)器發(fā)送請(qǐng)求和接受服務(wù)器響應(yīng)的時(shí)候都要通過(guò)這個(gè)中間層.Ajax引擎使得服務(wù)器只返回以XML標(biāo)準(zhǔn)包裹（或文本）有用信息，一般XML數(shù)據(jù)冗余很小，減少通信使用帶寬，通信速度增快，瀏覽器端把接收的少量有用信息進(jìn)行局部動(dòng)態(tài)顯示處理，提高web訪問(wèn)速度.

2.2 異步模式

前臺(tái)和后臺(tái)的交互模式有同步和異步兩種［4-5］，在經(jīng)典web的應(yīng)用同步交互中，遵循開始、停止、開始、停止操作模式，前臺(tái)提交數(shù)據(jù)至服務(wù)器后，用戶操作仿佛被“剝奪”，必須接收到服務(wù)器的響應(yīng)后，才可以控制用戶瀏覽器頁(yè)面.Ajax引擎提供異步交互模式，在用戶端的Ajax引擎一方面負(fù)責(zé)用戶界面的相應(yīng)，一方面負(fù)責(zé)與服務(wù)器的異步交互，使得在用戶接收服務(wù)器返回?cái)?shù)據(jù)前，用戶操作仍然是允許的.如圖2所示，經(jīng)典web應(yīng)用交互中，用戶操作的時(shí)間是間斷的，在Ajax web異步模式中，用戶發(fā)送完數(shù)據(jù)后，仍可繼續(xù)操作，Ajax引擎在客戶端后臺(tái)獨(dú)立執(zhí)行通信，當(dāng)收到服務(wù)器響應(yīng)時(shí)，中斷調(diào)用回調(diào)函數(shù)，用戶操作的時(shí)間是連續(xù)的.

圖2 經(jīng)典web同步交互與Ajax web異步交互對(duì)比

在后面實(shí)例中修改代碼，可實(shí)驗(yàn)同步和異步交互的差異.前臺(tái)以Javasript、html實(shí)現(xiàn)，后臺(tái)以php實(shí)現(xiàn).

（1）同步實(shí)驗(yàn)關(guān)鍵代碼.

（2）異步實(shí)驗(yàn)關(guān)鍵代碼.

3 實(shí)例分析

以一個(gè)實(shí)例來(lái)分析Ajax XmlHttpRequest通信原理，文中給出瀏覽器端html、js代碼和服務(wù)器php代碼.本例要求用戶輸入密碼發(fā)送至服務(wù)器，服務(wù)器對(duì)密碼進(jìn)行校驗(yàn)，合法用戶返回跳轉(zhuǎn)到指定的ur（l新浪網(wǎng)址），否則，返回錯(cuò)誤值.服務(wù)器php代碼部署在新浪云Sina App Engine上，SAE是具有高可靠、高擴(kuò)展、免運(yùn)維的云計(jì)算服務(wù)，開發(fā)者可以快速部署移動(dòng)互聯(lián)網(wǎng)項(xiàng)目.本程序已在臺(tái)式機(jī)及智能手機(jī)上運(yùn)行通過(guò).

3.1 代碼清單

3.1.1 瀏覽器端html代碼

3.1.2 瀏覽器端js代碼

3.2 通信原理分析

3.2.1 用戶界面實(shí)現(xiàn)與數(shù)據(jù)提交

瀏覽器端html代碼line5提供密碼輸入，line8提供提交按鈕，響應(yīng)函數(shù)為js的onclickfunction（）.

3.2.2 完成前后臺(tái)完整通信過(guò)程

瀏覽器端js代碼在函數(shù)體外先創(chuàng)建XmlHttpRequest等變量，這些變量是全局變量，js函數(shù)均可訪問(wèn)，當(dāng)完成交互后，應(yīng)將變量銷毀.

表1 通信標(biāo)志位

此后執(zhí)行xmlHttpRequest.send（pw）方法，向服務(wù)器發(fā)送數(shù)據(jù)，此后，readyState會(huì)由1依次變?yōu)?、3、4，每次變化均會(huì)進(jìn)入callback（），當(dāng)readyState=4且status=200時(shí)responseText就自動(dòng)接收后臺(tái)的數(shù)據(jù)，此時(shí)，可以對(duì)后臺(tái)返回的數(shù)據(jù)進(jìn)行操作.本例中，鑒權(quán)結(jié)果為合法用戶時(shí)，返回為url字符串，否則返回-1.

至此，xmlHttpRequest完成一次前后臺(tái)交互過(guò)程.

本文同時(shí)給出服務(wù)器端的php代碼，服務(wù)器對(duì)前端的密碼進(jìn)行校驗(yàn)，合法返回url，非法用戶返回錯(cuò)誤值.

4 斷點(diǎn)調(diào)試分析

為進(jìn)一步觀察xmlHttpRequest的通信過(guò)程，在js代碼的line8～11、27、34關(guān)鍵語(yǔ)句處加入斷點(diǎn)，觀察關(guān)鍵值，結(jié)果如表2所示.運(yùn)行環(huán)境為臺(tái)式電腦intel core i3 CPU/4G內(nèi)存/Windows7，調(diào)試工具為chrome內(nèi)嵌的Developer Tools，該調(diào)試工具使用方便，功能強(qiáng)大，可以實(shí)現(xiàn)斷點(diǎn)分析、數(shù)據(jù)觀察等常用功能，按下Ctrl+Shift+I即可調(diào)用.

表2 斷點(diǎn)調(diào)試結(jié)果

從表2中顯示關(guān)鍵語(yǔ)句執(zhí)行后readyState等變量狀態(tài)，狀態(tài)發(fā)生變化后，系統(tǒng)自動(dòng)調(diào)用callback（）函數(shù)，callback（）函數(shù)共調(diào)用5次，第1次在xmlHttpRequest.open（）執(zhí)行后，其余的4次集中在send（）方法之后.在本次調(diào)試中，readyState=3且status=200時(shí)，就已經(jīng)接收到url數(shù)據(jù)，但這并不可靠，經(jīng)過(guò)多次調(diào)試發(fā)現(xiàn)，僅當(dāng)readyState=4且status=200才能確保正確接收.

5 結(jié)語(yǔ)

利用云計(jì)算平臺(tái)和Chrome Developer Tools從Ajax技術(shù)介紹、優(yōu)點(diǎn)分析、代碼運(yùn)行和代碼調(diào)試等方面完成密碼校驗(yàn)功能，這對(duì)其他新技術(shù)學(xué)習(xí)具有一定的指導(dǎo)意義.Ajax XmlHttpRequest技術(shù)改變以往前后臺(tái)同步交互的模式，實(shí)現(xiàn)有用信息通信、異步交互、降低網(wǎng)絡(luò)帶寬需求和放寬終端的硬件條件，對(duì)當(dāng)前特別是移動(dòng)互聯(lián)網(wǎng)迅猛發(fā)展具有巨大的影響，是必備的基礎(chǔ)技術(shù).

［1］安勤玲.Ajax原理、性能及其應(yīng)用［J］.網(wǎng)絡(luò)安全技術(shù)與應(yīng)用，2012（2）:23-25.

［2］付丹丹，王濤，安向明.基于Ajax的Web動(dòng)態(tài)交互技術(shù)的研究與應(yīng)用［J］.中國(guó)科技信息，2014（7）：160-161.

［3］劉紅坤.基于Ajax和PHP數(shù)據(jù)分頁(yè)的實(shí)現(xiàn)［J］.計(jì)算機(jī)系統(tǒng)應(yīng)用，2012，21（2）：220.

［4］JESSE J G.Ajax：a new Approach to Web applications［J］.Adaptive Path，2005（8）:35-37.

［5］WILLIAM Stallings.操作系統(tǒng)：精髓與設(shè)計(jì)原理［M］.6版.機(jī)械工業(yè)出版社，2010.

The Communication Example and Debugging Based on Ajax XmlHttpRequest Technology

LIU Shuying
（College of Information Engineering，Anhui Xinhua University，230088，Hefei，Anhui，China）

It is accepted that Ajax XmlHttpRequest technology can reduce the amount of communication and improve its efficiency between data reception and communication server.The paper aims to analyze the ad?vantage of this technology from three different levels including its application principle，deep analysis of run?ning code and breakpoint reaction.Firstly，compared with classic B/S interactive mode，two reasons for the effi?cient communication are probed after brief introduction to XmlHttpRequest.Secondly，complete code exam?ples of HTML，JS，PHP are verified through the platform of computing cloud and mobile phone.Finally，key values of communication stage are recorded after using embedded chrome browser debugger to test its break?point reaction.Therefore，the communication process of Ajax XmlHttpRequest is further revealed.

Ajax；XmlHttpRequest；JavaScript；asynchronous interaction；dynamic renewal of web page

TP 311.1

A

2095-0691（2016）04-0042-06

2016-10-11

劉書影（1978- ），女，安徽淮北人，碩士生，講師，研究方向：數(shù)據(jù)處理、智能交通.