用了rails后,好久沒有用xmlHttpRequest對象了,因?yàn)閞ails把xmlHttpRequest給封裝了,rails自帶了很多ajax方法,今天用了下xmlhttprequest,還真遇到不少麻煩
測試通過:
opera 9.6 + IE 6.0 + FF 3 + chrome 2
html:
<span id="valstatus"></span>
<td><input name="loginname" type="text" id="ctl00_main_content_txtLogin" class="textbox" onfocus="checkLogin(this);" onkeyup="checkLogin(this);" style="width:120px;" /></td>
javascript:
function createXmlHttpRequest(){ //創(chuàng)建對象
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e2){
xmlHttp = false;
}
}
if(!xmlHttp && typeof XMLHttpRequest != "undefined")
{
xmlHttp = new XMLHttpRequest();
}
}
function checkLogin(node){ // html中觸發(fā)的js函數(shù)
var loginname = document.getElementById('ctl00_main_content_txtLogin').value;
createXmlHttpRequest();
xmlHttp.open("Get","/home/response_validate?login="+loginname+"&ts="+new Date().toString(),true);
xmlHttp.send(null);
xmlHttp.onreadystatechange = processor; //注意這里processor不能有括號
}
function processor(){ //回調(diào)函數(shù)
if(xmlHttp.readyState == 4 || xmlHttp.readyState == 'complete'){ //注意S要大寫
if (xmlHttp.status == 200){
var responsetext = xmlHttp.responseText;
if((responsetext.toString()) == "true"){
loginError = document.getElementById("valstatus").innerHTML = '該登錄名已經(jīng)被使用';
}else{
alert("測試");
}
}
}
}服務(wù)器端:
def response_validate
@login_name = params[:login]
@value = true
render :partial=>'response_validate'
endpartial:
總結(jié):
1,rails中服務(wù)器返回text數(shù)據(jù),通過render的方式,不想java中是通過 out.println 返回的
2,xmlHttp.onreadystatechange = processor;這里的processor后不能有(),不知道為什么,不然只能返回到1
3,readyState 的s必須大寫,不然在opera和ff中會(huì)有bug的
4,數(shù)據(jù)改變?yōu)閟tring,js是通過toString()方法,例如 responsetext.toString()
5,為了防止緩存問題可以再發(fā)送請求的時(shí)候加個(gè)隨機(jī)的數(shù)據(jù),例如上面的 xmlHttp.open("Get","/home/response_validate?login="+loginname+"&ts="+new Date().toString(),true);
ref:
http://www.cnblogs.com/chy710/archive/2007/04/15/713868.html
http://bbs.blueidea.com/thread-2764862-1-1.html
http://topic.csdn.net/u/20081007/08/d48c3061-760f-4831-9187-540b0be5eb31.html
http://www.tctl.com.cn/accp/1472/1473/50006.html
posted on 2009-05-08 18:54
fl1429 閱讀(836)
評論(0) 編輯 收藏 所屬分類:
Ajax