ajax入門實例
當前位置:點晴教程→知識管理交流
→『 技術文檔交流 』
Ajax 由 HTML、JavaScript™ 技術、DHTML 和 DOM 組成,這一杰出的方法可以將笨拙的 Web 界面轉化成交互性的 Ajax 應用程序。對于Ajax,最核心的一個對象是XMLHttpRequest,所有的Ajax操作都離不開對這個對象的操作。
首先我們來了解怎么在javascript中創(chuàng)建這個對象: var xmlHttp = new XMLHttpRequest(); 這行簡單的代碼在 Mozilla、Firefox、Safari、Opera 以及基本上所有以任何形式或方式支持 Ajax 的非 Microsoft 瀏覽器中,創(chuàng)建了 try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");//針對較新的瀏覽器 } catch (err) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//針對較老的瀏覽器 } catch (err2) { xmlHttp = false; } } 即使這樣,我們也無法預料有些瀏覽器可能無法創(chuàng)建這個對象,所以在創(chuàng)建不成功的情況下,我們還要加上一句: if (!xmlHttp){ alert("無法創(chuàng)建 XMLHttpRequest 對象!"); } 結合起來就是: var xmlHttp = false; try { xmlHttp = new XMLHttpRequest(); } catch (trymicrosoft) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { xmlHttp = false; } } } if (!xmlHttp){ alert("無法創(chuàng)建 XMLHttpRequest 對象!"); } 然后,讓我們建立一個函數getInfo(),打開異步請求: function getInfo() { var num = document.getElementById("num").value;//獲得表單的數據 var url = "/ajax/1.php?n=" + escape(num); xmlHttp.open("GET", url, true);//這里的true代表是異步請求 } 一旦用 xmlHttp.send(null); 在發(fā)送了數據之后,我們需要用回調方法來獲得服務器的狀態(tài),所以就用到了 xmlHttp.onreadystatechange = updatePage; 此語句已經要放在send()語句前面,這樣才會有效,后面的updatePage是處理返回信息的一個函數。完整的getInfo()如下: function getInfo() { var num = document.getElementById("num").value;//獲得表單的數據 var url = "/ajax/1.php?n=" + escape(num); xmlHttp.open("GET", url, true);//這里的true代表是異步請求 xmlHttp.onreadystatechange = updatePage; xmlHttp.send(null); } 我們還需要在html里面來觸發(fā)這個函數: <input name="num" id="num" onblur="getInfo()" type="text" /> 下面我們需要來編寫updatePage()這個函數: function updatePage(){ if (xmlhttp.readyState == 4) { var response = xmlhttp.responseText; document.getElementById("city").value = response; } } 上面這段代碼里面的readyState是服務器返回的一個狀態(tài),4這個狀態(tài)表示請求已經發(fā)送,并處理完畢。responseText是獲得服務器返回的信息,然后通過javascript賦給ID為city的表單。 到此,一個簡單的Ajax程序就完成了,完整的javascript代碼如下: var xmlHttp = false; try { xmlHttp = new XMLHttpRequest(); } catch (trymicrosoft) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { xmlHttp = false; } } } if (!xmlHttp){ alert("無法創(chuàng)建 XMLHttpRequest 對象!"); } function getInfo() { var num = document.getElementById("num").value;//獲得表單的數據 var url = "/ajax/1.php?n=" + escape(num); xmlHttp.open("GET", url, true);//這里的true代表是異步請求 xmlHttp.onreadystatechange = updatePage; xmlHttp.send(null); } function updatePage(){ if (xmlhttp.readyState == 4) { var response = xmlhttp.responseText; document.getElementById("city").value = response; } } 該文章在 2010/8/18 14:22:28 編輯過 |
關鍵字查詢
相關文章
正在查詢... |