Onelong

分享知识,与你一起进步......
RSS icon Home icon
  • JS判断浏览器类型的基础

    post by onelong / 2009-10-6 20:27 Tuesday [javascript]

            在网站前端开发中,浏览器兼容性问题本已让我们手忙脚乱,Chrome的出世不知道又要给我们添多少乱子。浏览器兼容性是前端开发框架要解决的第一个问题,要解决兼容性问题就得首先准确判断出浏览器的类型及其版本。 JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本。JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来分辨,另一种是通过分析浏览器的userAgent属性来判断的。在许多情况下,值判断出浏览器类型之后,还需判断浏览器版本才能处理兼容性问题,而判断浏览器的版本一般只能通过分析浏览器的userAgent才能知道。 我们先来分析一下各种浏览器的特征及其userAgent。

           IE
         只有IE支持创建ActiveX控件,因此她有一个其他浏览器没有的东西,就是ActiveXObject函数。只要判断window对象存在 ActiveXObject函数,就可以明确判断出当前浏览器是IE。而IE各个版本典型的userAgent如下:

    阅读全文>>

  • js实现让文本框只输入英文字母

    post by onelong / 2009-10-6 19:31 Tuesday [javascript]

    <html>
    <body>
    <input type="text" onchange="onlyEng()" value=""  id="txt"/>
    </body>
    <script language="javascript">
    function onlyEng(){
    var txt=document.getElementById("txt").value;
    txt=txt.replace(/[^a-zA-Z]/g,'');
    document.getElementById("txt").value=txt;
    }
    </script>
    </html>
    txt=txt.replace(/[^a-zA-Z]/g,'');//这句就是把非英文字母的替代为空!
    如果只能输入数字则txt=txt.replace(/[^\d]/g,'');或者txt=txt.replace(/[^0-9]/g,'');
    如果只能输入字母和数字则txt=txt.replace(/[^0-9a-zA-Z]/g,'');

    想知道更多! http://www.w3school.com.cn/js/js_obj_regexp.asp

  • js表单验证

    post by onelong / 2009-10-6 18:51 Tuesday [javascript]

    <script language="javascript">
    <!--
    function CheckForm(){
    if (document.form.name.value.length == 0) //如果name的值为空
    {
    alert("请输入您姓名!");//弹出一个警告窗口 信息为 “请输入您姓名!”
    document.form.name.focus();//然后输入焦点或者光标定位到这个为空的文本框里。
    return false;//返回一个false
    }
    return true;//如果if不成立 那么就 返回一个true
    }
    -->
    </script>

    调用该函数 onclick="return CheckForm()"

  • 实现文本框和文本域的自动全选

    post by onelong / 2009-10-6 18:47 Tuesday [javascript]

    小小例子:
    <input type="text" onfocus="select()" value="搜索" />
    select()是js的内置函数

  • js限制文本框或文本域的文字长度

    post by onelong / 2009-10-6 18:33 Tuesday [javascript]

    看看下面的例子
    <html>
    <head>
    </head>
    <body>
    <input type="text" maxlength="10" />//maxlength是input表签的属性,而文本域则没有此属性!
    <textarea id="txt" onchange="check()"></textarea>
    </body>
    <script language="javascript">
    function check(){
    var len=10;
    var txt=document.getElementById("txt").value;
    if(txt.length>len){
     txt=txt.substring(0,len);
     document.getElementById("txt").value=txt;
     }
    }
    </script>
    </html>
    无论是文本框还是文本域都可以js来实现!

  • JS的图片预加载效果原理

    post by onelong / 2009-10-6 4:15 Tuesday [javascript]

    <img id="myImage" src="small_144.jpg" width="640" />//首先显示一张很小的图片 
        var img = new Image();
        img.src = "big_640_480.jpg";
        img.onload = function() {
        document.myImage.src = this.src;//大的图片加载完后,替代原来的那张图片
       }

  • 在IE中如何禁用左,右键

    post by onelong / 2009-10-6 2:45 Tuesday [javascript]

    1.document.oncontextmenu=function(){return false;} //禁用右键
    2.event.button==2
       键值的说明:2表示是右键,1表示左键
    下面是个小例子
    <SCRIPT language=javascript>  
    function click() {  
    // 2表示是右键,1表示左键  
    if (event.button==2) {
    alert("请勿复制!");
    }  
    }  
    document.onmousedown=click  
    </SCRIPT>

  • js禁止复制

    post by onelong / 2009-10-6 2:42 Tuesday [javascript]

    这是个简单的例子
    <html>  
    <script type="text/javascript">
    document.oncontextmenu=function(e){return false;}  
    </script>   
    <style>  
    body {   
    -moz-user-select:none; //firefox独有的属性 
    }     
    </style>   
    <body onselectstart="return false">最早的恐龙 </body>   
    </html> 

  • json在php和ajax中应用

    post by onelong / 2009-10-6 1:41 Tuesday [xml+json]

    这是一个很简单的用法
    <?php 
    $arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
    echo json_encode($arr);
    ?>
    这样做的好处是,直接把数组写成一个可以被js直接使用的对象
    到js可以这样使用:
    var arr = $output;
    alert(arr.a);
    注意:encode必须是utf8的.
    decode就是解码,把json转成object||array.
    zend_json中还有一个json方面的扩展.zend_json::fromXml().将xml解析成json.
     下面是一个ajax的json简单应用
    var req = new XMLHttpRequest();
    req.open("GET", "http://www.ways2u.com", true);
    req.onreadystatechange = myHandler;
    req.send(null); 

    function myHandler() {
       if (req.readyState == 4 /*complete*/) {
           var addrField = document.getElementById('addr'); 
           var card = eval('(' + req.responseText + ')'); //这是将字符转换为表达式
           addrField.value = card.addresses[0].value;
       }
    }

  • ajax实战中的ajax类

    post by onelong / 2009-10-6 1:26 Tuesday [ajax]

    var net=new Object();
    net.READY_STATE_UNINITIALIZED=0;
    net.READY_STATE_LOADING=1;
    net.READY_STATE_LOADED=2;
    net.READY_STATE_INTERACTIVE=3;
    net.READY_STATE_COMPLETE=4;
    net.ContentLoader=function(url,onload,onerror,method,params,contentType){
      this.req=null;
      this.onload=onload;
      this.onerror=(onerror) ? onerror : this.defaultError;
      this.loadXMLDoc(url,method,params,contentType);
    }

    net.ContentLoader.prototype.loadXMLDoc=function(url,method,params,contentType){
      if (!method){
        method="GET";
      }
      if (!contentType && method=="POST"){
        contentType='application/x-www-form-urlencoded';
      }
      if (window.XMLHttpRequest){
        this.req=new XMLHttpRequest();
      } else if (window.ActiveXObject){
        this.req=new ActiveXObject("Microsoft.XMLHTTP");
      }
      if (this.req){
        try{
          var loader=this;
          this.req.onreadystatechange=function(){
            net.ContentLoader.onReadyState.call(loader);
          }
          this.req.open(method,url,true);
          if (contentType){
            this.req.setRequestHeader('Content-Type', contentType);
          }
          this.req.send(params);
        }catch (err){
          this.onerror.call(this);
        }
      }
    }
    net.ContentLoader.onReadyState=function(){
      var req=this.req;
      var ready=req.readyState;
      var httpStatus=req.status;
      if (ready==net.READY_STATE_COMPLETE){
        if (httpStatus==200 || httpStatus==0){
          this.onload.call(this);
        }else{
          this.onerror.call(this);
        }
      }
    }

    阅读全文>>

    附件下载:
    ajax.rar 823字节

  • XMLHttpRequest与服务器通信

    post by onelong / 2009-10-6 1:20 Tuesday [ajax]

    XMLHttpRequest与服务器通信有两种方式:同步方式和异步方式。同步方式的调用非常简单,但是仅仅适用于数据量非常少的场合。如果数据量很大,会造成用户界面很长一段时间的停顿,这当然会损害Web应用的可用性。为了不影响可用性,Ajax应用中一般都使用异步方式来与服务器通信。用来设置同步和异步方式的是XMLHttpRequest对象的open方法的第3个参数,这个参数为true代表异步,为false代表同步。例如:
      xmlhttp.open("GET", "http://www.ways2u.com", true);
      如果是使用异步方式来进行通信,还需要设置一个回调函数,当数据返回时系统会调用这个回调函数。通过为XMLHttpRequest对象的onreadystatechange属性赋值来设置一个回调函数:
      xmlhttp.onreadystatechange=function() {...};
      此外,为了很好地支持中文和国际化,字符集一般都使用UTF-8,这可以通过调用XMLHttpRequest对象上的setRequestHeader方法来设置:
      xmlhttp.setRequestHeader("Content-Type","text/xml;charset=utf-8");
      如果服务器返回的是XML格式的数据,并且正确设置了HTTP头信息中的Content-Type,例如在Java中是这样设置的:
      resp.setContentType("text/xml;charset=utf-8");
      那么客户端的回调函数可以通过XMLHttpRequest对象的responseXML属性中获得XML DOM树形式的返回数据。
      XMLHttpRequest其实是用语不当,它其实可以使用任何纯文本格式与服务器通信,而不限于XML格式。注意上面客户和服务器两端的Content-Type设置需要对应起来,如果它们都改成text/plain,那就是使用纯文本来进行通信,在回调函数中就需要访问XMLHttpRequest对象的responseText属性来获得纯文本形式的返回数据。
      当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态:一直等待直到请求被处理;然后,它才接收一个响应。这样以来,脚本才正确响应各种状态-XMLHttpRequest对象暴露一个描述对象的当前状态的readyState属性:
      0 描述一种"未初始化"状态;此时,已经创建一个XMLHttpRequest对象,但是还没有初始化。
      1 描述一种"发送"状态;此时,代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
      2 描述一种"发送"状态;此时,已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应。
      3 描述一种"正在接收"状态;此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。
      4 描述一种"已加载"状态;此时,响应已经被完全接收。
      System.xml.xmlDocument
      它的作用是解析xml文档,将其转换为对象,使你可以在程序中对其操作
      XmlDocument 成员请参见: http://msdn2.microsoft.com/zh-cn/library/system.xml.xmldocument_members(VS.80).aspx
      XMLHttpRequest对象的属性和事件
      XMLHttpRequest对象暴露各种属性、方法和事件以便于脚本处理和控制HTTP请求与响应。下面,我们将对此展开详细的讨论。
      readyState属性
      当XMLHttpRequest对象把一个HTTP请求发送到服务器时将经历若干种状态:一直等待直到请求被处理;然后,它才接收一个响应。这样以来,脚本才正确响应各种状态-XMLHttpRequest对象暴露一个描述对象的当前状态的readyState属性,如表格1所示。
      表格1.XMLHttpRequest对象的ReadyState属性值列表。
      ReadyState取值 描述
      0 描述一种"未初始化"状态;此时,已经创建一个XMLHttpRequest对象,但是还没有初始化。
      1 描述一种"发送"状态;此时,代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
      2 描述一种"发送"状态;此时,已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应。
      3 描述一种"正在接收"状态;此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。
      4 描述一种"已加载"状态;此时,响应已经被完全接收。
      onreadystatechange事件
      无论readyState值何时发生改变,XMLHttpRequest对象都会激发一个readystatechange事件。其中,onreadystatechange属性接收一个EventListener值-向该方法指示无论readyState值何时发生改变,该对象都将激活。
      responseText属性
      这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时,responseText包含一个空字符串。当readyState值为3(正在接收)时,响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时,该responseText包含完整的响应信息。
      responseXML属性
      此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应;此时,Content-Type头部指定MIME(媒体)类型为text/xml,application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一,那么responseXML的值为null。无论何时,只要readyState值不为4,那么该responseXML的值也为null。
      其实,这个responseXML属性值是一个文档接口类型的对象,用来描述被分析的文档。如果文档不能被分析(例如,如果文档不是良构的或不支持文档相应的字符编码),那么responseXML的值将为null。
      status属性
      这个status属性描述了HTTP状态代码,而且其类型为short。而且,仅当readyState值为3(正在接收中)或4(已加载)时,这个status属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。
      statusText属性
      这个statusText属性描述了HTTP状态代码文本;并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。

  • Discuz的ajax兼容处理

    post by onelong / 2009-10-6 1:15 Tuesday [ajax]

     function  createXMLHttpRequest () {
      var request = false;
      if(window.XMLHttpRequest) {
       request = new XMLHttpRequest();
       if(request.overrideMimeType) {
        request.overrideMimeType('text/xml');
       }
      } else if(window.ActiveXObject) {
       var versions = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.7.0', 'Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
       for(var i=0; i<versions.length; i++) {
        try {
         request = new ActiveXObject(versions[i]);
         if(request) {
          return request;
         }
        } catch(e) {}
       }
      }
      return request;
     }
     创建异步对象的函数!