ajax入門之創建XHR對象

時間 2021-02-20

標籤 javascript php html java ajax 瀏覽器異步函數 post url 欄目 Ajax 简体版

原文原文鏈接

ajax入門之創建XHR對象

今天幫朋友寫了一個簡單的ajax的demo,發現了一些東西，決定寫一篇文章記錄一下，避免之後挖坑。javascript

建立XMLHttpRequest

一般

function createXHR(){
        if(XMLHttpRequest){
            return new XMLHttpRequest();
        }else{
            return new ActiveXObject('Microsoft.XMLHTTP')
        }
    }

這一段js代碼來源自w3school,用於建立兼容各瀏覽器的XMLHttpRequest對象的含義：php

檢測客戶端是否有XMLHttpRequest，不然使用ActiveXObject

關於XMLHttpRequest對象，IE5是第一個引入XHR對象的瀏覽器，在IE5中，XHR是經過activeX對象實現的.所以在IE中可能遇到三種不一樣版本的XHR對象，MXSML2.XMLHTTP，MXSML2.XMLHttp.3.0和MXSML2.XMLHttp.6.0。html

IE的坑

爲了向咱們偉大的IE瀏覽器「致敬」，咱們必須添加額外的代碼進行建立
如下代碼適用與IE7如下的狀況：java

function createXHR(){
    if(typeof argument.callee.activeXString != 'string'){
        var versions = ['MXSML2.XMLHTTP','MXSML2.XMLHttp.3.0','MXSML2.XMLHttp.6.0'];
        var i len;
        for(i = 0;len=versions.length;i<len;i++){
            try{
                new ActiveXObject(varsions[i]);
                argument.callee.activeXString = varsions[i];
            }catch{
                <!-- 跳過 -->
            }
        }
    }
    return new ActiveXObject(argument.callee.activeXString);
}

完整走一遍

但每每我不會考慮這麼多，能看懂前面的函數也是很不容易了，再讓我寫出來，個人天！當你們和我這麼懶的時候，能夠直接使用第一份代碼，也就是w3school那一套代碼，咱們使用原生的XHR對象進行建立。
固然，咱們這裏也給出完整的代碼。ajax

function createXHR(){
    if(typeof XMLHttpRequest != 'undefined'){
        return new XMLHttpRequest();
    }else if(typeof argument.callee.activeXString != 'string'){
        var versions = ['MXSML2.XMLHTTP','MXSML2.XMLHttp.3.0','MXSML2.XMLHttp.6.0'];
        var i len;
        for(i = 0;len=versions.length;i<len;i++){
            try{
                new ActiveXObject(varsions[i]);
                argument.callee.activeXString = varsions[i];
            }catch{
                <!-- 跳過 -->
            }
        }
        return new ActiveXObject(argument.callee.activeXString);
    }else{
        throw new Error("沒有XHR對象存在");
    }
}

用法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
</head>
<body>
        <form>

        <button onclick="returnText();return false">登錄</button>
    </form>
    <script type="text/javascript">
        function returnText(){
            var xhr = createXHR();
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                        alert(xhr.responseText);
                    }else{
                        alert('獲取失敗'+xhr.status)
                    }
                }
            }
            xhr.open('get','demo.php',true);
            xhr.send(null);

        }
        function createXHR(){
            if(typeof XMLHttpRequest != 'undefined'){
                return new XMLHttpRequest();
            }else{
                return new ActiveXObject('Microsoft.XMLHTTP')
            }
        }
    </script>
</body>
</html>

建立好XHR對象只是第一步，纔是咱們各類操做的開始。瀏覽器