"Ajax"鏄竴涓椂楂﹁瘝璇紝鑾峰緱鍔ㄥ姏鍜屾櫘鍙?qiáng)銆傚儚Gmail鍜孏oogle Suggest鐨勬湇鍔′負(fù)寮傛Javascript浣滀簡澶ч噺鐨勫箍鍛娿傚綋鐢ㄦ埛鑾峰緱鐔熸?zhèn)夊拰浠栦滑鏈熸湜澧為暱鏃跺Q岀被浼艱繖浜涚晫闈㈢殑闇姹備篃澧為暱浜嗐?br />
In this article, I will show how to build Ajax-enabled applications using Dojo and JSON--two very different but complementary technologies that can significantly enhance the interface and usability of web applications. With the help of some simple examples, you will learn how to use Dojo and JSON to build Ajax applications. This article will also demonstrate how to create custom Dojo widgets by implementing the popular "autocomplete" feature for HTML text boxes.
Overview
鍦ㄨ繖杈規(guī)枃绔犱腑錛屾垜灝嗗睍紺轟嬌鐢―ojo鍜孞SON錛嶏紞涓ょ涓嶅悓浣嗕簰鐩歌ˉ鍏呯殑鍙互閲嶅ぇ鍦頒績榪涚晫闈㈠拰W(xué)eb搴旂敤紼嬪簭鍙敤鎬х殑鎶鏈潵濡備綍鍒涘緩Ajax- enabled搴旂敤紼嬪簭銆傚湪榪欎簺綆鍗曠殑渚嬪瓙鐨勫府鍔╀笅錛屼綘鍙互瀛︿細(xì)濡備綍浣跨敤Dojo鍜孞SON鏉ュ垱寤篈jax搴旂敤紼嬪簭銆傝繖綃囨枃绔犱篃灝嗙ず鑼冨浣曚負(fù)HTML text boxes閫氳繃瀹炵幇嫻佽鐨?autocomplete"鐗規(guī)у垱寤哄畾鍒剁殑Dojo widgets 銆?br />
Ajax in the simplest sense is taken to mean the process of exchanging data between a web server and a web browser using JavaScript on a loaded web page. In the practical sense, it means avoiding browser requests in favor of asynchronous JavaScript processing, thus making the request/response process transparent to the user. To accomplish this, we can either write our own verbose JavaScript code or use already tested and functional libraries such as Dojo.
What Is Dojo?
鍦ㄦ渶綆鍗曠殑鎰熻涓紝Ajax鏄紑濮嬫剰鍛寵繖鍦╳eb鏈嶅姟鍣ㄥ拰嫻忚鍣ㄤ箣闂翠嬌鐢ㄥ湪涓涓凡鍔犺澆鐨剋eb欏甸潰涓婄殑JavaScript鏉ヤ氦鎹㈡暟鎹殑嫻佺▼銆傚湪瀹為檯鐞嗚В涓婏紝瀹冩剰鍛崇潃閬垮厤嫻忚鍣ㄨ姹傞噰鐢ㄥ紓姝?JavaScript澶勭悊錛岃繖鏍蜂駭鐢焤equest/response榪涚▼浼犻掔粰鐢ㄦ埛銆備負(fù)浜嗗畬鎴愯繖錛屾垜浠彲浠ユ垨緙栧啓璇︾粏鐨勪唬鐮佹垨浣跨敤宸茬粡緇忚繃嫻嬭瘯鐨勫拰瀹炵敤鐨勫簱渚嬪Dojo.
Dojo is a set of powerful JavaScript libraries that provide a simple API to a plethora of features. One of these features is the ability to make HTTP requests and receive their responses. This is the main functionality of Dojo that we will utilize. Aside from providing Ajax functionality, Dojo also provides packages for string manipulation, DOM manipulation, drag-and-drop support, and data structures such as lists, queues, and stacks.
Dojo鏄竴涓己澶х殑鎻愪緵綆鍗昦pi鍒板鏉傜殑鍔熻兘鐗規(guī)х殑Javascript搴撱傝繖浜涚壒寰佷箣涓灝辨槸浜х敓HTTP 璇鋒眰鍜屾帴鏀朵粬浠殑鐩稿簲鐨勮兘鍔涖傝繖鏄疍ojo鐨勪富瑕佸姛鑳芥ц浣跨敤銆傞櫎鎻愪緵Ajax鍔熻兘鎬т互澶栵紝Dojo涔熸彁渚涗簡璇稿瀛楃涓叉搷浣溿丏OM鎿嶄綔銆佹墭鏀炬敮鎸併佸拰鏁版嵁緇撴瀯渚嬪lists錛宷ueue,stack鐨勫簱銆?br />
What Is JSON?
浠涔堟槸JSON?
JSON is a Java library that helps convert Java objects into a string representation. This string, when eval()ed in JavaScript, produces an array that contains all of the information that the Java object contained. JSON's object notation grammar is suitable for encoding many nested object structures. Since this grammar is much smaller than its XML counterpart, and given the convenience of the eval() function, it is an ideal choice for fast and efficient data transport between browser and server.
JSON鏄竴涓狫ava搴擄紝瀹冨府鍔╄漿鍖朖ava瀵硅薄鎴愪竴涓瓧絎︿覆琛ㄧ幇銆傝繖瀛楃涓詫紝褰撳湪JavaScript涓璭val()ed錛屼駭鐢熶竴涓寘鍚墍鏈塉ava 瀵硅薄淇℃伅鐨勬暟緇勩?JSON's瀵硅薄絎﹀彿璇硶鏄傚悎浜庣紪鐮佽澶氬祵濂楀璞＄粨鏋勩傛棦鐒惰繖涓娉曞皬浜庡畠鐨刋ML閰嶅鐗╋紝騫朵笖緇欎簬eval()鍑芥暟鐨勬柟渚匡紝瀹冩槸鍦ㄦ祻瑙堝櫒鍜屾湇鍔″櫒涔嬮棿鐞嗘兂閫夋嫨蹇熶笖鏈夋晥鏁版嵁浼犺緭銆?br />
JSON is designed to be used in conjunction with JavaScript code making HTTP requests. Since server-side code can be written in a variety of languages, JSON is available in many different languages such as C#, Python, PHP, and of course, Java!
JSON鏄璁捐鎴愬彲鐢ㄤ簬涓嶫avaScript浠ｇ爜鍗忓姏浜х敓HTTP璇鋒眰銆傛棦鐒舵湇鍔″櫒绔唬鐮佸彲浠ヨ鍐欐垚澶氱璇█錛孞SON鏄彲鐢ㄤ簬寰堝璇█錛屼緥濡侰#,Python,PHP,騫朵笖褰撶劧閫傜敤浜嶫ava.
Getting Started
寮濮?br />
Download the sample application and do an ant war to generate dojo_json.war. You will need a servlet container like Apache Tomcat. Copy dojo_json.war into the webapps directory and, assuming you're running Tomcat on port 8080 on localhost, browse to the following URL:
涓嬭澆渚嬪瓙紼嬪簭騫朵笖浣跨敤ant war 浜х敓dojo_json.war銆備綘灝嗛渶瑕佷竴涓猄ervlet瀹瑰櫒鍍廇pache Tomcat銆傚鍒禿ojo_json.war鍒頒綘webapps鐩綍涓嬪茍涓旓紝灝嗚浣犺繍琛屽湪localhost鐨勭鍙?080鐨勶紝嫻忚濡備笅緗戝潃錛?br />
http://localhost:8080/dojo_json/index.jsp
If you see a page with a welcome message, all is well.
濡傛灉浣犵湅鍒頒竴涓榪庣殑淇℃伅鐨勯〉闈紝涓鍒囬兘濂戒簡銆?br />
A Simple HTTP Request
涓涓畝鍗曠殑HTTP 璇鋒眰
In the first example, we will use Dojo to provide a welcome message when the user clicks on a button. This will illustrate the steps involved with making an Ajax call using Dojo. Browse to http://localhost:8080/dojo_json/example1.jsp and after entering your name, click the Submit button. The JavaScript alert box that pops up contains a welcome message that was generated on the server. Let's look at the source for example1.jsp.
鍦ㄧ涓涓緥瀛愪腑錛屾垜浠皢浣跨敤Dojo褰撶敤鎴風(fēng)偣鍑諱竴涓寜閽椂錛屾彁渚涗竴涓榪庣殑淇℃伅銆傝繖灝嗙ず渚嬩嬌鐢―ojo鏈夊叧浜х敓涓涓狝jax璋冪敤鐨勬楠ゃ傛祻瑙坔ttp: //localhost:8080/dojo_json/example1.jsp騫朵笖杈撳叆浣犵殑鍚嶅瓧錛岀偣鍑?yán)L彁浜ゆ寜閽侸avascript瀵硅瘽妗嗗脊鍑烘樉紺轟竴涓湪鏈嶅姟鍣ㄤ笂浜х敓鐨勬榪庝俊鎭傝鎴戜滑鐪嬬湅example1.jsp鐨勬簮浠ｇ爜銆?br />
<html>
<body onLoad="onLoad();">
<head>
聽<title>Example 1</title>
聽<script language="javascript" src="js/dojo.js"></script>
聽<script language="javascript">
聽 dojo.require("dojo.io.*");
聽 dojo.require("dojo.event.*");
聽 function onLoad() {
聽聽 var buttonObj = document.getElementById("myButton");
聽聽 dojo.event.connect(buttonObj, "onclick",
聽聽聽聽聽聽聽聽聽 this, "onclick_myButton");
聽 }
聽 function onclick_myButton() {
聽聽 var bindArgs = {
聽聽聽 url: "welcome.jsp",
聽聽聽 error: function(type, data, evt){
聽聽聽聽 alert("An error occurred.");
聽聽聽 },
聽聽聽 load: function(type, data, evt){
聽聽聽聽 alert(data);
聽聽聽 },
聽聽聽 mimetype: "text/plain",
聽聽聽 formNode: document.getElementById("myForm")
聽聽 };
聽聽 dojo.io.bind(bindArgs);
聽 }
聽</script>
</head>
<body>
<form id="myForm">
聽<input type="text" name="name"/>
聽<input type="button" id="myButton" value="Submit"/>
</form>
</body>
</html>
The first order of business is to import the Dojo libraries, namely dojo.js. This contains all of the Dojo classes needed to use most of its features. Dojo libraries are organized in packages just like Java code. For this example, we will need to import two packages. The dojo.io package contains classes that allow us to make HTTP requests using protocols such as XMLHTTPTransport. The dojo.event package is designed to provide a unified event system for DOM and programmatic events.
浜嬪姟鐨勭涓涓『搴忔槸瀵煎叆Dojo搴擄紝琚懡鍚嶄負(fù)dojo.js銆傝繖娑夊強(qiáng)鎵鏈夌殑dojo鐨勯渶瑕佷嬌鐢ㄥ畠鐨勭壒鎬х殑澶ч儴鍒嗙被銆侱ojo搴撳儚Java浠ｇ爜涓鏍峰湪鍖呭唴榪涜緇勭粐銆備緥濡傛垜浠皢闇瑕佸鍏ヤ袱涓寘銆?dojo.io鍖呭寘鍚簡鍏佽鎴戜滑鏉ュ埄鐢ㄥ崗璁緥濡俋MLHTTPTransport鏉ュ垱寤篐TTP璇鋒眰銆俤ojo.event鍖呰璁捐鎴愪負(fù)DOM鍜岃鍒掓т簨浠舵彁渚涗竴涓粺涓鐨勪簨浠剁郴緇熴?br />
Next, we assign an onclick event handler to our button. Traditionally, we might do something like:
鎺ョ潃錛屾垜浠祴鍊間竴涓崟鍑諱簨浠跺彞鏌勭粰鎴戜滑鐨勬寜閽備紶緇熷湴錛屾垜浠儚榪欐牱鍋氾細(xì)
<input type="submit" onclick="someFunc();"/>
which serves its purpose but has the nasty side effect of associating only one event handler per event. The dojo.event.connect() method allows us to associate functions in different classes to HTML elements. Here, we assign onclick_myButton as the handler for the onclick event for myButton.
瀹冩湇鍔′簬瀹冪殑鐩殑浣嗘槸鎷ユ湁浠や漢鍘屾伓鐨勬瘡浜嬩歡鍙湁涓涓簨浠跺彞鏌勮仈緋葷殑鍓獎(jiǎng)鍝嶃俤ojo.event.connect()鏂規(guī)硶鍏佽鎴戜滑鑱旂郴鍦ㄤ笉鍚岀殑鍔熻兘緇橦TML鍏冪礌銆傝繖閲岋紝鎴戜滑璧嬪紀(jì)nlick_myButton 浣滀負(fù)myButton鐨勫崟鍑諱簨浠跺彞鏌勩?br />
Once onclick_myButton executes, we will make the call to welcome.jsp and receive the response. The magical dojo.io.bind() function is where the power lies. It takes as argument bindArgs, an array of name/value pairs. In this example, we specify five pairs:
涓鏃nclick_myButton鎵ц錛屾垜浠埗閫犺皟鐢╳elcome.jsp騫朵笖鎺ユ敹鍝嶅簲銆傝繖涓笉鍙濊鐨刣ojo.io.bind()鍑芥暟鏄姏閲忓己澶х殑浣嶇疆銆傚畠閲囩敤bindArgs鍙傛暟錛屼竴涓悕縐?鍊煎鐨勬暟緇勩傚湪榪欎釜渚嬪瓙涓紝鎴戜滑鎸囧畾浜?涓錛?br />
聽聽 1. url: The URL to make the request to.聽 url: 璇鋒眰鐨勭綉鍧
聽聽 2. mimetype: The response type expected. mimetype:鏈熷緟鍝嶅簲鐨勭被鍨?br />聽聽 3. load: Code to execute upon success. load: 鎵ц鎴愬姛鐨勪唬鐮?br />聽聽 4. error: Code to execute upon error.聽 error:鎵ц鍑洪敊鐨勪唬鐮?br />聽聽 5. formNode: The ID of the form whose fields to submit as parameters to the URL.
聽聽聽聽聽 formNode: 浣滀負(fù)涓涓弬鏁版彁浜ゅ瓧孌電殑URL鐨勮〃鍗曠殑ID.
A complete list of possible arguments can be found here.
涓涓畬鏁寸殑鍙兘鍙傛暟鐨勫垪琛ㄥ彲浠ュ湪榪欓噷鍙戠幇銆?br />
Once the call to dojo.io.bind(bindArgs) is made, the wheels are set in motion and, depending on whether the request encountered any errors, either the load or error code is executed. Both load and error take three arguments:
涓鏃﹁皟鐢╠ojo.io.bind(bindArgs)琚埗閫狅紝鍔ㄥ姏琚緗湪榪愯涓紝渚濊禆璇鋒眰閬亣浠諱綍閿欒錛屾垨鍔犺澆鎴栧け璐ヨ鎵ц銆傚姞杞藉拰澶辮觸鍖呭惈涓変釜鍙傛暟錛?br />
聽聽 1. type: The type of function; it will always be set to load for load() and error for error().
聽聽 2. data: The response received. If mimetype is specified as text/plain, data contains the raw response. If, however, text/json is used, data contains the value of eval('(' + responseReceived + ')'), where responseReceived is what the call returned.
聽聽 3. evt: The event object.
聽 聽
聽聽 1.綾誨瀷錛氬姛鑳界殑綾誨瀷錛涘畠?yōu)畣鎬繪槸璁劇疆涓簂oad()鎴愬姞杞藉拰error()鎴愬け璐ャ?br />聽聽 2.鏁版嵁錛氬搷搴旀帴鏀躲傚鏋渕imetype琚寚瀹氫負(fù)text/plan,鏁版嵁鍖呭惈鏈姞宸ュ搷搴斻傚鏋滐紝鐒惰?text/json琚嬌鐢紝鏁版嵁鍖呭惈eval ('('+responseReceived+')'),榪欓噷responseReceived 鏄皟鐢ㄨ繑鍥炵殑銆?br />聽聽 3.浜嬩歡錛氫簨浠跺璞°?br />
Alternately, we could have also specified event handlers using dojo.event.connect() by creating a handleResponse(type,data,evt) function and associating it with the request:
鍙浛浠ｇ殑錛屾垜浠篃鍙互鎷ユ湁鎸囧畾浜嬩歡鍙ユ焺浣跨敤dojo.event.connect()閫氳繃鍒涘緩涓涓猦andleResponse(type,data,event)鍑芥暟騫朵笖閫氳繃request鑱旂郴.
var req = dojo.io.bind(bindArgs);
dojo.event.connect(req, "load", this, "handleResponse");
In this case, we wouldn't need to specify the load attribute in bindArgs.
鏃㈢劧榪欐牱錛屾垜浠笉闇瑕佸湪緇戝畾鍙傛暟涓寚瀹氬姞杞藉睘鎬с?br />
Note: For security reasons, Firefox does not allow the value for url in bindArgs to reference a URL on another domain. Internet Explorer is more lenient and allows cross-domain requests.
Using JSON to Transport Java Objects
娉ㄦ剰錛氫負(fù)瀹夊叏鍘熷洜錛孎irefox涓嶅厑璁稿湪緇戝畾鍙傛暟涓負(fù)url鐨勫兼寚瀹氫竴涓猆RL鍦ㄥ彟涓涓煙涓侷E鏇村鏉句笖鍏佽瓚呭煙璇鋒眰銆?br />
As alluded to earlier, JSON helps us transform Java objects into eval()able JavaScript strings. In this example, the user is viewing a list of books. When the user's mouse hovers over a book title, we also retrieve and display all other relevant information about the book using Ajax. Example 2, found at http://localhost:8080/dojo_json/example2.jsp, illustrates this behavior.
鏃╀簺鎻愬埌鐨勯偅鏍鳳紝JSON甯姪鎴戜滑杞崲Java瀵硅薄鍒癳val()able JavaScript瀛楃涓層傚湪榪欎釜渚嬪瓙涓紝鐢ㄦ埛鏌ョ湅涔︾殑鍒楄〃銆傚綋鐢ㄦ埛鐨勯紶鏍囨斁鍦ㄤ功鐨勬爣棰樹笂錛屾垜浠幏寰楀拰鏄劇ず鎵鏈夊叾浠栫浉鍏崇殑浣跨敤Ajax鐨勪功鐨勪俊鎭備緥瀛?2錛屽湪http://localhost:8080/dojo_json/example2.jsp,紺轟緥浜嗚繖涓簨浠躲?br />
Let us take a closer look at the steps involved in achieving this effect.
Creating and Instrumenting the Java Objects
璁╂垜浠繎璺濈娉ㄨ娑夊強(qiáng)瀹屾垚榪欎釜鏁堟灉鐨勬楠ゃ?br />
The Book class is a POJO with four fields. The BookManager has a method that returns a Book object based on a bookId and another that returns List of all books. In this simple example, I've hardcoded five books into the BookManager.
涔︾被鏄竴涓湁鍥涗釜瀛楁鐨凱OJO. BookManager鏈変竴涓柟娉曪紝瀹冭繑鍥炰竴涓熀浜巄ookId鍜屽叾浠栬繑鍥炴墍鏈変功鐨勫垪琛ㄧ殑涔﹀璞°傚湪榪欎釜綆鍗曚緥瀛愪腑錛屾垜宸茬粡紜紪鐮?鏈功緇橞ookManager.
The Book.toJSONString() method is responsible for converting a Book object into a JavaScript eval()able String using the JSON API.
Book.toJSONString()鏂規(guī)硶浣跨敤JSON API杞崲涓涓功瀵硅薄JavaScript鐨?eval()able瀛楃涓叉槸鍙潬鐨劼?.
public String toJSONString() throws JSONException {
聽JSONObject jsonObj = new JSONObject();
聽jsonObj.put("bookId", new Integer(this.bookId));
聽jsonObj.put("title", this.title);
聽jsonObj.put("isbn", this.isbn);
聽jsonObj.put("author", this.author);
聽return jsonObj.toString();
}
The JSONObject class acts as a converter for the Book object into a string wrapped in curly braces, with colons between the names and values and commas between the values and names--in other words, an eval()able JavaScript string. In a similar manner as shown above, the JSONArray class can convert collections of Java objects into JavaScript arrays.
JSONObject 綾諱綔涓轟竴涓皢涔﹀璞¤漿鎹負(fù)鍖呰鍦╟urly鏀寔鐨勫瓧絎︿覆鐨勮漿鎹㈠櫒錛屽湪鍚嶅瓧鍜屽間嬌鐢ㄥ啋鍙鳳紝鍦ㄥ煎拰鍚嶇О涔嬮棿鐢ㄩ楀彿錛屾崲鍙ヨ瘽璇達(dá)紝錛屼竴涓猠val()able鐨?JavaScript瀛楃涓層傚湪涓涓儚涓婇潰鏄劇ず鐨勬牸寮忥紝JSONArray綾誨彲浠ヨ漿鍖栦竴涓狫ava瀵硅薄闆嗗悎綾誨瀷鍒頒竴涓狫avaScript鏁扮粍銆?br />
Transferring and Handling JSON-Encoded Data
浼犺緭鍜屽鐞咼SON緙栫爜鏁版嵁銆?br />
Based on a bookId, the book.jsp page returns a Book object in the form of a JSON string. The JSP does a lookup for the bookId using the BookManager.getBook(bookId) method and prints out the results of the Book.toJSONString() method. So accessing http://localhost:8080/dojo_json/book.jsp?bookId=1 will print out the JSON string for the Book with the bookId value of 1.
鍩轟簬bookId錛宐ook.jsp欏佃繑鍥炰竴涓功瀵硅薄緇勬垚JSON瀛楃涓層俲sp 浣跨敤BookMananger.getBook(bookId)鏂規(guī)硶涓烘寚瀹氱殑bookId鏌ユ壘騫朵笖鎵撳嵃鍑築ook.toJSONString()鏂規(guī)硶鐨勭粨鏋溿傛墍浠ラ氳繃http://localhost:8080/dojo_json/book.jsp?bookId=1灝嗘墦鍗板嚭JSON涓篵ookId鍊間負(fù) 1鐨勪功鐨勫瓧絎︿覆.
Back on the client side, book information is displayed in a list. Each element in the list has a mouseover (trMouseOver) and mouseout (trMouseOut) event handler attached to its <tr>. On each mouseover, we call book.jsp and pass in the bookId as a parameter. The resulting data will be the JSON String for that Book. We have specified the mime-type as text/json so that the returned value is automatically eval()ed. Let's look at the JavaScript code responsible for sending the request and processing the response:
榪斿洖鍒板鎴風(fēng)涓杈癸紝涔︾殑淇℃伅琚樉紺哄湪涓涓垪琛ㄤ腑銆傚湪鍒楄〃涓殑姣忎竴涓厓绱犻兘鏈変竴涓猰ouseover(trMouseOver)鍜宮ouseout (trMouseOut)浜嬩歡澶勭悊榪藉姞鍒板畠鐨?lt;tr>銆傚湪姣忎竴涓猰ouseover,鎴戜滑璋冪敤book.jsp騫朵笖浼犻抌ookID浣滀負(fù)涓涓弬鏁般傝繖涓粨鏋滄暟鎹皢鏄偅鏈功鐨凧SON瀛楃涓層傛垜浠寚瀹歮imetype涓簍ext/json浠ヨ嚧榪斿洖鍊兼槸鑷姩eval()ed. 璁╂垜浠湅JavaScript浠ｇ爜涓哄彂閫佽姹傚拰浼犻掕繑鍥炵殑responsible.
function trMouseOver(bookId) {
聽getBookInfo(bookId);
}
function trMouseOut(evt) {
聽var bookDiv = document.getElementById("bookInfo");
聽bookDiv.style.display = "none";
}
function getBookInfo(bookId) {
聽var params = new Array();
聽params['bookId'] = bookId;
聽var bindArgs = {
聽 url: "book.jsp",
聽 error: function(type, data, evt){
聽聽聽聽聽聽聽聽聽 alert("error");
聽聽聽聽聽聽聽聽 },
聽 mimetype: "text/json",
聽 content: params
聽};
聽var req = dojo.io.bind(bindArgs);
聽dojo.event.connect(req, "load", this, "populateDiv");
}
function populateDiv(type, data, evt) {
聽var bookDiv = document.getElementById("bookInfo");
聽if (!data) {
聽 bookDiv.style.display = "none";
聽} else {
聽 bookDiv.innerHTML = "ISBN: " + data.isbn +
聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 "<br/>Author: " + data.author;
聽 bookDiv.style.display = "";
聽}
}
Another subtle difference in this example is the use of the content property of bindArgs instead of formNode. The content attribute is a key/value mapping of properties to be constructed into parameters passed with the data request.
subtle 銆巗ub.tle銆忓井縐掔殑聽聽 閲囩敤浜哻ontent鑰屼笉鏄痜ormNode錛?content鐨勫睘鎬ф槸閿?鍊兼槧灝?br />construct銆巆on.struct銆忓緩閫?鏋勯?br />
Once data is transformed into a JavaScript object, we can easily access properties of a Book and display it to the user in a <div> element, as shown above.
Advanced Dojo: Creating an Autocompletion Widget
鏁版嵁杞崲鎴怞avaScript瀵硅薄錛屾垜浠彲浠ュ鏄撻氳繃涔︾殑灞炴ф樉紺哄湪涓涓猟iv涓娿?br />
The two examples seen above cover the core of most Ajax applications: exchanging data with a web server using JavaScript. Once the basics are understood, it is up to the developer to deliver powerful and useful UIs using Ajax tools such as Dojo. Dojo's extensible framework for widget and module development can greatly ease this process. In this section, we will create a custom widget that will allow us to offer autocompletion for our form fields.
What Is a Dojo Widget?
In the general sense, widget is a name given to a UI element such as a button, text box, scroll bar, etc. When creating a Dojo widget, we have the entire HTML language at our disposal and can create widgets that have multiple input elements, custom styles, and more. You may define event handlers for your widgets, customize their behavior, and even reuse them when creating other widgets. In this example, we will create a widget that will provide an autocompletion feature for any text box in an HTML form.
Components of a Widget
When developing widgets, the developer must decide which UI elements the widget has and how they will work. When using Dojo, this means deciding on what HTML elements to use and writing the JavaScript code to make these elements behave as needed. The autocomplete example has four files associated with it:
聽聽聽 *
聽聽聽聽聽 dojo.js: All required Dojo libraries.
聽聽聽 *
聽聽聽聽聽 js/dojo/utils/templates/AutoComplete.html: Contains UI elements, including HTML tags such as <div> and <input>. The template file can contain any valid HTML and is bound by the single requirement that it contain one root element. If more than one element is found at the top level, the first one is considered the root.
聽聽聽 *
聽聽聽聽聽 js/dojo/utils/AutoComplete.js: JavaScript code for the widget. Usually a class extending one of the Dojo Widget classes.
聽聽聽 *
聽聽聽聽聽 example3.jsp: The file where the widget is used. Usually contains a tag exported by the widget.
Learning and understanding how UI elements can be accessed and manipulated using JavaScript is the key to creating custom widgets. Once Ajax functionality is baked into the JavaScript, creating rich UIs becomes a task of creativity rather than difficulty.
Accessing UI Elements
As mentioned above, specifying a root element of the UI is mandatory. In the autocomplete example, the root element is a <div>. This element can be accessed in the AutoComplete class using this.domNode. The variable this.domNode stores a reference to the HTML object, so code like the following is possible:
this.domNode.style.display = "none";
To access any other element of the UI from the JavaScript, you may traverse this.domNode until you find what you're looking for, or instead use the dojoAttachPoint property.
<input type="text" name="someTextField" dojoAttachPoint="myTextField"/>
If the above has been defined in the HTML file, it can be accessed using this.myTextField in the JavaScript. Like this.domNode, this.myTextField is also a reference to the HTML object.
Dojo makes it easier to attach multiple event handlers to UI elements, both using JavaScript and element attributes. As illustrated earlier, to programatically attach an event handler to an element, we can use dojo.event.connect():
dojo.event.connect(this.domNode, "onclick", this, "myFunction")
The above will attach an onclick event handler myFunction() from the current class to the root element of the UI. Alternately, we may also specify this in the HTML code for the <div>:
<div dojoAttachEvent="onclick: myFunction">
<div dojoAttachEvent="onclick, onmouseover: myFunction">
Programming the Widget
Now that there is a way to access and manipulate the UI and detect all types of user actions, all that's left is writing the JavaScript code to make the widget behave as desired. Each widget is backed by a corresponding class that has access to its UI elements and is responsible for responding to user actions. The following snippet of the JavaScript code from the AutoComplete class is enough to illustrate the skeleton of the widget.
dojo.provide("utils.AutoComplete");
dojo.require("dojo.dom");
...
dojo.widget.tags.addParseTreeHandler("dojo:AutoComplete");
utils.AutoComplete = function() {
聽// call super constructor
聽dojo.widget.HtmlWidget.call(this);
聽// load template
聽this.templatePath =
聽聽聽 dojo.uri.dojoUri("utils/templates/AutoComplete.html");
聽this.widgetType = "AutoComplete";
聽// Instance variables
聽this.action = "";
聽this.formId = "";
聽this.form = {};
聽...
聽this.postCreate = function() {
聽 this.form = document.getElementById(this.formId);
聽 this.textbox = document.getElementById(this.textboxId);
聽 dojo.event.connect(this.textbox, "onkeyup",
聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 this, "textboxOnKeyUp");
聽 ...
聽}
聽this.textboxOnKeyUp = function(evt) {
聽 if (this.isKey(evt.keyCode, 38, 40)) {
聽聽 this.checkUpDownArrows(evt.keyCode);
聽 } else {
聽聽 bindArgs = {
聽聽聽 url:聽 this.action,
聽聽聽 mimetype:聽聽 "text/javascript",
聽聽聽 formNode:聽聽 this.form
聽聽 };
聽聽 var req = dojo.io.bind(bindArgs);
聽聽 dojo.event.connect(req, "load", this, "populateChoices");
聽 }
聽}
聽// Handler for "load" action of dojo.io.bind() call.
聽this.populateChoices = function(type, data, evt) {
聽 ...
聽}
}
// define inheritance
dj.inherits(utils.AutoComplete, dojo.widget.HtmlWidget);
We have defined a JavaScript class, AutoComplete, that is the "code behind" the widget. When defining a custom widget, Dojo requires the developer to explicitly specify the class being provided using the dojo.provide() function. The inheritance is indicated using the dj.inherits() function, and is realized via the call to dojo.widget.HtmlWidget.call(this). The template file for the widget is loaded by assigning a value to the this.templatePath variable of the parent class.
Dojo widgets are used on HTML pages using custom tags. Tags can be defined when writing the associated widget class. In the above example, the exported tag is dojo:AutoComplete, which is used in the HTML file in the following manner:
<dojo:AutoComplete
聽action="getBooks.jsp"
聽textboxId="bookName"
聽formId="bookForm"/>
The above will output the contents of the AutoComplete.html template to the browser. Any attributes specified in the tag can be accessed using the this.<attribute> syntax in the JavaScript class.
The nature of the autocomplete is to detect user input and provide a list of possible values that the user might be trying to enter. When a user enters any input, the textboxOnKeyUp is executed, and a call to the web server is made with the user input passed through. The web server returns a list of values to be displayed to the user as choices. We display these choices to the user in a <div> tag.
Any code omitted from the listing is just JavaScript that populates the <div> tag, choices. It also detects user key strokes, such as Tab to move to the next form field and other such details.
It's important to understand the role each of these four files plays in defining and using a widget, so take a look at them and see how they fit into the big picture. The creators of Dojo have made an honest effort to separate UI, programming, and usage into distinct files and, best of all, this methodology is easily extensible when developing powerful UIs.
The autocomplete example can be seen at http://localhost:8080/dojo_json/example3.jsp.
Conclusion
Dojo is a fine choice for a toolkit when developing Ajax and other JavaScript-intensive applications. However, there are other products, such as Scriptaculous and AjaxAnywhere, that offer similar functionality and need to be considered when writing small- to mid-size applications. Dojo's usefulness lies in a core set of libraries that features not just Ajax functionality but an entire API geared towards full-scale application development.
Resources
聽聽聽 * Sample application: Complete source of all examples
聽聽聽 * Dojo Toolkit: Official website
聽聽聽 * JSON: Official website for JSON
聽聽聽 * Dojo manual: Growing documentation
聽聽聽 * Custom widget example: Creating a slideshow using Dojo widgets
聽聽聽 * Dojo FAQ
聽聽聽 * Building dojo.js: Building a custom dojo.js using profiles
java涓栫晫鐣呰皥 2006-05-06 17:38 鍙戣〃璇勮
]]>