Ajax原理介紹（結合php示例）
Ajax = Asynchronous JavaScript and XML （非同步的JavaScript和XML），Ajax是一種用於建立快速動態網頁的技術。Ajax最大的優點就是在不重新載入整個頁面的情況下，可以與伺服器交換資料並更新部分網頁內容。
傳統的網頁（不使用Ajax）如果需要更新內容，必須重新載入整個網頁。
現在大部分網頁都是使用ajax ，比如，我在百度輸入Ajax的時候，下面會出現很多有關ajax的內容，這其中用到的就是ajax知識。還有新浪微博（在訪問新浪微博時,當你看到一大半了,會自動幫我們載入更多的微博,同時頁面並沒有重新整理）、Google地圖等等。
百度中的ajax運用示例
ajax是與伺服器進行互動的，這裡我們使用後臺語言php進行演示，再演示之前需要配置php的環境，這裡選用wamp 作為學習環境，wamp的安裝包：
這個安裝方法，可以上網百度，這裡暫不做介紹，但是需要注意的是：
1.當你執行網頁的時候，一定要保證伺服器是開啟的，即啟動完成能夠在工作列的右下角看到這個圖示即表示成功。
2.php檔案一定要放在配置的網站目錄下，即www檔案下(具體視你安裝的情況而定)。
開啟瀏覽器輸入127.0.0.1檢視顯示的內容,如果是第一次安裝,預設顯示的應該是如下圖片：
127.0.0.1含義: 127.0.0.1是回送地址，指本地機，一般用來測試使用。
在進入正題之前，我們還需要了解瀏覽器是如何與伺服器進行通訊的。
瀏覽器與伺服器通訊遵循HTTP協議
瀏覽器向伺服器提交資料的兩種方式是post 和get方式。
在這裡我們用form表單元素演示get 與post方式。
Get方式，get.html頁面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>get方式向伺服器提交資料</title>
</head>
<body>
<h1>get請求</h1> get.php
<?php
// 規範編碼格式 utf-8
header('content-type:text/html;charset=utf-8');
//echo '';輸出語句
//$_GET 是php中定義的全域性變數，userName是input中的name屬性值 name="userName"
//.是php中的拼接符合 相當於js中的+
echo $_GET['userName'].'歡迎你！';
?>介面展示：
需要注意：url位址列：
當我提交資料之後:
url位址列：
會發現在請求的頁面後面多了我提交的內容即userName=Sugar以及pass=123 (多麼隱私的資訊都暴漏了)
利用除錯工具，找到Netwrok ，會發現，其代表的含義：
我們再來看post方法：
post.html （只是把請求的頁面action改為post.php 請求方法method改為post）
<form action="post.php" method="post">
<input type="text" name="userName" placeholder="請輸入姓名...">
<br>
<input type="password" name="pass" placeholder="請輸入密碼">
<br>
<input type="submit" value="提交">
</form>post.php頁面
<?php
header('content-type:text/html;charset=utf-8');
echo $_POST['userName'].'你好！你的密碼是'.$_POST['pass'];
?>注意：請求方法是post 方法，所以php頁面的全域性變數用的是$_POST
頁面展示：
url位址列：
提交資料之後，返回的頁面是：
url位址列：
會發現：用post提交資料，位址列url中不會拼接提交的資料
通過對比：瞭解到get與post提交資料的方式：
get提交資料，會把提交的資料拼接在url之後，其他人可以看到
post提交資料，在url中看不到，但僅僅也比get提交安全一點點，因為利用抓包工具還是可以檢視提交的資料的（這個自行百度瞭解）
在每次提交資料的時候，用除錯工具檢視時，會發現，不管是get還是post方式，在NETWORK ->Header中都會有請求頭、響應頭、提交的資料與請求的地址url 、請求方法、以及狀態碼。
這是因為瀏覽器向伺服器請求資料，伺服器給瀏覽器返回資料，這之間是遵循HTTP協議的。一個完整的HTTP請求有兩部分組成：請求報文(瀏覽器發出) 響應報文(伺服器接收到請求以後，返回給瀏覽器的)
前面鋪墊了辣麼多，正式進入正題：
Ajax通過與後臺伺服器通訊，實現非同步重新整理，遵循的也是HTTP協議。回想一下一個完整的http請求包括：
（1） 請求的網址url，方法：get/post
（2） 提交請求內容 資料，請求主體等
（3） 接收響應的內容
那麼Ajax實現非同步更新資料的方式也應該是首先發出http請求（請求報文），這包括
請求的url，請求的方法，把請求發出去
接收http請求(響應報文)：通過註冊事件的方式接收返回的值
完整的描述一下，ajax的工作過程
1. 建立XMLHTTPRequest物件
2. 設定請求的url等引數
3. 傳送請求
4. 註冊事件
5. 在註冊事件中獲取返回的內容，並修改頁面顯示，實現區域性重新整理
原理知道了，實踐一下吧：（還是通過get和post方式）
get_ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>get方式</title>
</head>
<body>
<h1>使用get方式傳送資料</h1>
<input type="text" name="content" class="con"></input>
<input type="button" value="提交" id="btn"></input>
</body>
</html>
<script type="text/javascript">
// 繫結點選事件
document.querySelector('#btn').onclick= function(){
// 傳送ajax請求的5個步驟
//1.建立非同步物件
var ajax = new XMLHttpRequest();
//2.設定請求的url等引數
/*引數1：請求的方法
引數2：請求的url ，get提交的資料是直接追加在url後面的
格式為xxx.php?xxx=xxx
這裡動態傳遞引數
getAjax.php?content='+document.querySelector('.con').value
*/
ajax.open('get','getAjax.php?content='+document.querySelector('.con').value);
//3.傳送請求
ajax.send();
//4.註冊事件
ajax.onreadystatechange = function(){
// 為了保證資料完整的回來，我們一般會判斷兩個值
if (ajax.readyState ==4 && ajax.status==200) {
// 如果能夠進入這個判斷，說明請求的頁面存在，且返回資料
//5.在註冊事件中 獲取返回的內容，並修改頁面的顯示
// 資料是儲存在非同步物件的屬性中
console.log(ajax.responseText);
document.querySelector('h1').innerHTML = ajax.responseText;
};
}
}
</script>get_ajax.php
<?php
header('content-type:text/html;charset=utf-8');
echo $_GET['content'].'我是通過ajax請求回來的資料';
?>提交資料之前
獲取資料之後，實驗過程觀察頁面並未重新整理
post_ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>post方式傳送資料</title>
</head>
<body>
<h1>註冊名字</h1>
<input type="text" name="userName" id="btnName"><label id="tishi" style="display:none"></label>
</body>
</html>
<script>
//繫結失去焦點事件
document.querySelector('#btnName').onblur=function(){
// 傳送ajax請求到伺服器
//1.建立非同步物件
var ajax = new XMLHttpRequest();
//2.設定請求的url等引數
ajax.open('post','post_ajax.php');
/*如果需要像 HTML 表單那樣 POST 資料，請使用 setRequestHeader() 來新增 HTTP 頭。然後在 send() 方法中規定您希望傳送的資料：*/
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 3.傳送請求
ajax.send('Name='+document.querySelector('#btnName').value);
// 4.註冊事件
ajax.onreadystatechange = function(){
if (ajax.readyState ==4&&ajax.status==200) {
// 5.在註冊事件中接收返回的內容並修改資料
console.log(ajax.responseText);
var show = document.querySelector('#tishi');
show.style.display='block';
if (ajax.responseText =="exist") {
show.innerHTML='該使用者已經註冊了！'
} else{
show.innerHTML='你可以使用該名字！'
}
}
};
}
</script>post_ajax.php
<?php
header('content-type:text/html;charset=utf-8');
$name=$_POST['Name'];
// 準備一個數據 模擬已經存在的使用者
$nameArray = array('jack','kong','rose','ice');
// 檢驗是否存在，並且接受返回值
$result=in_array($name, $nameArray);
// 通過if else返回不同的值給瀏覽器
if($result){
echo "exist";
} else{
echo "not exist";
}
?>提交資料之前：
提交資料之後：
