Ajax概述：
- Ajax(Asynchronous JavaScript And Xml),異步的JavaScript和Xml裳仆。是一種用來改善用戶體驗(yàn)的技術(shù)务豺，其實(shí)質(zhì)是利用瀏覽器內(nèi)置的一個(gè)特殊對(duì)象（XMLHttpRequest轧苫，一般稱之為Ajax對(duì)象）異步地（Ajax對(duì)象在向服務(wù)器發(fā)送請(qǐng)求時(shí)，瀏覽器并不會(huì)銷毀當(dāng)前頁面击蹲，用戶仍然可以對(duì)當(dāng)前頁面作其他的操作）向服務(wù)器發(fā)送請(qǐng)求要尔，服務(wù)器送回部分?jǐn)?shù)據(jù)（不是一個(gè)完整的新的頁面，而是文本或者Xml文檔）妙色，在瀏覽器端桅滋，可以利用這些數(shù)據(jù)部分更新當(dāng)前頁面。整個(gè)過程身辨，頁面無刷新丐谋，不打斷用戶的操作芍碧。
- 優(yōu)點(diǎn)：
- 頁面無刷新，不打斷用戶的操作号俐。
- 按需要獲取數(shù)據(jù)师枣，客戶端（瀏覽器）與服務(wù)器端之間的數(shù)據(jù)傳輸量大大減少
- 是一種標(biāo)準(zhǔn)化的技術(shù)，不需要下載任何插件萧落。
- 獲得Ajax對(duì)象：由于XMLHttpRequest（Ajax對(duì)象）沒有標(biāo)準(zhǔn)化，所以要區(qū)分瀏覽器洗贰。
function getXhr(){
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();//非IE瀏覽器
}else{
xhr=new ActiveXObject('Microsoft.XMLHttp');//IE瀏覽器
}
return xhr;
}
語句處理：
$(“id”) <—> document.getElementById(“id”);
$F(“id”) <—> document.getElementById(“id”).value;
- Ajax對(duì)象屬性：
1）onreadystatechange：綁定一個(gè)事件處理函數(shù)（監(jiān)聽器）找岖，該函數(shù)用來處理readystatechange事件。Ajax對(duì)象的readyState屬性發(fā)生改變敛滋，比如從0到1许布，則會(huì)產(chǎn)生onreadystatechange事件。
2）responseText：獲得服務(wù)器返回的文本數(shù)據(jù)绎晃。
3）responseXML：獲得服務(wù)器返回的Xml文檔蜜唾。
4）status：獲得狀態(tài)碼。
5）readyStatue：返回Ajax對(duì)象與服務(wù)器通訊的狀態(tài)庶艾，返回值是一個(gè)number類型的值袁余。一共有5個(gè)值，分別是：
①0：（未初始化）對(duì)象已建立咱揍，但是尚未初始化（尚未調(diào)用open方法）颖榜。
②1：（初始化）對(duì)象已建立，尚未調(diào)用send方法煤裙。
③2：（發(fā)送數(shù)據(jù)）send方法已調(diào)用掩完。
④3：（數(shù)據(jù)傳送中）已接收部分?jǐn)?shù)據(jù)。
⑤4：（響應(yīng)結(jié)束）Ajax對(duì)象已經(jīng)獲得了服務(wù)器返回的所有的數(shù)據(jù)硼砰。
if(xhr.readyState==4 && xhr.status == 200){…} - get請(qǐng)求：
1）獲得Ajax對(duì)象且蓬，比如：var xhr=getXhr();//調(diào)用之前定義的函數(shù)
2）發(fā)送get請(qǐng)求：
① xhr.open(‘get’,check_username.do?username=chang&age=23,true)；
//參數(shù)依次為：請(qǐng)求方式题翰、url恶阴、同步還是異步(true：異步，用戶能對(duì)當(dāng)前頁面進(jìn)行其他操作遍愿，不會(huì)銷毀頁面存淫；false:同步，瀏覽器會(huì)鎖定該頁面沼填，用戶只能等待桅咆，不會(huì)銷毀頁面)
② xhr.onreadystatechange=func1();//綁定一個(gè)事件處理函數(shù)（監(jiān)聽器）
③ xhr.send(null);//送請(qǐng)求參數(shù)，因?yàn)閰?shù)已經(jīng)寫在了請(qǐng)求資源路徑中坞笙，所以這里為null岩饼。
④事件處理函數(shù)func1()：
function f1(){
if(xhr.readyState==4){
var txt=xhr.responseText;
dom操作……
}
}
- post請(qǐng)求：
1）獲得Ajax對(duì)象荚虚，比如：var xhr=getXhr();//調(diào)用之前定義的函數(shù)
2）使用Ajax對(duì)象發(fā)送post請(qǐng)求：
① xhr.open(“post”,”check.do”,true);//建立連接
② xhr.setRequestHeader(“content-type”,”application//x-www-form-urlencoded”);//發(fā)送一個(gè)content-type消息頭, 必須設(shè)置
③ xhr.onreadystatechange=func1();//綁定一個(gè)事件處理函數(shù)（監(jiān)聽器）
④ xhr.send(“username=小紅“);//發(fā)送請(qǐng)求參數(shù)
【注意：與get請(qǐng)求不同，請(qǐng)求參數(shù)要放到send方法里面籍茧；因?yàn)榘凑誋TTP協(xié)議的要求版述，發(fā)送post請(qǐng)求時(shí)，應(yīng)該發(fā)送一個(gè)content-type消息頭寞冯，而Ajax對(duì)象在默認(rèn)情況下渴析，不會(huì)發(fā)送這個(gè)消息頭，所以吮龄，需要調(diào)用setRequestHeader方法來添加俭茧。】
3）編寫函數(shù)處理事件func1();
- 亂碼問題：
1）get請(qǐng)求：
—>亂碼產(chǎn)生原因：IE瀏覽器內(nèi)置的Ajax對(duì)象會(huì)使用“GBK”或“GB2312”對(duì)中文參數(shù)進(jìn)行編碼漓帚，而其他瀏覽器（Chrom母债、Firefox）內(nèi)置的Ajax對(duì)象會(huì)使用“utf-8”對(duì)中文參數(shù)進(jìn)行編碼。服務(wù)器端尝抖，默認(rèn)會(huì)使用“ISO-8859-1”去解碼毡们。因?yàn)榫幋a與解碼所使用的字符集（編碼格式）不一致，所以昧辽，會(huì)出現(xiàn)亂碼問題衙熔。
—> 亂碼解決：
① 設(shè)置服務(wù)器使用指定的字符集去解碼。比如奴迅，可以修改Tomcat的server.xml配置（conf文件夾中）青责，添加URIEncoding=“utf-8"（告訴服務(wù)器，對(duì)于所有的get請(qǐng)求取具，默認(rèn)使用“utf-8”去解碼）脖隶，修改之后重新啟動(dòng)服務(wù)器。
② 使用encodeURI()函數(shù)（JS中內(nèi)置函數(shù)）對(duì)請(qǐng)求地址進(jìn)行編碼暇检。encodeURI()函數(shù)會(huì)使用“utf-8”進(jìn)行編碼产阱。
xhr.open('get','check_username.do?username='+$F('username'),true);
var uir='check_username.do?username='+$F('username');
xhr.open('get',encodeURI(uri),true);
2）post請(qǐng)求：
—> 亂碼產(chǎn)生原因：所有瀏覽器（一般指三大瀏覽器：Chrom、Firefox块仆、IE）內(nèi)置的Ajax對(duì)象都會(huì)使用“utf-8”對(duì)中文參數(shù)進(jìn)行編碼构蹬，而服務(wù)器默認(rèn)情況下，會(huì)使用“ISO-8859-1”去解碼悔据。
【注意：Firefox特殊庄敛，本應(yīng)是亂碼，但能正常顯示科汗。通過截取消息頭發(fā)現(xiàn)Firefox會(huì)在消息頭中自動(dòng)添加”charset=utf-8"藻烤。】
—> 亂碼解決：服務(wù)器端添加：request.setCharacterEncoding("utf-8");
- 緩存問題
1）get請(qǐng)求：
—> 緩存原因：IE瀏覽器（其他瀏覽器沒這個(gè)問題）內(nèi)置的Ajax對(duì)象會(huì)檢查請(qǐng)求地址是否訪問過，如果訪問過怖亭，則不再向服務(wù)器發(fā)送請(qǐng)求涎显。
—> 解決方式：
① 在請(qǐng)求地址后面添加一個(gè)隨機(jī)數(shù)，用于欺騙IE兴猩；如：xhr.open('get','getNumber.do?'+Math.random(),true);
② 使用post方式發(fā)請(qǐng)求期吓。
【注意：】
1）href="javascript:;"相當(dāng)于href="#"，寫成href="javascript:;"一般要和onclick事件一起使用倾芝，表示a元素不再指向一個(gè)地址讨勤，而是點(diǎn)擊后觸發(fā)一個(gè)事件。
同步請(qǐng)求：
1）什么是同步請(qǐng)求
Ajax對(duì)象在向服務(wù)器發(fā)送請(qǐng)求時(shí)晨另，瀏覽器會(huì)鎖定當(dāng)前頁面悬襟，用戶不能夠?qū)Ξ?dāng)前頁面做任何的操作。
2）如何發(fā)送同步請(qǐng)求
open(請(qǐng)求方式拯刁，請(qǐng)求地址，false)
3）優(yōu)先使用異步逝段，因?yàn)橥綍?huì)影響性能垛玻，當(dāng)服務(wù)器端處理比較慢的時(shí)候，瀏覽器會(huì)鎖定當(dāng)前頁面（“假死”）奶躯。
4）只有當(dāng)客戶端需要等待服務(wù)器的響應(yīng)之后帚桩，才能繼續(xù)向下執(zhí)行時(shí)，應(yīng)該使用同步嘹黔。
【注意：Firefox的某些版本（低版本账嚎，如3、4）對(duì)于同步的支持比較特殊：
不能使用xhr.onreadystatechange來綁定一個(gè)事件處理函數(shù)儡蔓，而應(yīng)該在send方法執(zhí)行之后郭蕉，才調(diào)用xhr.responseText方法來獲得服務(wù)器返回的數(shù)據(jù)∥菇】跨域
當(dāng)協(xié)議召锈、子域名、主域名获询、端口號(hào)中任意一個(gè)不相同時(shí)的接口訪問即是跨域涨岁。
javaScript出于安全考慮，不允許跨域調(diào)用其他頁面的對(duì)象吉嚣。如a.com下的js不能調(diào)用b.com下的js對(duì)象梢薪。
*處理方法
1）代理方式JSONP：需要與服務(wù)器端配合。
—> 在服務(wù)器端的接口中添加jsonp;
—> 在web端的ajax的參數(shù)：dataType:”jsonp”,jsonp:”callback自定義返回名”尝哆；
2）在HTML5中已經(jīng)提供了跨域支持秉撇。只需要在服務(wù)器添加header:”Access-Control-Allow”和“Access-Control-Allow-Methods:POST,GET”
博客地址：Web基礎(chǔ)之Ajax
