Ajax通過(guò)GET方式與PHP進(jìn)行交互
來(lái)源：程序員人生 發(fā)布時(shí)間：2013-11-12 21:28:52 閱讀次數(shù)：3162次
Ajax介紹:
內(nèi)翻譯常為“阿賈克斯”和阿賈克斯足球隊(duì)同音。Web應(yīng)用的交互如Flickr,Backpack和Google在這方面已經(jīng)有質(zhì)的飛躍。這個(gè)術(shù)語(yǔ)源自描述從基于Web的應(yīng)用到基于數(shù)據(jù)的應(yīng)用的轉(zhuǎn)換。在基于數(shù)據(jù)的應(yīng)用中，用戶需求的數(shù)據(jù)如聯(lián)系人列表，可以從獨(dú)立于實(shí)際網(wǎng)頁(yè)的服務(wù)端取得并且可以被動(dòng)態(tài)地寫(xiě)入網(wǎng)頁(yè)中，給緩慢的Web應(yīng)用體驗(yàn)著色使之像桌面應(yīng)用一樣。
Ajax的核心是JavaScript對(duì)象XmlHttpRequest。該對(duì)象在Internet Explorer 5中首次引入，它是一種支持異步請(qǐng)求的技術(shù)。簡(jiǎn)而言之，XmlHttpRequest使您可以使用JavaScript向服務(wù)器提出請(qǐng)求并處理響應(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開(kāi)始
xmlhttp = new ActiveXobject("Microsoft.XMLHTTP"); // 使用ActiveX對(duì)象創(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)建成功則返回一個(gè)DOM對(duì)象,如果創(chuàng)建不成功則返回一個(gè)false
if(xmlHttp)
{
return xmlHttp;
}else{
alert("對(duì)象創(chuàng)建失敗,請(qǐng)檢查瀏覽器是否支持XmlHttpRequest!");
}
} // 函數(shù)體
// createXmlHttpRequestObject();
/**********************************************/
/*
ChenkGet 使用AJAX異步GET請(qǐng)求一個(gè)php文件
*/
function ChenkGet(){
// 先創(chuàng)建一個(gè)對(duì)象實(shí)例
createXmlHttpRequestObject();
// 使用事件對(duì)象獲取文本框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);
}
// 開(kāi)始提交數(shù)據(jù)
// 回調(diào)函數(shù) 用于接收服務(wù)器返回過(guò)來(lái)的數(shù)據(jù)
function ajaxok()
{
if(xmlHttp.readyState == 4 && xmlHttp.status==200)
{
// 表示數(shù)據(jù)已接收完成
document.getElementById("hakecc").innerHTML = xmlHttp.responseText;
}
}
