有一段時間不寫關於AJAX的東西了，最近和同學參加個比賽，要做一個類似博客的東西，用到了AJAX的東西，在寫東西之前為了再熟悉一下AJAX，自己做了個關於AJAX的小事例與大家分享一下。
AJAX在js里可謂是一個牛氣沖天的一個詞，我剛學的時候有點望名生畏。對於初學者來說AJAX看似很難，圖書館里有些關於AJAX的教程比板磚都厚，看了就不想學。但當你真正長用的東西其實就那么寫。在這就不扯那些書上扯的AJAX的歷史考古的淡了，不然的話會碎的，你懂的。OK直入正題。
在這呢我主要說一下AJAX的用法，原理就不多說了。
1.你要用AJAX首先得會js吧，這個不用多說。
首先你得NEW一個AJAX的對象，類必須得事例化才能使用，這個大家都知道對吧
第一步：var oAjax = new XMLHttpRequest();
但是為了兼容IE6這么蛋疼的瀏覽器一般這么寫：
if(window.XMLHttpRequest)
{
var oAjax = new XMLHttpRequest();
}
else
{
//IE
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
}
到這為止對象就事例化好了。
2.第二步咱得給服務器連接起來吧，這是必須的啊；
用open();用法是這樣的：open(傳輸方式，文件地址，同步還是異步（默認異步）)
oAjax.open('get','ajax.php?hehe='+sValue,true);
3.得發送請求吧：
oAjax.send();
4.就是接收返回值了，就不廢話了，直接看代碼吧：
oAjax.onreadystatechange=function()
{
//oAjax.readyState 記錄步驟
if(oAjax.readyState == 4)
{
if(oAjax.status == 200)
{
oDiv.innerHTML = oAjax.responseText;
}
else
{
alert("失敗");
}
}
else
{
alert(oAjax.readyState);//記錄步驟
}
}
到此為止AJAX就OK了：
下面是我實驗的完整事例：
html代碼如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>無標題文檔</title> 6 <script type="text/javascript"> 7 window.onload=function() 8 { 9 var oBtn1=document.getElementById('btn1'); 10 var oInput=document.getElementById("hehe"); 11 var oDiv=document.getElementById("div1"); 12 oBtn1.onclick=function() 13 { 14 var sValue=oInput.value; 15 //alert(sValue); 16 //1.創建Ajax對象 17 //只兼容非IE6的瀏覽器 18 if(window.XMLHttpRequest) 19 { 20 var oAjax=new XMLHttpRequest(); 21 } 22 else 23 { 24 //IE6 25 var oAjax=new ActiveXObject('Microsoft.XMLHTTP'); 26 } 27 //alert(oAjax); 28 //2.連接服務器 29 //open(傳輸方式，文件地址，同步還是異步（默認異步）) 30 oAjax.open('get','ajax.php?hehe='+sValue,true); 31 32 //3.發送請求 33 oAjax.send(); 34 35 //4.接收返回 36 oAjax.onreadystatechange=function() 37 { 38 39 //oAjax.readyState 記錄步驟 40 if(oAjax.readyState == 4) 41 { 42 if(oAjax.status == 200) 43 { 44 oDiv.innerHTML = oAjax.responseText; 45 } 46 else 47 { 48 alert("失敗"); 49 } 50 } 51 else 52 { 53 alert(oAjax.readyState);//記錄步驟 54 } 55 } 56 //oAjax.send(); 57 58 } 59 } 60 </script> 61 </head> 62 63 <body> 64 <form method="" action="ajax.php"> 65 呵呵：<input type="text" size=20 name="hehe" id="hehe"> 66 <input type="button" value="提交" id="btn1"> 67 </form> 68 <div id="div1"> 69 </div> 70 </body> 71 </html>
后台PHP代碼ajax.php
1 <?php 2 $hehe=$_GET['hehe']; 3 echo $hehe; 4 ?>
簡單的AJAX用法事例到此為止，特為初學者而寫，大牛可飄過……