1. 程式人生 > >ajax起步 (二)

ajax起步 (二)

ajax 需要 target itl tel ctype 第一步 set pre

Ajax的關鍵在於XMLHttpRequest對象,如下基本用法:

<!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;
            }
            function handleButtonPress(e){
                var httpRequest=new XMLHttpRequest();
                httpRequest.onreadystatechange=handleResponse;
                httpRequest.open("GET",e.target.innehttpRequest=new XMLHttpRequest();rHTML+".html")
                httpRequest.send()
            }
            function handleResponse(e){
                if(e.target.readyState==XMLHttpRequest.DONE&&e.target.status==200){
                    document.getElementById("target").innerHTML=e.target.responseText;
                }
            }
        </script>
    </body>
</html>

第一步是創建一個新的XMLHttpRequest對象。與之前在DOM中見過的大多數對象不同,你並非通過瀏覽器定義的某個全局變量來訪問這類對象,而是使用關鍵詞new如:var httpRequest=new XMLHttpRequest();
下一步是給readystatechange事件設置一個事件處理器。這個事件會在請求過程中被多次觸發,向你提供事情的進展情況。將onreadystatechange屬性的值設為handleResponse;httpRequest.onreadystatechange=handleResponse;可以告訴XMLHttpRequest對象你想要做什麽,使用open方法來指定HTTP方法(在這裏是GET)和需要請求的URL:httpRequest.open("GET",e.target.innerHTML+".html")註:

ajax起步 (二)