什么是Ajax
不刷新頁面的情況下從服務器獲取泊愧、提交數(shù)據(jù)的一種數(shù)據(jù)交互方式童谒。
Ajax使用步驟
1\創(chuàng)建Ajax對象
var httpRequest = new XMLHttpRequset可以創(chuàng)建一個Ajax請求對象。
注意：瀏覽器的兼容問題
IE6以及之前的IE不支持上邊的創(chuàng)建愛你方法达吞，這些版本的瀏覽器并沒有集成Ajax铁坎，而是當做一個插件來處理,所以在創(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ù)的名稱、對應的值使用“？”拼接在url之后,如果有多個數(shù)據(jù)场绿，則使用“&”連接
2. 參數(shù)的長度有限制剖效，不能太長（由于各個瀏覽器對長度要求不一樣，所以不詳細說）焰盗，否則會被截取
3. 只能傳遞字符串類型的參數(shù)璧尸。
POST：
1. 把提交的數(shù)據(jù)封裝在http頭字段中。
2. 參數(shù)長度可以在服務器端調(diào)整熬拒，因此理論上任意長度的參數(shù)都可以傳遞爷光。
3. 可以傳遞任意類型的數(shù)據(jù)
異步與同步：
異步（true）：不會阻塞代碼，ajax的工作未完成澎粟，繼續(xù)執(zhí)行后邊的代碼
同步(false)：阻塞代碼蛀序，ajax的工作未完成，則等待ajax完成后在執(zhí)行后邊代碼當后續(xù)的代碼需要用到前邊的請求數(shù)據(jù)時活烙，需要用同步徐裸，否則用異步請求。
3\發(fā)送請求
xmlHttp對象的send方法發(fā)送上邊的請求: 示例xmlHttp.send()啸盏。
4\接收服務器返回的數(shù)據(jù)
responseText:ajax請求返回的內(nèi)容被存放在這個屬性里
readyState:ajax的工作狀態(tài)
on readystate change:當readyState發(fā)生改變時重贺，會觸發(fā)
status：該屬性代表服務器的工作狀態(tài)（也就是http狀態(tài)碼）：200表示請求成功
readyState返回碼含義
存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化回懦。
0: 請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成气笙，且響應已就緒
示例1：使用Ajax請求服務器中的一個新網(wǎng)頁資源
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
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: 服務器連接已建立
//2: 請求已接收
//3: 請求處理中
//4: 請求已完成，且響應已就緒
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();
}
</script>
</head>
<body>
<button onclick="localXMLDoc()">點擊加載</button>
<div id = 'div'></div>
</body>
</html>
示例2：使用Ajax請求一個帶參數(shù)的URL
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#search ,#hidden{
display: inline-block;
width: 200px;
border: 1px solid black;
}
</style>
<script type="text/javascript">
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
</script>
</head>
<body>
<input type="text" name="search" id="search" value="" placeholder="" onkeyup="shoeHint(this.value)"/>
<br /><div id = "hidden" >
</div>
</body>
</html>
綜合示例：使用Ajax加載新聞標題:
前端代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
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 += "<li>"+"<a href='#'>" +r[i].title+"</a>"+"</li>";
}
document.getElementById('newsUl').innerHTML = hml;
}
}
}
</script>
</head>
<body>
<button id = "get" onclick="getNews()">獲取新聞</button>
<ul id = "newsUl">
</ul>
</body>
</html>
服務端代碼
<?php
$news = array(
array('title' => '樓繼偉財長:簡單提高個稅起征點不公平'),
array('title' => '[銀行]回應國有銀行經(jīng)營持續(xù)惡化:不良貸款率的確在溫和上升 今后還會上漲'),
array('title' => '[改革]稱財稅改革進度低于預期 營增改今年完成 難點在于納稅人多比較復雜'),
array('title' => '[債務]回應地方債增速加大:赤字率可適當提高 稱借錢可買房 不能用于吃飯'),
array('title' => '[相關(guān)]個人綜合稅方案已經(jīng)提交 談"勞動合同法保護企業(yè)不足":財政部不修法'),
);
echo json_encode($news);
?>
GET請求注意問題！稚晚！：
Ajax的緩存問題：如果反復請求同一個URL崇堵，則第二次請求的內(nèi)容是從瀏覽器緩存中拿到的，并不是真正服務器端的內(nèi)容客燕，所以為了避免服務器內(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)一導致后臺認不出中文參數(shù)的情況，所以我們需要把中文參數(shù)進行編碼：'http://127.0.0.1?username='+encodeURI('全政')+'&password=123456&'+ new Date()
POST請求注意問題ａＣ摸柄！
- POST請求的參數(shù)不是拼接在url之后，而是放在
send()方法里：send('username=zhangsan&password=12345&'+ new Date()')
- 請求編碼問題：form表單提交時既忆，默認的編碼是：
enctype="application/x-www-form-urlencoded"而Ajax請求需要手動設(shè)置編碼方式驱负，在setRequestHeader('content-type', 'pplication/x-www-form-urlencoded')設(shè)置。
form提交數(shù)據(jù)示例：
<form action="" method="post" enctype="application/x-www-form-urlencoded">
<input type="submit" value=""/>
</form>
