天天看點

Ajax介紹——什麼是Ajax?

AJAX = Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。

AJAX 不是新的程式設計語言,而是一種使用現有标準的新方法。

AJAX 最大的優點是在不重新加載整個頁面的情況下,可以與伺服器交換資料并更新部分網頁内容。

AJAX 不需要任何浏覽器插件,但需要使用者允許JavaScript在浏覽器上執行。

簡單案例:

用戶端

<form action="checkNumber.php" method="get">
		手機号:<input type="text" name="phoneNumber" id="pnumber">
		<span id="numbertips"></span><br>
		使用者名:<input type="text" name="username" id="username" id="username">
		<span id="usertips"></span><br>
		<input type="submit">
	</form>
	<script>
		//ajax請求就是HTTP請求(post、get)
		var pnumber=document.querySelector("#pnumber");
		var username=document.querySelector("#username");
		//當手機号文本框失焦
		pnumber.onblur=function(){
			//1.定義請求對象
			var xhr=new XMLHttpRequest();

			//2.準備發送網絡請求
			//第一個參數dataType:post、get
			//第二個參數背景請求位址
			//第三個參數同步或者異步
			xhr.open("get","04-checkNumber.php?phoneNumber="+pnumber.value,true);

			//3.發送網絡請求
			xhr.send();

			//4.執行回調
			xhr.onreadystatechange=function(){
				//這個回調函數不是執行一次
				if (xhr.readyState==4&&xhr.status==200) {
					numbertips.innerHTML=xhr.responseText;
				}
			}

		}
	</script>
           

伺服器端:

<?php
	$number=$_GET["phoneNumber"];
	if($number!="18336053333"&&$number!=""){
		echo "此手機号可以注冊";
	}else{
		echo "此手機号不可以注冊";
	}
?>
           

繼續閱讀