創建XHR發送請求
Ø 如下:
<script type="text/javascript"> var xmlHttp; //創建一個XMLHttpRequest對象 function createXMLHttpRequest() { // For Internet Explorer 5.5, 6, 7 if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } // For Mozilla, Firefox, Safari, Netscape else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } </script> |
AJAX發送請求
Ø 如下:
function startRequest() { createXMLHttpRequest(); //注冊回調事件處理器 xmlHttp.onreadystatechange = handleStateChange; //使用Open()方法初始化XMLHttpRequest對象-指定HTTP方法 //和要使用的服務器URL xmlHttp.open("GET", "innerHTML.xml", true); //send()方法發送該請求 xmlHttp.send(null); } |
應用GET POST發送請求
Ø 方法如下:
方法名 |
描述 |
getElementById(id) (document) |
獲取有指定唯一ID屬性值文檔中的元素 |
getElementsByTagName(name) |
返回當前元素中有指定標記名的子元素的數組 |
hasChildNodes() |
返回一個布爾值,指示元素是否有子元素 |
getAttribute(name) |
返回元素的屬性值,屬性由name指定 |
處理服務器晌應
XMLHttpRequest 提供了兩個可以用來訪問服務器響應的屬性.
Ø responseText :將響應提供為一個串。
Ø responseXML:將響應提供為一個XML 對象。
使用innerHTML 屬性創建動態內容
Ø responseText + innerHtml,
服務器 "生產"或生成HTML 內容,
瀏覽器使用 innerHTML來"消費"或處理。
DEMO responseText + innerHtml
Ø innerHTM.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Using responseText with innerHTML</title> <META http-equiv=Content-Type content="text/html; charset=GBK"> <script type="text/javascript"> var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function startRequest() { createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", "innerHTML.txt", true); xmlHttp.send(null); } function handleStateChange() { if(xmlHttp.readyState == 4) { if(xmlHttp.status == 200) { document.getElementById("results").innerHTML = xmlHttp.responseText; } } } </script> </head> <body> <form action="#"> please content:<input type="button" value="Search for Today’s Activities" onclick="startRequest();" /> <span id="results"></span> </form> </body> </html> |
Ø innerHTML.txt
請輸入內容!!! |
Ø 輸出結果:
作者:周大慶(zhoudaqing)
網址:http://www.aygfsteel.com/yifeng
>>>轉載請注明出處!<<<