這篇文章寫正在初涉ajax的時候，對於ajax理解還不能說太細緻。

首先先知道ajax的作用。在資料交流的時候，大家可以理解為你在客戶端上面，向伺服器傳送資料獲取請求，然後伺服器篩選你想要的資料併發送給你。而這個過程呢，在以往的資料互動情況下，只能完成了當前的一個請求才能進行下一個資料請求。試想一下如果當前這個請求所需要的操作時間太長的話，就會非常影響下一個請求的操作，所以，ajax就被引用出來了。

ajax其實可以看做是一個請求託管處理器。在你的客戶端向伺服器傳送資料請求的時候，ajax就會在客戶端跟伺服器中間接收你的請求，並由他來替你向伺服器做資料請求。當他從伺服器拿到你所需要的資料的時候再返回給你的客戶端。而且在這個過程當中，你的另外一個數據請求並不會被影響。也可以理解為你的資料請求由另外一個ajax來處理了，而且另個ajax並不會相互影響。下面來說一下ajax怎麼運用。

ajax的運用分為四步：

1. 建立ajax；
2. 開啟連結並向ajax傳送請求；
3. 獲取ajax傳來的資訊，做處理，再返回給ajax（這裡第三步由後臺操作）；
4. 接收ajax返回的資料並進行處理。

佈局：

<form action="checkName.php" method="post">
	使用者名稱：
	<input type="text" id="username" />
	<input type="button" name="btn" id="btn" value="驗證" />
	<span id="inf"></span>
	<br />
	密碼：
	<input type="password" />
	<br />
	<input type="submit" value="註冊"/>
</form>
 

第一步：建立ajax

function $(id){
	return document.getElementById(id);
}
				
function getXHR(){
	//1號線：建立ajax物件
	var oAjax;
	if(window.XMLHttpRequest){
		//IE7+, Firefox, Chrome, Opera, Safari
		oAjax=new XMLHttpRequest();
	}else{
		oAjax=new ActiveXObject("Microsoft.XMLHTTP")
	}		
	return oAjax;
}

第二步：開啟連結並向ajax傳送請求

正看程式碼之前要知道兩個知識點：1.資料請求方式分為兩種：get和post。2.get和post的區別。get和post兩種請求方式其實都可以用，但是兩個請求方式肯定有不一樣的地方，主要在兩個地方。

1. 就拿註冊登入來說，get方法在註冊的時候，提交上去的時候IE位址列裡顯示錶示你提交時候所帶的值，也就是能看見你的資訊，而post方法不會。
2. get方法傳輸資料的大小限制在了255個位元組以內，而post方法沒限制。

所以，get方法相比post方法來說，沒那麼安全而且傳輸資料受很大限制。

$('username').onkeyup=function(){
	var xhr = getXHR();
	//2號線：傳送請求
	
	//!!!!!!!!!!!!!!!!!!!!!!!!這是get方式！！！！！！！！！！！！！！！！
	//open(get,url,true)
	//第一個引數：資料傳輸方式get post
	//第二個引數：處理檔案 xx.php  xx.txt，要資料：直接寫路徑就行，提交資料：在地址哪裡寫資料(get方式)
	//第三個引數：同步方式還是非同步方式，預設是非同步true
	var url = '/checkName.php?name=' + $('username').value;//checkName.php是3號線所在檔案
	xhr.open('GET',url,true);
	xhr.send(null);//send() 如果是get方式，寫null或者空
	
	//!!!!!!!!!!!!!!!!!!!!!!!!post方式！！！！！！！！！！！！！！！！！！！！！！！
//	var url='/checkName2.php';
//	var data='name='+$('username').value;
//	console.log(url+data);
//	xhr.open('POST',url,true);
//	xhr.send(data);//如果是post，引數就直接寫要傳輸的內容
	
	
	//4號線:接受3號線的資料並進行處理
	xhr.onreadystatechange = function(){
		alert('現在的狀態是' + xhr.readyState);
		if (xhr.readyState == 4) {
			if (xhr.status == 200) {
				$('inf').innerHTML = xhr.responseText;
			}
		}
	}
}

<?php
    //3號線：獲取ajax傳來的資訊，做處理，在返回給ajax：後臺做，或者後臺協助
    $username = $_GET['name'];
//    $userName=$_POST['name'];
    
    if($userName=='admin'){ //把內容拿到，進行判斷，輸出資訊返回給ajax
        echo '該使用者名稱不能使用'; 
    }else{
        echo '該使用者名稱能使用';
    }
?>

最後在提醒一下注意點：

1. 注意第二步第三步第四步裡面是有get和post方法的分開程式碼的！
2. ajax的應用需要結合伺服器例如：WampServer使用
3. ajax操作的四個步驟裡面，1/2/4都是前端人員操作的，3號線是後臺人員操作的，所以3號線的程式碼需要另外建一個php檔案來寫入