Ajax介紹:
內翻譯常為“阿賈克斯”和阿賈克斯足球隊同音。Web應用的互動如Flickr,Backpack和Google在這方面已經有質的飛躍。這個術語源自描述從基於Web的應用到基於資料的應用的轉換。在基於資料的應用中，使用者需求的資料如連絡人清單，可以從獨立於實際網頁的服務端取得並且可以被動態地寫入網頁中，給緩慢的Web應用體驗著色使之像案頭應用一樣。
Ajax的核心是JavaScript對象XmlHttpRequest。該對象在Internet Explorer 5中首次引入，它是一種支援非同步請求的技術。簡而言之，XmlHttpRequest使您可以使用JavaScript向伺服器提出請求並處理響應，而不阻塞使用者。 HTML代碼:<!DOCTYPE html><html><head><meta charset="utf-8"><script type="text/javascript" src="ajax.js" charset="utf-8"></script></head><body><input type="text" id="url_text" name="text"/><input type="submit" id="ok" value="提交" onclick="ChenkGet();"/> <div width="300px" Heiget="300px" id="hakecc"></div></body></html>
Javascript代碼:
/* by y0umer [60min] Function:createXmlHttpRequestobject returm Xmlobject; */ var XmlHttp; function createXmlHttpRequestObject(){ if(window.ActiveXobject){ // 判斷是否是ie瀏覽器 try { // try開始 xmlhttp = new ActiveXobject("Microsoft.XMLHTTP"); // 使用ActiveX對象建立ajax }catch(e){ xmlHttp = false; } // try end }else{ //Chrome、FireFox等非ie核心 try{ xmlHttp = new XMLHttpRequest(); //視為非ie情況下 }catch(e){ xmlHttp = false; // 其他非主流瀏覽器 } } // 判斷結束,如果建立成功則返回一個DOM對象,如果建立不成功則返回一個false if(xmlHttp) { return xmlHttp; }else{ alert("對象建立失敗,請檢查瀏覽器是否支援XmlHttpRequest!"); } } // 函數體 // createXmlHttpRequestObject(); /**********************************************/ /* ChenkGet 使用AJAX非同步GET請求一個php檔案 */function ChenkGet(){ // 先建立一個對象執行個體 createXmlHttpRequestObject(); // 使用事件對象擷取文字框ID的值 var cont1 = document.getElementById("url_text").value; var url = "test.php?type="+cont1; //待發送URL xmlHttp.onreadystatechange=ajaxok; // 判斷瀏覽器狀態列 (接收玩資料觸發的事件) xmlHttp.open("GET",url,false); // GET向伺服器端發送資料 xmlHttp.send(null); } // 開始提交資料 // 回呼函數 用於接收伺服器返回過來的資料 function ajaxok() { if(xmlHttp.readyState == 4 && xmlHttp.status==200) { // 表示資料已接收完成 document.getElementById("hakecc").innerHTML = xmlHttp.responseText; } }
PHP代碼：
<?phpheader('Conent-type:type/html;charset=gb2312');$val=$_GET['type'];echo "value:".$val;?>
運行：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
