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代碼：
<?php header('Conent-type:type/html;charset=gb2312'); $val=$_GET['type']; echo "value:".$val; ?>
運行截圖：
