作者gpmm (銀色)
看板Ajax
標題Re: [心得] 這次換json...只是簡單的教學
時間Sun Sep 5 00:14:40 2010
看到這個，忽然想起以前做的一個簡單的 pool 設計，
會寫這段是因為當我們對 xmlHttpRequest 越依賴時，
使用者就越不容易在頁面間移動，而 xmlHttpRequest 的使用就需要有些彈性，
這邊是尚未最佳化的原始 code：
http://www.jsfiddle.net/MaZp4/ （太長了所以丟到 jsfiddle 去）
大概意思就是做一個 pool 來養 request 連線種子（xmlHttpHolder），
當使用呼叫的時候種子會呈現忙碌 (busy)，連線失敗或使用完畢就讓他恢復空閒，
以此控制 request 物件的數量，
而關於 pool 的取用則是直接包進 function xmlRequest 裡，
這樣實際上我們需要呼叫的只有一個 xmlRequest 函式，
它自己會去詢問 pool 是否有 free 的種子或必須產生新的 holder 物件來存放。
好處是大量呼叫 request 送出去的時候，
會自己協調一個稍微節省效能的使用狀態。
大概就是這樣，分享一下 :P
※ 引述《s25g5d4 (死城盜賊)》之銘言：
: http://s25g5d4.sg1010.myweb.hinet.net/json.htm
: 這次順便連XMLHttpRequest方法封裝一起講好了
: 先說方法封裝是偷來的...
: function request(url, callback, data)
: {
: var xmlHttp = createXMLHTTPObject(); //建立XMLHttpRequest物件
: if ( ! xmlHttp) return;
: var method = (data) ? "POST" : "GET";
: xmlHttp.open(method, url, true); //到這裡還沒傳出去喔
: if (data)
: {
: xmlHttp.setRequestHeader('Content-type',
: 'application/x-www-form-urlencoded');
: }
: xmlHttp.onreadystatechange = function ()
: {
: if (xmlHttp.readyState != 4) return;//等於4時才代表請求完成
: if (xmlHttp.status != 200 && xmlHttp.status != 304)
: {//HTTP 200代表請求成功 反之就未成功
: alert('HTTP請求錯誤 ' + xmlHttp.status);
: return;
: }
: var jsonObj = eval('(' + xmlHttp.responseText + ')');
: //將取得的字串轉換為Object json的本質就是Object
: //不過用eval會有安全性問題...可以用json.org提供的js去parse
: //這邊會用eval是因為方便 而且我確定我的json不會有安全性問題
: callback(jsonObj);
: }
: if (xmlHttp.readyState == 4) return;
: xmlHttp.send(data); //到這邊 請求才會送出去
: }
: function createXMLHTTPObject()
: {
: var XMLHttpFactories = [
: function () {return new XMLHttpRequest()},
: function () {return new ActiveXObject("Msxml2.XMLHTTP")},
: function () {return new ActiveXObject("Msxml3.XMLHTTP")},
: function () {return new ActiveXObject("Microsoft.XMLHTTP")},
: ];
: var xmlhttp = false;
: for (var i = 0; i < XMLHttpFactories.length; i ++ )
: {
: try
: {
: xmlhttp = XMLHttpFactories[i]();
: }
: catch (e)
: {
: continue;
: }
: break;
: }
: return xmlhttp;
: }
: request('1.json', function (response) {
: //剛剛就說過了 json的本質就是Object(其實也可以是array 不過對js而言
: //array也是Object) 所以把json當Object處理
: document.write('uFlag = ' + response.uFlag + '<br>');
: document.write('message = ' + response.message);
: });
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.136.227.51
※ 編輯: gpmm 來自: 220.136.227.51 (09/05 00:16)
1F：→ TonyQ:我現在在的地方玩得比較兇，我們會把多個request打包一起送 09/05 02:29
2F：→ gpmm:是說把多個動作包成一隻 request，還是把多個 request 09/05 11:52
3F：→ gpmm:一口氣送出？ o_oa"" 09/05 11:53
4F：→ adxis:打包?是因為request頻繁到可以等一小段時間來打包嗎? 09/05 18:34
5F：→ TonyQ:多個動作包一隻 request. 09/05 19:14
6F：→ TonyQ:no , 是因為我們有把事件分級 , 分成 DEFER 跟NON_DEFER 09/05 19:15
7F：→ TonyQ:當然也是因為我們的核心模型是 server-centric 的，所以對這 09/05 19:16
8F：→ TonyQ:類event比較好掌握。 09/05 19:16
9F：推 s25g5d4:快推不然人家說我們看不懂 09/05 19:21
10F：→ TonyQ:我最近在寫一些example，等ready再發過來一起做案例討論。 09/05 19:25
11F：推 s25g5d4:T大快出書 09/05 19:27
12F：→ gpmm:喔喔，我還以為是榜多支 request 送出，猛嚇一跳 XD 09/06 01:01
13F：→ gpmm:不過這樣聽起來也滿有趣的啊，有什麼樣的 ui feedback 可以是 09/06 01:01
14F：→ gpmm: defer 處理的？ o_oa" 09/06 01:03
15F：→ TonyQ:request 可以做的事情很多元啊，不一定是 ui feedback，甚至 09/06 02:51
16F：→ TonyQ:是不需要 callback 的東西。XD 09/06 02:53
17F：→ TonyQ:其實除了DEFER/NON_DEFER以外，還有DUPLICATE_IGNORE ...etc 09/06 02:53
18F：→ TonyQ:這類的等級，很是合作為resize或mousemove這類事件用。XD 09/06 02:53
19F：→ TonyQ:有機會我舉sample來聊吧，因為光這功能就很複雜了XD 09/06 02:54
20F：→ gpmm:丟題目出來比較好玩 XD 常常都是有那個需求才會去做那個功能 09/06 19:55