一、什么是Ajax？
Aiax：異步的Javascript和XML。
作用：用於完成局部刷新
XML是用於數據傳輸，現在開始被JSON所替代。
function hello(){
//1.拿到一個Ajax對象
var xhr = new XMLHttpRequest();
//2.open方法:創建一個新的http請求，並指定此請求的方法、URL以及驗證信息
// 准備請求的信息(方式,地址,...)
/**
open(bstrMethod, bstrUrl, varAsync)
bstrMethod:准備請求的方式(GET/POST)
bstrUrl:准備請求的地址(路徑)
varAsync:是否異步(true就是異步【默認】 ，false就是同步)
*/
xhr.open("GET","/hello");
//3.發送相當的請求
xhr.send();
}
1.1、交互方式問題
傳統的交互方式每次都必須返回整個頁面，寬帶，響應速度都有影響的，
Ajax的交互方式是從
客戶端（瀏覽器）從服務器加載網頁完畢后，網頁中的內容如果需要更改，不使用瀏覽器發送請求，而是使用JavaScript中的XMLHttpRequest（及Ajax對象）對象發送請求到服務器，服務器接收請求並處理完畢后只返回頁面需要的內容，XMLHttpRequest對象接收服務器返回的內容，程序員需要手動(javascript)的把內容更新到頁面中，所有Ajax交互的好處是只是部分數據的更新，就成功和服務器進行了交互，提高用戶的體驗。
1.2、使用場景
需要刷新的頁面，如（瀏覽器地圖搜素、自動提示、用戶重復檢查、購物車、用戶登錄等.....）都需要用到Ajax交互。
1.3、Ajax的特點
通過Ajax與服務器進行數據交換，Ajax可以使網頁實現局部更新，意味着可以在不重新加載整個頁面的情況下，對網頁的某個部分進行更新
1.4、Ajax核心
Ajax的核心是JavaScript對象XMLHttpRequest。簡單的說 XMLHttpRequest可以讓你使用JavaScript向服務器進行請求並處理響應。
1.5、同步與異步的區別
同步：提交請求->等待服務器處理->處理完畢返回 這個期間客戶端瀏覽器不能干任何事
異步: 請求通過事件觸發->服務器處理（這時瀏覽器仍然可以作其他事情）->處理完畢
同步是指：發送方發出數據后，等接收方發回響應以后才發下一個數據包的通訊方式。
異步是指：發送方發出數據后，不等接收方發回響應，接着發送下個數據包的通訊方式
二、Ajax原生的實現方式
xhr = new XMLHttpRequest() : 通過new它可以創建一個ajax對象【兼容IE需要創建ActiveXObject】
2.1、方法(函數)
xhr.open(methodType,methodUrl,isSys) -> 准備請求的方式與路徑
methodType:請求的方式(GET/POST)
methodUrl:請求的路徑
isSys:是否異步(默認為true)
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
設置請求頭的一個類型，如果是POST請求，一定要加這一句，才可以把數據傳到后台
位置:open之后，send之前
xhr.send(varBody) -> 發送請求
varBody:POST請求傳參(key=value&key=value&...)
2.2、 屬性
xhr.status -> 請求狀態(200代表成功)
xhr.readyState -> 響應狀態(4代表響應完成)
xhr.responseText -> 獲取返回的數據(字符串)
/**
從Ajax對象（xhr）創建開始，它的所有操作都被監聽
xhr本身是有一個狀態的概念，這個狀態:readyState
0 (未初始化) 對象已建立，但是尚未初始化（尚未調用open方法）
1 (初始化) 對象已建立，尚未調用send方法
2 (發送數據) send方法已調用，但是當前的狀態及http頭未知
3 (數據傳送中) 已接收部分數據，因為響應及http頭不全，這時通過responseBody和responseText獲取部分數據會出現錯誤，
4 (完成) 數據接收完畢,此時可以通過通過responseBody和responseText獲取完整的回應數據
*/
function getTime(){
//1.獲取ajax對象
var xhr = new XMLHttpRequest();
//2.准備請求(方式,路徑)
xhr.open("get","/gettime");
//3.監聽ajax的狀態
xhr.onreadystatechange = function(){
//4.如果請求狀態為200,響應狀態為4
if(xhr.status==200 && xhr.readyState==4){
//5.獲取相應的值
var result = xhr.responseText;
//放到相應的位置
document.getElementById("time").innerHTML = result;
}
}
//6.發送請求
xhr.send();
}
2.3、事件
xhr.onreadystatechange =function(){} -> 監聽readyState狀態的變化
三、注意點
使用Ajax請求，后台不進行跳轉，只做數據的傳輸
返回的值都是字符串，需要自己做相當的判斷與轉換
四、JSON:JS的對象 對象/字符串
json傳輸數據比XML更加方便,簡單,精簡
var jsonStr = {}/[];
如果把一個json字符串轉成json對象呢？
eval("("+jsonStr+")") -> 前后加括號
JSON.parse(jsonStr) -> 必需是標准的json(key必需有雙引號)
function login(){
//1.獲取到用戶名與密碼
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
//2.創建ajax對象
var xhr = new XMLHttpRequest();
//3.准備請求的方式與路徑 /login?username=xxx&password=xx
// get請求在路徑中傳參，POST請求在send中傳參
xhr.open("post","/login");
// 如果是post請求，必需設計請求頭的類型，后台才可以拿到相應的數據
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//監聽相當的事件
xhr.onreadystatechange = function(){
if(xhr.status==200 && xhr.readyState==4){
//返回的 ”true" 與 "false"
// responseText拿到的都是字符串
var result = xhr.responseText;
if(result=="true"){
//alert("登錄成功了!");
window.location.href="https://www.baidu.com/";
}else{
//alert("登錄失敗了！");
document.getElementById("errorSpan").innerHTML ="用戶名或者密碼錯誤！";
}
}
}
//4.發送請求(send里面加上發送的數據)
xhr.send("username="+username+"&password="+password);
}
</script>
</head>
<body>
<span id="errorSpan"></span>
<form action="/login" method="post">
用戶名：<input type="text" name="username" id="username" /> <br />
密碼<input type="text" name="password" id="password" /><br />
<input type="button" value="ajax提交" onclick="login()" />
<input type="submit" value="直接提交" />
</form>