使用jQuery Ajax功能時需要注意的一個問題(內(nèi)存溢出)
更新時間：2012年05月30日 15:26:18 作者：
最近發(fā)現(xiàn)jQuery越來越火，用它的人也越來越多。jQuery最強大的亮點莫過于它的CSS3 selector和極其簡單的Ajax請求調(diào)用
最近一哥們在做一個Ajax長連接的項目，頁面需要和服務(wù)器保持長連接，而且在連接超時后需要重新請求連接，過程中他問我要用到什么，我也是想都沒想就告訴他用jQuery。jQuery不是有ajaxSuccess ajaxError這些對象嗎，在請求完成或者請求失敗后重新請求不就好了。
但是后來他告訴我說沒有用 jQuery，自己手工寫的XMLhttprequest 。他告訴我說，開始是用jquery寫的，而且在測試過程中也沒有出現(xiàn)問題。但是在后來無意中發(fā)現(xiàn)，在頁面開的時候久了之后，瀏覽器資源竟然占用非常高導(dǎo)致內(nèi)存不足而崩潰了。后來抓包分析發(fā)現(xiàn)，每次jquery的Ajax請求都會創(chuàng)建一個xmlHttprequest對象，理論上講，長連接的請求是一個無限遞歸，請求數(shù)量是非常大的，但是由于每次請求都會建立一個新的xmlhttprequest，而且jquery不會自動回收資源，所以導(dǎo)致了內(nèi)存溢出。
通過查看jquery API，發(fā)現(xiàn)jquery還有一個 complete對象，是請求完成后回調(diào)函數(shù) (請求成功或失敗之后均調(diào)用)。 同時有兩個參數(shù)XMLHttpRequest, textStatus。所以，我們只需要在請求完成后，將傳回的XMLHttprequest對象手工回收即可，代碼如下：
$.ajax({
url: "http://chabaoo.cn",
data: { name: "xxxx" },
dataType: "xml",
success: function (data, textStatus) {
//do something...
},
complete: function (XHR, TS) { XHR = null }
});
但是后來他告訴我說沒有用 jQuery，自己手工寫的XMLhttprequest 。他告訴我說，開始是用jquery寫的，而且在測試過程中也沒有出現(xiàn)問題。但是在后來無意中發(fā)現(xiàn)，在頁面開的時候久了之后，瀏覽器資源竟然占用非常高導(dǎo)致內(nèi)存不足而崩潰了。后來抓包分析發(fā)現(xiàn)，每次jquery的Ajax請求都會創(chuàng)建一個xmlHttprequest對象，理論上講，長連接的請求是一個無限遞歸，請求數(shù)量是非常大的，但是由于每次請求都會建立一個新的xmlhttprequest，而且jquery不會自動回收資源，所以導(dǎo)致了內(nèi)存溢出。
通過查看jquery API，發(fā)現(xiàn)jquery還有一個 complete對象，是請求完成后回調(diào)函數(shù) (請求成功或失敗之后均調(diào)用)。 同時有兩個參數(shù)XMLHttpRequest, textStatus。所以，我們只需要在請求完成后，將傳回的XMLHttprequest對象手工回收即可，代碼如下：
復(fù)制代碼 代碼如下:
$.ajax({
url: "http://chabaoo.cn",
data: { name: "xxxx" },
dataType: "xml",
success: function (data, textStatus) {
//do something...
},
complete: function (XHR, TS) { XHR = null }
});
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了jQuery實現(xiàn)簡單倒計時功能的方法,涉及jQuery根據(jù)時間動態(tài)操作頁面元素的相關(guān)技巧,需要的朋友可以參考下2016-07-07
jQuery實現(xiàn)CheckBox全選、全不選功能
這篇文章主要介紹了jQuery實現(xiàn)CheckBox全選、全不選功能，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-01-01
jquery ajax post提交數(shù)據(jù)亂碼
今天發(fā)現(xiàn)在使用jquery ajax.post提交數(shù)據(jù)時會發(fā)現(xiàn)數(shù)據(jù)在ff正常，但在chrome與ie瀏覽器中post過去的數(shù)據(jù)全部是亂碼2013-11-11
在京東商城瀏覽時, 會發(fā)現(xiàn)產(chǎn)品圖片只顯示了一屏, 當(dāng)頁面向下滾動時下面的產(chǎn)品圖片才逐漸加載.2010-06-06
在做項目時遇到一個bug，checkbox全選與反選功能，只能點擊一次，再點就不起作用了，為了解決此問題，我查找了好多資料，下面把具體解決方案整理分享給大家，需要的朋友可以參考下2015-08-08
JQuery實現(xiàn)樣式設(shè)置、追加、移除與切換的方法
這篇文章主要介紹了JQuery實現(xiàn)樣式設(shè)置、追加、移除與切換的方法,涉及jQuery樣式操作的常用技巧,非常簡單實用,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了jQuery過濾選擇器用法,實例分析了:first、:last、:odd、:even等等常用的過濾選擇器的使用技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02
jQuery EasyUI學(xué)習(xí)教程之datagrid點擊列表頭排序
這篇文章主要介紹了jQuery EasyUI學(xué)習(xí)教程之datagrid點擊列表頭排序的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
$.ajax()跟($.post(),$.get())最主要的差別就是 成功回調(diào)后,執(zhí)行success. . $.post(),$.get()就只能簡單的做下傳遞 ,返回. .后續(xù)工作沒法繼續(xù).所以看情況調(diào)用2012-09-09
詳解jQuery向動態(tài)生成的內(nèi)容添加事件響應(yīng)jQuery live()方法
這篇文章主要介紹了jQuery向動態(tài)生成的內(nèi)容添加事件響應(yīng)jQuery live()方法，需要的朋友可以參考下2015-11-11