什么是Ajax
不刷新頁面的情況下從服務(wù)器獲取、提交數(shù)據(jù)的一種數(shù)據(jù)交互方式。
Ajax使用步驟
1\創(chuàng)建Ajax對象
var httpRequest = new XMLHttpRequset可以創(chuàng)建一個Ajax請求對象。
注意：瀏覽器的兼容問題
IE6以及之前的IE不支持上邊的創(chuàng)建愛你方法，這些版本的瀏覽器并沒有集成Ajax，而是當(dāng)做一個插件來處理,所以在創(chuàng)建時需要做兼容性處理:
if (window.XMLHttpRequest) {
? ? xmlHttp = new XMLHttpRequest;
} else{
// IE5\6使用的是ActiveXObject對象
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
2\配置Ajax的請求地址
使用Ajax的open方法來配置地址
open方法的三個參數(shù)：
數(shù)據(jù)提交方式
地址
是否異步請求
示例xmlHttp.open ("GET", “http://127.0.0.1/index.php”, "true")
數(shù)據(jù)的提交方式分為GET和POST兩種方式
GET:
1. 把提交的數(shù)據(jù)的名稱、對應(yīng)的值使用“？”拼接在url之后,如果有多個數(shù)據(jù)，則使用“&”連接
2. 參數(shù)的長度有限制，不能太長（由于各個瀏覽器對長度要求不一樣，所以不詳細(xì)說），否則會被截取
3. 只能傳遞字符串類型的參數(shù)。
POST：
1. 把提交的數(shù)據(jù)封裝在http頭字段中。
2. 參數(shù)長度可以在服務(wù)器端調(diào)整，因此理論上任意長度的參數(shù)都可以傳遞。
3. 可以傳遞任意類型的數(shù)據(jù)
異步與同步：
異步（true）：不會阻塞代碼，ajax的工作未完成，繼續(xù)執(zhí)行后邊的代碼
同步(false)：阻塞代碼，ajax的工作未完成，則等待ajax完成后在執(zhí)行后邊代碼當(dāng)后續(xù)的代碼需要用到前邊的請求數(shù)據(jù)時，需要用同步，否則用異步請求。
3\發(fā)送請求
xmlHttp對象的send方法發(fā)送上邊的請求: 示例xmlHttp.send()。
4\接收服務(wù)器返回的數(shù)據(jù)
responseText:ajax請求返回的內(nèi)容被存放在這個屬性里
readyState:ajax的工作狀態(tài)
on readystate change:當(dāng)readyState發(fā)生改變時，會觸發(fā)
status：該屬性代表服務(wù)器的工作狀態(tài)（也就是http狀態(tài)碼）：200表示請求成功
readyState返回碼含義
存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。
0: 請求未初始化
1: 服務(wù)器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應(yīng)已就緒
示例1：使用Ajax請求服務(wù)器中的一個新網(wǎng)頁資源
? ? ? ?
? ? ? ? function localXMLDoc () {
? ? ? ? ? ? var xmlHttp;
? ? ? ? ? ? // 1. 創(chuàng)建XMLHttpRequest對象
? ? ? ? ? ? if (window.XMLHttpRequest) {
? ? ? ? ? ? ? ? xmlHttp = new XMLHttpRequest;
} else{
// IE5\6使用的是ActiveXObject對象
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
? ? ? ? ? ? // 2. 每次readyState改變時，都會觸發(fā)：onreadystatechange事件
? ? ? ? ? ? xmlHttp.onreadystatechange = function () {
? ? ? ? // readyState返回碼含義
//存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。
//0: 請求未初始化
//1: 服務(wù)器連接已建立
//2: 請求已接收
//3: 請求處理中
//4: 請求已完成，且響應(yīng)已就緒
? ? ? ? ? ? ? ? if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
? ? ? ? ? ? ? ? ? ? alert(xmlHttp.responseText);
? ? ? ? ? ? ? ? ? ? document.getElementById('div').innerHTML = xmlHttp.responseText;
? ? ? ? ? ? ? ? } else{
//? ? ? ? ? ? ? ? ? ? alert('請求不成功，狀態(tài)'+xmlHttp.status);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? // 3. 創(chuàng)建請求事件
? ? ? ? ? ? xmlHttp.open("GET", "http://127.0.0.1/js.html",true);
? ? ? ? ? ? // 4. 發(fā)送請求
? ? ? ? ? ? xmlHttp.send();
? ? ? ? }
點擊加載
? ? ? ?
示例2：使用Ajax請求一個帶參數(shù)的URL
#search ,#hidden{
display: inline-block;
width: 200px;
border: 1px solid black;
}
? ? ? ?
function shoeHint(str) {
var xmlHttp;
// 如果傳入的字符串小于0則直接返回，并清空輸入框
if (str.length == 0) {
document.getElementById('search').innerHTML = "";
return ;
}
? ? ? ? ? ? ? ? // 創(chuàng)建XMLHttpRequest對象
? ? ? ? ? ? ? ? if (window.XMLHttpRequest) {
? ? ? ? ? ? ? ? ? ? xmlHttp = new XMLHttpRequest();
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? xmlHttp.onreadystatechange=function() {
? ? ? ? ? ? ? ? ? ? // 根據(jù)返回碼判斷請求是否成功
? ? ? ? ? ? ? ? if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
? ? ? ? ? ? ? ? ? ? document.getElementById('hidden').innerHTML = xmlHttp.responseText;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? // 配置請求地址
? ? ? ? ? ? ? ? xmlHttp.open("GET", "https://127.0.0.1/hello.php?q="+str,true);
? ? ? ? ? ? ? ? //開始請求
? ? ? ? ? ? ? ? xmlHttp.send();
? ? ? ? ? ? }
? ? ? ? ? ? document.crea
綜合示例：使用Ajax加載新聞標(biāo)題:
前端代碼
? ? ? ?
function getNews () {
var httpRequest = null;
httpRequest = new XMLHttpRequest();
? ? ? ? ? ? ? ? httpRequest.open("GET", "news.php/",true);
? ? ? ? ? ? ? ? httpRequest.send();
? ? ? ? ? ? ? ? httpRequest.onreadystatechange = function () {
? ? ? ? ? ? ? ? ? ? if (httpRequest.status == 200 && httpRequest.readyState == 4) {
? ? //? ? ? ? ? ? ? ? ? ? ? ? alert(httpRequest.responseText);
? ? ? ? ? ? ? ? ? ? ? ? // 將JSON數(shù)據(jù)轉(zhuǎn)換為普通數(shù)據(jù)
? ? ? ? ? ? ? ? ? ? ? ? ? ? var r = JSON.parse(httpRequest.responseText);
? ? ? ? ? ? ? ? ? ? ? ? ? ? //? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(r[0].title);
? ? ? ? ? ? ? ? ? ? ? ? var hml = '';
? ? ? ? ? ? ? ? ? ? ? ? for (var i = 0; i < r.length; i++) {
? ? ? ? ? ? ? ? ? ? ? ? ? ? // 拼接無序列表
? ? ? ? ? ? ? ? ? ? ? ? ? ? hml += "
}
document.getElementById('newsUl').innerHTML = hml;
}
}
}
? ? ? ? 獲取新聞
? ? ? ?
服務(wù)端代碼
? ? $news = array(
? ? ? ? array('title' => '樓繼偉財長:簡單提高個稅起征點不公平'),
? ? ? ? array('title' => '[銀行]回應(yīng)國有銀行經(jīng)營持續(xù)惡化:不良貸款率的確在溫和上升 今后還會上漲'),
? ? ? ? array('title' => '[改革]稱財稅改革進(jìn)度低于預(yù)期 營增改今年完成 難點在于納稅人多比較復(fù)雜'),
? ? ? ? array('title' => '[債務(wù)]回應(yīng)地方債增速加大:赤字率可適當(dāng)提高 稱借錢可買房 不能用于吃飯'),
? ? ? ? array('title' => '[相關(guān)]個人綜合稅方案已經(jīng)提交 談"勞動合同法保護(hù)企業(yè)不足":財政部不修法'),
? ? );
? ? echo json_encode($news);
?>
GET請求注意問題！！：
Ajax的緩存問題：如果反復(fù)請求同一個URL，則第二次請求的內(nèi)容是從瀏覽器緩存中拿到的，并不是真正服務(wù)器端的內(nèi)容，所以為了避免服務(wù)器內(nèi)容更改，但是客戶端從緩存中取數(shù)據(jù)，拿不到新數(shù)據(jù)，我們可以在get請求中的參數(shù)末端添加一個隨機數(shù)、或時間戳作為參數(shù):'http://127.0.0.1?username=zhangsan&password=12345&'+ new Date()
Ajax的亂碼問題：如果請求參數(shù)中有中文，則會因為編碼不統(tǒng)一導(dǎo)致后臺認(rèn)不出中文參數(shù)的情況，所以我們需要把中文參數(shù)進(jìn)行編碼：'http://127.0.0.1?username='+encodeURI('全政')+'&password=123456&'+ new Date()
POST請求注意問題！！
POST請求的參數(shù)不是拼接在url之后，而是放在send()方法里：send('username=zhangsan&password=12345&'+ new Date()')
請求編碼問題：form表單提交時，默認(rèn)的編碼是：enctype="application/x-www-form-urlencoded" 而Ajax請求需要手動設(shè)置編碼方式，在setRequestHeader('content-type', 'pplication/x-www-form-urlencoded')設(shè)置。
form提交數(shù)據(jù)示例：
? ? ? ?
? ?
? ?
? ?
? ?
