Ajax不是一種新的編程語(yǔ)言，而是一種用于創(chuàng)建更好更快以及交互性更強(qiáng)的Web應(yīng)用程序的技術(shù)。通過(guò)Ajax，您可以使用 JavaScript的XMLHttpRequest對(duì)象來(lái)直接與服務(wù)器進(jìn)行通信。您可以在不重載頁(yè)面的情況與 Web 服務(wù)器交換數(shù)據(jù)。在本文的例子中，我們將演示當(dāng)用戶向一個(gè)標(biāo)準(zhǔn)的HTML表單中輸入數(shù)據(jù)時(shí)網(wǎng)頁(yè)如何與web服務(wù)器進(jìn)行通信。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>簡(jiǎn)單的Ajax請(qǐng)求</title> <script type="text/javascript"> var xmlHttp; // 創(chuàng)建XMLHttpRequest對(duì)象 function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } // 整合url參數(shù) function createQueryString() { var name = document.getElementById("txtName").value; var sex = document.getElementById("txtSex").value; var birthday = document.getElementById("txtBirthday").value; var queryString = "Name=" + encodeURIComponent(name) + "&Sex=" + encodeURIComponent(sex) + "&Birthday=" + encodeURIComponent(birthday); return queryString; } // 按照Get方式傳遞參數(shù) function doRequestUsingGET() { createXMLHttpRequest(); var queryString = "AjaxServer.ashx?"; queryString = queryString + createQueryString() + "&timeStamp=" + new Date().getTime(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", queryString, true); xmlHttp.send(null); } // 按POST方式傳遞參數(shù) function doRequestUsingPOST() { createXMLHttpRequest(); var url = "AjaxServer.ashx?timeStamp=" + new Date().getTime(); var queryString = createQueryString(); xmlHttp.open("POST", url, true); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;"); xmlHttp.send(queryString); } // 回調(diào)函數(shù) function handleStateChange() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { parseResults(); } } } // 處理服務(wù)器響應(yīng)內(nèi)容 function parseResults() { var responseDiv = document.getElementById("serverResponse"); if (responseDiv.hasChildNodes()) { responseDiv.removeChild(responseDiv.childNodes[0]); } var responseText = document.createTextNode(xmlHttp.responseText); responseDiv.appendChild(responseText); } </script></head><body> <form action="#"> <h2>輸入你的名字,性別,生日：</h2> <table> <tr><td>名字：</td><td><input type="text" id="txtName" /></td></tr> <tr><td>性別：</td><td><input type="text" id="txtSex" /></td></tr> <tr><td>生日：</td><td><input type="text" id="txtBirthday" /></td> </tr> </table> <input type="button" value="用Get方式傳參數(shù)" onclick="doRequestUsingGET();"/> <br /><br /> <input type="button" value="用POST方式傳參數(shù)" onclick="doRequestUsingPOST();"/> </form> <br /> <h3>服務(wù)器響應(yīng)內(nèi)容：</h3> <div id="serverResponse"></div></body></html>
新聞熱點(diǎn)
疑難解答
圖片精選
