Ajax和PHP執行個體分析

本文主要和大家分享Ajax和PHP執行個體分析，希望本文代碼能協助到大家。

表單：

 使用者名稱:<input type="text" id="username" value="" /> 密碼:<input type="password" id="password" value="" /> <br /><br /> <input type="submit" id="update" name="提交" />

JavaScript之Ajax請求

var update = document.getElementById("update");update.onclick = function(){var username = document.getElementById("username").value;var pass = document.getElementById("password").value;//步驟1:建立Ajax對象if(window.XMLHttpRequest){var ajax = new XMLHttpRequest();//在主流瀏覽器下建立Ajax對象}else{var ajax = new ActiveXObject("Microsoft.xmlhttp");//在IE瀏覽器下建立Ajax對象} //步驟2:開啟ajax/**************get方式***********/var url = "http://localhost/test/get.php?username="+username+"&password="+pass; ajax.open("GET",url,true);//步驟3:發送資料(請求) ajax.send();/******post方式*******/// ajax.open("POST","dealDate.php",true);// //請求過程中資料的編碼格式(POST專用操作)// ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");// var parameter = "username="+username+"&password="+pass;// ajax.send(parameter);//步驟4:等待接收資料/*Ajax對象在執行過程中伴隨著狀態的切換,共存有5中狀態的切換 0.代表Ajax對象的建立,但是未調用open方法 1.代表Ajax對象調用open方法,但是未調用send方法 2.代表Ajax對象調用send方法,但是還沒有接收到資料 3.代表Ajax對象正在接收資料 4.代表Ajax對象接收資料完成*/ajax.onreadystatechange = function(){if(ajax.readyState == 4){ if(ajax.status >= 200 && ajax.status < 300 || ajax.status == 304){ //輸出伺服器返回的資料,但是該資料必須是通過echo輸出的文本資料var p = document.createElement("p");p.innerHTML = ajax.responseText;document.body.appendChild(p);}}}  }

後台PHP接收到資料：

<?phpheader("Content-type:text/html;charset=utf-8");//顯示中文$user = $_GET["username"];$password = $_GET["password"];echo "{$user}".":"."{$password}";?>