台灣最大程式設計社群網站
線上人數
623
 
會員總數:244808
討論主題:188842
歡迎您免費加入會員
討論區列表 >> AJAX / JSON / jQuery >> 利用Event來達到AJAX聊天的一個問題
[]  
[我要回覆]
1
回應主題 加入我的關注話題 檢舉此篇討論 將提問者加入個人黑名單
利用Event來達到AJAX聊天的一個問題
價值 : 50 QP  點閱數:1963 回應數:10

樓主

雷牙
初學者
157 23
152 59
發送站內信

首先是我使用Ajax技術,我用的是Javascript的
document.createElement('script')
裡面設定好相關的東西之後傳回給客戶端。
和一般的XMLHttpRequest不一樣

請使用FireFox開啟這個網址
http://gai00.no-ip.org/mastone_v1.02/chat/
(因為是ADSL的網路,所以應該很慢。)

我的問題就在於第二個欄位的輸入,原本是想用Enter來送出訊息,我的處理方式是
userinput.addEventListener('keyup',function(e)
{
if(username.value != '' && userinput.value != '')
{
if(e.keyCode == 13)
{
var chat = document.createElement('a');
chat.innerHTML = username.value + ' : ' + userinput.value + '<br />';
document.body.insertBefore(chat,userline);
userinput.value = '';
userinput.focus();
}
}
},false);
PS:username就是第一個欄位,用來存放訪客名稱,userinput是第二個欄位,用來存放聊天內容。

可惜的是...中文輸入的新注音會在挑字的時候按下Enter時感應到,變成打到一半就送出的情況。
所以我想問看看有沒有解決的方法...
(如果用Form,頁面都會刷新。)

我知道Form有個submit事件,但是我給予事件的同時,他頁面更新的事實還是存在,無法取消。

搜尋相關Tags的文章: [ Ajax ] , [ DOM ] , [ 輸入 ] ,
本篇文章發表於2006-07-27 16:07
別忘捐VP感謝幫助你的人 新手會員瞧一瞧
1樓
回應

AirCanada
捐贈 VP 給 AirCanada 檢舉此回應
hi
重新整理就全部不見了????
本篇文章回覆於2006-07-27 16:24
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
2樓
作者回應

雷牙
檢舉此回應
上面的標題有寫,還沒連上資料庫 =x=|||

我打算等這個問題解決以後再連線
本篇文章回覆於2006-07-27 17:04
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
3樓
回應

chenyy
檢舉此回應
改成

應試試.
本篇文章回覆於2006-07-27 18:15
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
4樓
不錯的參考

一個頭兩個大
檢舉此回應
submit別用讀enter keycode,用form onsubmit:

<div id=userline></div>
<form onsubmit="gg();return false;">
<input type=hidden id=username value='guest'>
<input id=userinput name=userinput><input type=submit>
</form>

<script>
userinput=document.getElementById('userinput');
username=document.getElementById('username');
userline=document.getElementById('userline');

function gg()
//userinput.addEventListener('keyup',function(e)
{
if(username.value != '' && userinput.value != '')
{
//if(e.keyCode == 13) {
var chat = document.createElement('a');
chat.innerHTML = username.value + ' : ' + userinput.value + '<br />';
document.body.insertBefore(chat,userline);
userinput.value = '';
userinput.focus();
//}
}
}
//,false);
</script>
本篇文章回覆於2006-07-27 18:17
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
5樓
用document.createElement('script')來做ajax真是個好方法!
能避免掉一些問題!

安全性:
不會被某些XP的IE預設為擋掉
不須要用XMLHTTP也不須用FRAME,故能讀不同網域的資料

可用性:
不須要XMLHTTP,中文網頁編碼也不須要是utf-8或再寫script來轉編碼,故連POCKET IE也都能用
本篇文章回覆於2006-07-27 18:30
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
6樓
作者回應

雷牙
檢舉此回應
頁面還是會更新喔...

所以好像沒辦法這樣用submit...

程式碼我改成這樣
userform.addEventListener('submit',function()
{
if(username.value != '' && userinput.value != '')
{
var chat = document.createElement('a');
chat.innerHTML = username.value + ' : ' + userinput.value + '<br />';
document.body.insertBefore(chat,userform);
userinput.value = '';
userinput.focus();
}
return false;
},false);

----------------------------------------

To 一個頭兩個大:
這裡有你要的相關資料喔~(英)
http://www.phpit.net/article/ajax-php-without-xmlhttprequest
目前我知道的缺點是 不能使用POST
一個出乎意料的好處是...不像XMLHttpRequest沒有任何回應...
因為document.createElement('script')是在原本的HTML增加物件,
所以狀態會顯示。
本篇文章回覆於2006-07-27 20:29
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
7樓
最有價值解答

一個頭兩個大
檢舉此回應
return false要分開在onsubmit裡宣告才有效,在object.addEventListener裡宣告會無效:

<div id=userline></div>
<form id=userform>
<input type=hidden id=username value='guest'>
<input id=userinput name=userinput><input type=submit>
</form>

<script>
userinput=document.getElementById('userinput');
username=document.getElementById('username');
userline=document.getElementById('userline');
userform=document.getElementById('userform');
userform.onsubmit=function() {return false;} //在此onsubmit中宣告return false才能避免頁面更新
userform.addEventListener('submit',function() //在此addEventListener宣告return false無法避免頁面更新
{
if(username.value != '' && userinput.value != '')
{
var chat = document.createElement('a');
chat.innerHTML = username.value + ' : ' + userinput.value + '<br />';
document.body.insertBefore(chat,userform);
userinput.value = '';
userinput.focus();
}
//return false;
},false);
</script>
本篇文章回覆於2006-07-27 21:07
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
8樓
作者回應

雷牙
檢舉此回應
嗯...原來如此...

不過onsubmit方法為什麼不能在submit事件裡面使用勒...?
本篇文章回覆於2006-07-27 21:34
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
9樓
個人由結果和名字來推想:
addEventListener
聲明它只是旁聽角色,沒權限回傳值給event.
本篇文章回覆於2006-07-27 22:58
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
10樓
作者回應

雷牙
檢舉此回應
好的 謝謝各位了,接下來研究的部分是線上人數
(密語的部分需要增設一些東西 目前先不做)

聊天室已經連上資料庫了,預設顯示15條,可以在下面輸入要出現的訊息數,用以回顧以前的訊息。

目前設定的頁面更新時間是5秒。

這個討論串就到這邊結束吧,謝謝各位了。

(好像會有一些問題,等我週一再解決吧。)
本篇文章回覆於2006-07-27 23:53
== 簽名檔 ==
--未登入的會員無法查看對方簽名檔--
   
1

回覆
如要回應,請先登入.