一、ajax概述
1、Ajax是Asynchronous（[ə'sɪŋkrənəs） JavaScript XML的簡寫，不是新技術，而是對現有技術的綜合利用。這項技術能夠向伺服器請求額外資料而無需刷新頁面，帶來了更好的使用者體驗
2、Ajax技術的核心是XMLHttpRequest物件（簡稱XHR），這是由微軟首先引入的特性。在XHR出現之前，Ajax式的通訊必須藉助一些hack手段來實現，大多數是使用隱藏的框架或內嵌框架。
3、XHR為向伺服器發送請求和解析伺服器回應提供了流暢的介面。能夠以非同步的方式從伺服器取得更多的信息，意味著使用者點擊後，可以不必刷新頁面也能獲取新資料。也就是說可以使用XHR物件取得新數據，然後再透過DOM將新數據插入頁面中
4、雖然Ajax名字中有XML的成分，但是呢，Ajax通訊與數據格式無關，這種技術就是無須刷新頁面即可從伺服器取得數據，但不一定是XML資料
二、操作：原生ajax和jQuery中封裝的ajax
1、原生ajax：
ajax作用：發送請求（設定請求setRequest） 接收回應(getResponse)
A、ajax原生方式發送請求：
Ajax中最重要也是最固定的部分就是http請求。
1)建立連線：（IE7以上版本都支援XMLHttpRequest）
var xhr = new XMLHttpRequest(); //建立非同步請求物件
2)Get請求：格式必須是（url?name1=value1&name2=value32 )
xhr.open("get","01-register.php?name="+name);//初始化异步get请求
xhr.send(null); //与服务器建立连接
3)Post請求
xhr.open('post','01-XMLHTTPRequest-test.php');//请求报文行 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); /*post请求设置请求头*/ xhr.send('name=rose&age=20'); //请求报文体
4)get和post發送請求的區別：
4)get和post發送請求的區別：需要設定值的頭，而需要傳遞透過url進行，而post的資料在send方法中傳遞B、ajax原生方式接收回應：/*监听服务器的响应*/
xhr.onreadystatechange=function(){
/*判断当前的响应是否成功 1.服务器做出了响应 2.响应的结果是正确的*/
if(xhr.status==200 && xhr.readyState==4){
var result=xhr.responseText;
console.log(result); //输出从服务器中获取到的数据
//接下来就可以对数据进行相应的处理了
}
};/*监听*/
xhr.onreadystatechange=function(){
if(xhr.status==200 && xhr.readyState==4){ /*判断状态*/
var result;
/*获取响应报文中的Content-Type*/
var ct=xhr.getResponseHeader("Content-Type");
/*判断Content-Type,进行数据的解析*/
if(ct.indexOf("xml") != -1){
result=xhr.responseXML;
}
else if(ct.indexOf("json") !=-1){
result=JSON.parse(xhr.responseText);
}
else{
result=xhr.responseText;
}
/*调用回调函数--委托--代理*/
success && success(result);
}
};
jQuery中提供了專門的方法來序列化表單：
$('form').serialize(): //序列化表單(即格式化key=val & key=val);
三、回應
我們需要監聽伺服器的回應狀態，然後對從伺服器取得的資料做相對應的處理。
1) onreadystatechange是JavaScript事件中的一種，用於監控XMLHttpRequest的狀態
2) readystate：回應狀態，返回XMLHTTP回應碼：200—伺服器成功返回網頁
