ajax原理

時間 2020-01-13

標籤 ajax 原理欄目 Ajax 简体版

原文原文鏈接

ajax=>Asynchronous JavaScript and XML異步傳輸，是指一種建立交互式網頁應用的網頁開發技術。javascript

經過在前端腳本(js)與服務器進行少許數據交換，AJAX可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新；傳統的網頁（不使用 AJAX）若是須要更新內容，必須重載整個網頁面(f5)。php

ajax執行原理：一個Ajax交互從一個稱爲 XMLHttpRequest 的JavaScript對象開始。如同名字所暗示的，它容許一個客戶端腳本(JS)來執行HTTP請求，且將會解析一個XML格式的服務器響應。Ajax處理過程當中的第一步是建立一個XMLHttpRequest實例。使用HTTP方法（GET或POST）來處理請求，並將目標URL設置到XMLHttpRequest對象上html

二、開始準備將要發送的數據前端

發送一個http請求的時候須要：正確URL，須要傳給服務器的處理的數據，數據的傳輸方式(get|post)java

ajax.open("get|post",url+data,true|false);mysql

參數1：數據傳輸方式 get|postajax

參數2：請求的URL和數據user.php?參數=值&參數=值.sql

參數3：ajax請求同步仍是異步數據庫

false: 同步服務器

true : 異步

一個頁面中有3個AJAX同時執行

Ajax能夠經過兩種方法訪問服務器，

同步(腳本會停留並等待服務器發送回覆而後再繼續)

異步(腳本容許頁面繼續其餘進程並處理可能的回覆)

同步須要等待返回結果才能繼續，異步沒必要等待，通常須要監聽異步的結果，設置監聽函數

同步是在一條直線上的隊列，異步不在一個隊列上各走各的

其中async是一個布爾值。若是是異步通訊方式(true)，客戶機就不等待服務器的響應；若是是同步方式(false)，客戶機就要等到服務器返回消息後纔去執行其餘操做。咱們須要根據實際須要來指定同步方式，在某些頁面中，可能會發出多個請求，甚至是有組織有計劃有隊形大規模的高強度的request，若是異步：true 後一個是會覆蓋前一個的，這個時候固然要指定同步方式：Flase

3. 發送數據

ajax.send(string|null);

get: null

post: string

3.1 服務器端處理數據的php代碼正經常使用 $_GET|$_POST|$_REQUEST獲取數據而後處理

3.2 服務器端返回數據是以頁面輸出流的形式返回數據

ajax捕獲的是服務器端文件的輸出流

4. ajax.readyState 屬性監聽ajax執行的過程執行到哪一步

0: ajax對象尚未建立

1: 對象已經創，尚未準備發送數據

2: 準備發送的數據已經準備完畢，尚未發送

3: 數據已經發送，尚未徹底接收

4: 數據已經發送、接收完畢

5. 設置監視的函數監聽ajax在數據傳輸過程當中狀態

ajax.onreadystatechange = 函數名();

ajax.status :監測ajax操做過程是否有錯誤報出

200:發送和接收沒有錯誤

400:發送或者接收中出現了錯誤;

6. ajax獲得服務器中返回的數據

ajax.responseText;

php頁面的數據是怎麼返回：

數據必須在php代碼輸出狀態

也就是說ajax捕獲服務腳本頁面的輸出流

reg.html

<!DOCTYPE HTML>
<html>
	<head>
		<title> ajax </title>
		<meta charset="utf-8"/>
		<script type="text/javascript">
			//第一步建立ajax對象
			var httpAjax = new XMLHttpRequest();
			//定義一個函數來檢查輸入的用戶名是否爲空，爲空則返回錯誤，不繼續往下執行代碼
			function checkUser(uname){	
				if(uname == ""){
					return false;
				}
				//第四步 設置監聽函數,監聽ajax在數據傳輸過程當中狀態,可是要放到前面
				httpAjax.onreadystatechange = function(){
					//4: 數據已經發送、接收完畢,200:發送和接收沒有錯誤
					if(httpAjax.readyState == 4 && httpAjax.status == 200){
						var res = httpAjax.responseText;
						var sp = document.getElementById("sp");
						if(res == "true"){
							sp.innerHTML = "<font color='red'>已註冊</font>";
						}else{
							sp.innerHTML = "<font color='green'>能夠註冊</font>"
						}
					}
				}
				//第二步準備發送數據
				httpAjax.open("get","user.php?uname="+uname,true);
				//uname是個變量，因此和字符串鏈接用個+符號
				
				//第三步發送數據,get傳值方式send值爲null
				httpAjax.send(null);
			}
		</script>
	</head>
	<body>
		
		<input type="text" id="username" class="username" name="username" onchange="checkUser(this.value)"/><span id="sp"></span>

	</body>
</html>

user.php

<?php
	header("content-type:text/html;charset=utf-8");
		$pdo = new PDO("mysql:host=localhost;dbname=test","root","123456");
		$pdo->exec("set names utf8");
		$uname = $_GET["uname"];
		$sql = "select * from stu_info where sname='".$uname."'";
		$data = $pdo->query($sql)->fetch(PDO::FETCH_ASSOC);
		if($data){
			echo "true";
		}else{
			echo "false";
		}
?>

數據庫中的表stu_info

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。