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