Ajax全稱爲“Asynchronous JavaScript and XML”（異步JavaScript和XML），是一種創建交互式網頁應用的網頁開發技術。
它：
使用XHTML+CSS來表示信息；
使用JavaScript操作DOM（Document Object Model）進行動態顯示及交互；
使用XML和XSLT進行數據交換及相關操作；
使用XMLHttpRequest對象與Web服務器進行異步數據交換；
使用JavaScript將所有的東西綁定在一起。
使用SOAP以XML的格式來傳送方法名和方法參數。
類似於DHTML或LAMP，AJAX不是指一種單一的技術，而是有機地利用了一系列相關的技術。事實上，一些基於Ajax的“派生／合成”式（derivative/composite）的技術正在出現
，如“AFLAX”。Ajax的應用使用支持以上技術的Web瀏覽器作爲運行平臺。這些瀏覽器目前包括：Internet Explorer、Mozilla、Firefox、Opera、Konqueror及Mac OS的Safari。
但是Opera不支持XSL格式對象，也不支持XSLT[2]。[以上一段來自 維基百科，自由的百科全書 AJAX]
Ajax的這種交互，現在可以說是很流行很常用的吧，比如說QQ羣信息，csdn上的資源下載後的評論，csdn上的在線聊天等等，還有很多很多應該都是用到Ajax技術的！
如何實現Ajax呢？
首先是要實現創建XMLHttpRequest 對象，貼一下自己用的代碼吧：
//建立XMLHttpRequest對象函數
var xmlhttp;
function createXHR()
{
try
{
xmlhttp=new ActiveXObject("Msxm12.XMLHTTP"); //支持不同瀏覽器版本，下同
}
catch(e)
{
try
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp=new XMLHttpRequest();
if(xmlhttp.overrideMimeType)
{
xmlhttp.overrideMimeType("text/xml");
}
}
catch(e){}
}
}
if(!xmlhttp)
{
return false;
}
}
在使用的時候就是要創建XMLHttpRequest！
寫個簡單的例子吧：我是用PHP實現的，原理上一樣的：
以下是test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax應用舉例</title>
</head>
<script type="text/javascript" src="ajax.js"></script>
<body>
<input type="text" name="username" οnblur="doAjax( 'chkusername.php?username='+this.value )" /><div id="chk"></div>
<!-- doAjax開始調用XMLHttpRequest對像，實現對username的驗證-->
</body>
</html>
以下是ajax.js,一是實現調用doAjax，一是實現返回
var xmlhttp;
function createXHR()
{
try
{
xmlhttp=new ActiveXObject("Msxm12.XMLHTTP"); //支持不同瀏覽器版本，下同
}
catch(e)
{
try
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp=new XMLHttpRequest();
if(xmlhttp.overrideMimeType)
{
xmlhttp.overrideMimeType("text/xml");
}
}
catch(e){}
}
}
if(!xmlhttp)
{
return false;
}
}
function doAjax( url )
{
createXHR();
xmlhttp.onreadystatechange=requestAjax;
xmlhttp.open( "GET", url, true );
xmlhttp.send( null );
}
function requestAjax()
{
if(xmlhttp.readyState==4)
{
if(xmlhttp.status==200)
{
document.getElementById('chk').innerHTML = xmlhttp.responseText;
}
}
}
以下是chkusername.php:
<?php
$username = @$_GET['username'];
echo $username;
?>
三個文件放在同一目錄下就OK了。
以上基本上就實現了一個由Ajax實現的交互了，可以在chkusername.php裏面實現數據庫的操作，實現判斷用戶名是否在數據庫裏存在，我就不多說了！
展開飛翔的翅膀
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章