Ajax(異步的javascript和XML),若干年以前它的出現(xiàn)使得javascript重新得到程序員們的重視，它終結(jié)了用戶“單擊，等待”的交互過程，通過異步模式民傻，讓用戶在單擊(形如表單提交,添加購物車等需要與后臺交互的動作)之后仍能進行其他操作而不是要等服務(wù)器響應(yīng)完后才能進行后續(xù)操作。
Ajax的核心—XMLHttpRequest
可以說Ajax的精華部分就是它的XMLHttpRequest對象场斑，為了方便起見簡稱XHR對象漓踢。
既然是對象，那么它就有原生的屬性和方法
readyState：請求/響應(yīng)過程的當前活動階段
0：未初始化漏隐，尚未調(diào)用open()方法
1：啟動彭雾，已經(jīng)調(diào)用open()，但尚未調(diào)用send()
2：發(fā)送锁保，已經(jīng)調(diào)用send薯酝，但尚未接收到響應(yīng)
3：接受半沽，已經(jīng)接受部分響應(yīng)數(shù)據(jù)
4：完成，已經(jīng)接受全部數(shù)據(jù)吴菠，而且已經(jīng)可以在客戶端使用status：響應(yīng)的Http狀態(tài)者填，例如200,404,304等
open方法：接收三個參數(shù)，分別是：請求方式做葵，請求的url占哟，同步還是異步(false or true)
send方法：接收一個參數(shù)，如果用get方式的話參數(shù)可以不寫或者是null酿矢，如果用post方式的話參數(shù)是請求的數(shù)據(jù)榨乎。
responseText：服務(wù)器返回的數(shù)據(jù)
onreadystatechange事件：每當readystate的值發(fā)生改變都會觸發(fā)一次該事件。
打開控制臺可以看到Http頭部信息
一個簡單的Ajax實例：
document.getElementById('ajax').addEventListener('click',function()
{
var xml=new XMLHttpRequest();
xml.onreadystatechange=function()
{
if(xml.readyState==4 && xml.status==200)
{
console.log(xml.responseText);
}
};
xml.open("get","user.json");
xml.send();})
細說POST和GET的區(qū)別
GET請求
- GET方式直接將請求的數(shù)據(jù)添加在URL的末尾
xml.open('GET',"ajax.php?number="+document.getElementById('keybord').value);
xml.send();
2.GET請求發(fā)送數(shù)據(jù)量小
3.請求數(shù)據(jù)瘫筐，用于查詢信息蜜暑，也就是取數(shù)據(jù)
4.GET請求發(fā)送后被緩存
POST請求
- POST方式模仿form的表單提交，所以要設(shè)置Content-Type頭部信息為application/x-222-form-urlencoded
xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xml.open('POST','ajax.php');
var data="name="+document.getElementById("stuffname").value+
"&number="+document.getElementById("stuffnumber").value+
"&sex="+document.getElementById("stuffsex").value+
"&job="+document.getElementById("stuffjob").value;
xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xml.send(data);
- POST請求發(fā)送數(shù)據(jù)量大
- 用于向服務(wù)器發(fā)送被保存的數(shù)據(jù)策肝，也就是存數(shù)據(jù)
- POST沒有緩存
注意：如果post的是表單肛捍，則需要先對表單對象進行序列化，可以使用jQuery中的serialize()方法之众，也可以用原生的js封裝拙毫。
