Ajax通過GET方式與PHP進行交互
來源：程序員人生 發(fā)布時間：2013-11-12 21:28:52 閱讀次數(shù)：3153次
Ajax介紹:
內(nèi)翻譯常為“阿賈克斯”和阿賈克斯足球隊同音。Web應(yīng)用的交互如Flickr,Backpack和Google在這方面已經(jīng)有質(zhì)的飛躍。這個術(shù)語源自描述從基于Web的應(yīng)用到基于數(shù)據(jù)的應(yīng)用的轉(zhuǎn)換。在基于數(shù)據(jù)的應(yīng)用中，用戶需求的數(shù)據(jù)如聯(lián)系人列表，可以從獨立于實際網(wǎng)頁的服務(wù)端取得并且可以被動態(tài)地寫入網(wǎng)頁中，給緩慢的Web應(yīng)用體驗著色使之像桌面應(yīng)用一樣。
Ajax的核心是JavaScript對象XmlHttpRequest。該對象在Internet Explorer 5中首次引入，它是一種支持異步請求的技術(shù)。簡而言之，XmlHttpRequest使您可以使用JavaScript向服務(wù)器提出請求并處理響應(yīng)，而不阻塞用戶。
<!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對象創(chuàng)建ajax
}catch(e){
xmlHttp = false;
} // try end
}else{ //Chrome、FireFox等非ie內(nèi)核
try{
xmlHttp = new XMLHttpRequest(); //視為非ie情況下
}catch(e){
xmlHttp = false; // 其他非主流瀏覽器
}
} // 判斷結(jié)束,如果創(chuàng)建成功則返回一個DOM對象,如果創(chuàng)建不成功則返回一個false
if(xmlHttp)
{
return xmlHttp;
}else{
alert("對象創(chuàng)建失敗,請檢查瀏覽器是否支持XmlHttpRequest!");
}
} // 函數(shù)體
// createXmlHttpRequestObject();
/**********************************************/
/*
ChenkGet 使用AJAX異步GET請求一個php文件
*/
function ChenkGet(){
// 先創(chuàng)建一個對象實例
createXmlHttpRequestObject();
// 使用事件對象獲取文本框ID的值
var cont1 = document.getElementById("url_text").value;
var url = "test.php?type="+cont1; //待發(fā)送URL
xmlHttp.onreadystatechange=ajaxok; // 判斷瀏覽器狀態(tài)欄 (接收玩數(shù)據(jù)觸發(fā)的事件)
xmlHttp.open("GET",url,false); // GET向服務(wù)器端發(fā)送數(shù)據(jù)
xmlHttp.send(null);
}
// 開始提交數(shù)據(jù)
// 回調(diào)函數(shù) 用于接收服務(wù)器返回過來的數(shù)據(jù)
function ajaxok()
{
if(xmlHttp.readyState == 4 && xmlHttp.status==200)
{
// 表示數(shù)據(jù)已接收完成
document.getElementById("hakecc").innerHTML = xmlHttp.responseText;
}
}
