随笔-167  评论-65  文章-0  trackbacks-0

用了rails后,好久没有用xmlHttpRequest对象了,因为rails把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(){ //创建对象
    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中触发的js函数
    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(){   //回调函数
    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 = '该登录名已经被使用';   
          
        }else{
         alert("测试");
        }
      }
    }
  }

服务器端:

  def response_validate
    @login_name = params[:login]    
    @value = true
   render :partial=>'response_validate'
  end

partial:

<%= @value %>

总结:

1,rails中服务器返回text数据,通过render的方式,不想java中是通过 out.println 返回的

2,xmlHttp.onreadystatechange = processor;这里的processor后不能有(),不知道为什么,不然只能返回到1

3,readyState 的s必须大写,不然在opera和ff中会有bug的

4,数据改变为string,js是通过toString()方法,例如 responsetext.toString()

5,为了防止缓存问题可以再发送请求的时候加个随机的数据,例如上面的 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



write by feng
posted on 2009-05-08 18:54 fl1429 阅读(746) 评论(0)  编辑  收藏 所属分类: Ajax

只有注册用户登录后才能发表评论。


网站导航:
 
已访问数:
free counters