ajax关于主流中的异类:应对Opera

Posted Sarah119

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ajax关于主流中的异类:应对Opera相关的知识,希望对你有一定的参考价值。

修改示例以支持Opera

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div>
            <button>Apples</button>
            <button>Cherries</button>
            <button>Bananas</button>
        </div>
        <div id="target">
            press a button
        </div>
        <script type="text/javascript">
            var buttons=document.getElementsByTagName("button")
            for(var i=0;i<buttons.length;i++){
                buttons[i].onclick=handleButtonPress;
            }
            var httpRequest;
            function handleButtonPress(e){
                httpRequest=new XMLHttpRequest();
                httpRequest.onreadystatechange=handleResponse;
                httpRequest.open("GET",e.target.innerHTML+".html")
                httpRequest.send()
            }
            function handleResponse(){
                if(httpRequest.readyState==4&&httpRequest.status==200){
                    document.getElementById("target").innerHTML=httpRequest.responseText;
                }
            }
        </script>
    </body>
</html>

    第一个问题是Opera在触发readystatechange事件时不会生成一个Event对象。这就意味着必须把XMLHttpRequest对象指派给一个全局变量,这样才能在以后引用它。我定义一个名为的var,随后在handleButtonPress函数创建对象以及handleResponse函数处理已经完成的请求时调用了它。看上去可能不像是什么大问题,但如果用户在请求处理过程中按下按钮,全局变量就会被指派给一个新的XMLHttpRequest对象,你就无法再与原来那个请求交互了。
    第二个问题是Opera没有在XMLHttpRequest对象上定义就绪状态常量,这就意味着你必须用之前表格中展示的数值来比对readyState属性的值。必须得检测4个值,而不是XMLHttpRequest.DONE。


以上是关于ajax关于主流中的异类:应对Opera的主要内容,如果未能解决你的问题,请参考以下文章

十条jQuery代码片段助力Web开发效率提升

Opera视频出海非洲面临的技术挑战及应对

关于AJAX初始化XMLHttpRequest对象的问题..

跨域 Ajax 请求在 Opera 和 IE9 中不起作用?

rem的使用方法

ajax在js中的运用