ajax學習

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>無標題文檔</title>
<!--<script src="jquery.js"></script>-->
<script>
//$(function(){})    //阻塞 -> 同步

//非阻塞 - 異步
/*setTimeout(function() {
    alert(1);
}, 2000);

alert(2);*/

window.onload = function() {
    
    var oBtn = document.getElementById('btn');
    
    
    oBtn.onclick = function() {
        
        //打開瀏覽器
        /*
            1.創建一個ajax對象
                ie6以下new ActiveXObject('Microsoft.XMLHTTP')
        */
        var xhr = null;
        /*if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }*/
        try {
            xhr = new XMLHttpRequest();
        } catch (e) {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }
        
        //alert( xhr.readyState );
        //在地址欄輸入地址
        /*
            open方法
            參數
                1.打開方式
                2.地址
                3.是否異步
                    異步:非阻塞 前面的代碼不會影響後面代碼的執行
                    同步:阻塞 前面的代碼會影響後面代碼的執行
        */
        xhr.open('get','1.txt',true);
        //提交 發送請求
        //alert(1);
        xhr.send();
        //alert( xhr.readyState );
        
        //alert(1)
        
        //alert( xhr.responseText );
        
        
        //等待服務器返回內容
        /*
            readyState : ajax工作狀態
            responseText : ajax請求返回的內容就被存放到這個屬性下面
            on readystate change : 當readyState改變的時候觸發
            status : 服務器狀態,http狀態碼
        */
        xhr.onreadystatechange = function() {
            
            if ( xhr.readyState == 4 ) {
                if ( xhr.status == 200 ) {
                    alert( xhr.responseText );
                } else {
                    alert('出錯了,Err:' + xhr.status);
                }
            }
            
        }
        
    }
}
</script>
</head>

<body>
    <input type="button" value="按鈕" id="btn" />
</body>

</html>

表單:數據的提交
        action : 數據提交的地址,默認是當前頁面
        method : 數據提交的方式,默認是get方式
            1.get
                把數據名稱和數據值用=連接,如果有多個的話,那麼他會把多個數據組合用&進行連接,然後把數據放到url?後面傳到指定頁面
                url長度限制的原因,我們不要通過get方式傳遞過多的數據
            2.post
                理論上無限制
        enctype : 提交的數據格式,默認application/x-www-form-urlencoded
    <form action="1.post.php" method="post">
        <input type="text" name="username" />
        <input type="text" name="age" />
        <input type="submit" value="提交" />
    </form>

發佈了7 篇原創文章 · 獲贊 4 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章