标题：小试Ajax
出处：Felix021
时间：Wed, 17 Sep 2008 18:49:19 +0000
作者：felix021
地址：https://www.felix021.com/blog/read.php?1166

内容：
今天继续看ajax。
以前写过一个ajax的聊天室，但是只能在IE下面运行。
今天写了一个全新的，在Firefox下面也运行正常了。
附上代码(PHP + Ajax)：
点击这里下载文件

做一些笔记:

1. 考虑多浏览器的兼容性，在创建XMLHttpRequest对象的时候要多加处理
一般如下代码就OK了：
    function GetXMLHTTP()
    {
        var xmlHttp=null;
        try{
            try{ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }
            catch(e1){ xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");}
        }catch(e2){ xmlHttp=new XMLHttpRequest;}
        return xmlHttp;
    }

2. 不要直接把onreadystatechange事件绑定到一个匿名函数(Firefox貌似不兼容此方式)
一般使用如下代码：
//可以将以下代码放在一个函数里面
       var handleStateChange = function (){
            if(xml.readyState == 4){ //表示请求结束
                if(xml.status == 200){ //HTTP状态200表示一切正常
                    //do something
                }
                else alert(xml.status); 
            }
        }
        try{
            xml.onreadystatechange = handleStateChange;
            xml.open("GET", url, true);
            xml.send(null);
        }catch(e){alert("Error: " + e);}

3. 在提交post请求的时候用如下代码
try{
    var xml = getXmlHttpRequest();
    var content = document.getElementById("content").value;
    xml.onreadystatechange = handleStateChange;
    xml.open("POST", url, true); // POST请求
    //加上一个http头，表示提交一个POST请求，包含一个表单
    xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
    //使用encodeURIComponent()函数对表单内容进行URL编码，用&连接两个不同的表单元素值
    xml.send("content="+encodeURIComponent(content)+"&name=felix021");
}catch(e){alert("Error:" + e);}

4. 善用try-catch结构，捕捉运行时错误
使用try-catch结构可以捕捉到运行时的错误，不仅可以进行错误处理，而且也方便调试。比如：
try{
    //do something
}catch(e){
   //错误处理
   alert(e); //显示错误信息
}

5. 为每一个异步请求创建一个xmlHttpRequest对象。
这样可以避免多个请求之间的冲突问题，也没有必要创建一个队列。
可以把每个请求封装到一个函数里面，每次调用即可。
具体代码参见前面附件里面index.html中的update和talk函数。

6. encodeURI(String)和encodeURIComponent(String)函数
对URI编码，区别在于encodeURI把String当作一个URI来解析，
而encodeURIComponent把String当作URI中的一个部分来解析。
举个例子，对URI (http://a.com/test.php?a=哈哈)的编码结果为：
encodeURI: http://a.com/test.php?a=%E5%93%88%E5%93%88
encodeURIComponent: http%3A%2F%2Fa.com%2Ftest.php%3Fa%3D%E5%93%88%E5%93%88
所以在send函数里面应该使用encodeURIComponent函数。
对应这两个函数分别有decodeURI和decodeURIComponent这两个函数
另外还有个escape和unescape函数对不是很好使，具体的baidu一下，自己写个脚本测试一下就知道了。

7. setTimeout("code", Interval)和setInterval("code", Interval)函数
这两个函数的作用是在以毫秒为单位的Interval间隔之后运行一段由code指定的javascript代码。
区别在于 setTimeout只运行一次该代码， 而setInterval在每隔一段Interval指定的时间之后运行一次代码，
直到窗口关闭为止。对于setTimeout，要实现重复运行该代码，可以在code里面指定一个函数，函数里面再
运行一次setTimeout，这样可以动态修改函数运行时间；而setInterval的时间间隔是不能修改的。

8. 对于xmlHttpRequest对象取回的responseText，如果要显示在div这类元素内，可能需要对其进行html编码
编码函数如下：
    function htmlspecialchars(str)  
    {  
        var s = "";
        if (str.length == 0) return "";
        for   (var i=0; i<str.length; i++)
        {
            switch (str.substr(i,1))
            {
                case "<": s += "&lt;"; break;
                case ">": s += "&gt;"; break;
                case "&": s += "&amp;"; break;
                case " ":
                    if(str.substr(i + 1, 1) == " "){
                        s += " &nbsp;";
                        i++;
                    } else s += " ";
                    break;
                case "\"": s += "&quot;"; break;
                case "\n": s += "<br/>"; break;
                default: s += str.substr(i,1); break;
            }
        }
        return s;
    }



Generated by Bo-blog 2.1.0