ajax起步 (二)
阿新 • • 發佈:2018-01-01
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起步 (二)