Ajax基礎(chǔ)詳解教程(二)

在上篇文章給大家介紹了Ajax基礎(chǔ)詳解教程(一)，講到Ajax中open方法的第三個(gè)參數(shù)異步和同步的問(wèn)題，今天呢，就來(lái)繼續(xù)往下嘮，先接著上回的代碼

var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject(‘Microsoft.XMLHTTP');
}
xhr.open('get','1.txt',true); //設(shè)置請(qǐng)求信息 
xhr.send();//提交請(qǐng)求
//等待服務(wù)器返回內(nèi)容 
xhr.onreadystatechange = function() { 
if ( xhr.readyState == 4 ) { //如果內(nèi)容響應(yīng)成功，并解析完成
alert( xhr.responseText ); //彈出內(nèi)容 
} 
}
} 

下面我們就講到 ，xhr.send()；這一句呢才是真正請(qǐng)求數(shù)據(jù)的，open方法只是設(shè)置了一些請(qǐng)求參數(shù)。

現(xiàn)在呢請(qǐng)求遞交了，就等服務(wù)器回應(yīng)了，這個(gè)時(shí)候Ajax的一個(gè)屬性就要登場(chǎng)了，那就是 responseText ，ajax請(qǐng)求返回的內(nèi)容都放在了這里面，而且不管你請(qǐng)求的內(nèi)容是什么，這里存放的都是是字符串類型。

當(dāng)然我們上文也提到了，要想用異步請(qǐng)求呢，這里需要條件判斷才知道服務(wù)端對(duì)請(qǐng)求的內(nèi)容是否響應(yīng)完畢，這個(gè)時(shí)候另一個(gè)屬性就要登場(chǎng)了，readyState，他代表著Ajax請(qǐng)求過(guò)程的不同的狀態(tài)，參數(shù)如下：

0 （初始化）還沒(méi)有調(diào)用open()方法
1 （載入）已調(diào)用send()方法，正在發(fā)送請(qǐng)求
2 （載入完成）send()方法完成，已收到全部響應(yīng)內(nèi)容
3 （解析）正在解析響應(yīng)內(nèi)容（因?yàn)槭盏降膬?nèi)容 并不是人能看懂的內(nèi)容，所以需要解析）
4 （完成）響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用了

由上我們可以得到，在狀態(tài)2的時(shí)候已經(jīng)回應(yīng)了請(qǐng)求的內(nèi)容了，但是這個(gè)內(nèi)容我們?nèi)丝床欢觯瑱C(jī)器才懂，所以就有3，幫我們解析這個(gè)內(nèi)容，然后解析完成就變成4了，這個(gè)時(shí)候的內(nèi)容，咱們前端就可以用了。

狀態(tài)是有了，可咱們?cè)趺茨苤郎稌r(shí)候是啥狀態(tài)呢，這個(gè)時(shí)候我們就要用到一個(gè)監(jiān)控狀態(tài)的事件了onreadystatechange事件，當(dāng)狀態(tài)值改變的時(shí)候觸發(fā)會(huì)觸發(fā)這個(gè)事件，所以當(dāng)狀態(tài)為4的時(shí)候我們?cè)購(gòu)棾鰞?nèi)容。

上面的代碼基本已經(jīng)了解了原理，不過(guò)當(dāng)然不是最完善的，這個(gè)時(shí)候，我們雖然監(jiān)控到了狀態(tài)，響應(yīng)了內(nèi)容，但是內(nèi)容不一定就是對(duì)的呀，比如可能內(nèi)容出錯(cuò)了，可能我們請(qǐng)求了一個(gè)不存在的頁(yè)面，這個(gè)時(shí)候readyState是無(wú)法判斷錯(cuò)誤的，我們需要知道內(nèi)容是否正常，這個(gè)時(shí)候另一個(gè)屬性 status屬性就登場(chǎng)了，它代表的不是Ajax狀態(tài)，而是服務(wù)器(請(qǐng)求資源)的狀態(tài)， http狀態(tài)碼。狀態(tài)碼有很多，其中比較出名的就是200，成功狀態(tài)碼，和404 Not Found.其他的大家私下自行查閱。這里可以看到。

所以我們的代碼要做進(jìn)一步的改進(jìn)

var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open('get','1.txt',true); //設(shè)置請(qǐng)求信息 
xhr.send();//提交請(qǐng)求
//等待服務(wù)器返回內(nèi)容 
xhr.onreadystatechange = function() { 
if ( xhr.readyState == 4 ) { 
if(xhr.status == 200) {//如果響應(yīng)成功，并且服務(wù)器相應(yīng)內(nèi)容正確
alert( xhr.responseText );//彈出內(nèi)容 
}else{alert('出錯(cuò)了' + xhr.status); //否則告知出錯(cuò)并彈出錯(cuò)誤原因
} 
}
} 

Ajax的大概流程就是這樣的。當(dāng)然還存在一些細(xì)節(jié)方面的問(wèn)題需要注意的，繼續(xù)往下看把。

工作當(dāng)中 向后端傳遞數(shù)據(jù)存在的問(wèn)題：

GET請(qǐng)求：

1 緩存問(wèn)題：后臺(tái)更改了 因網(wǎng)址未變 所以會(huì)去緩存提取內(nèi)容 而不是后臺(tái)

來(lái)看個(gè)栗子：假如我們要點(diǎn)擊按鈕彈出名字和年齡，因?yàn)镚ET請(qǐng)求是通過(guò)數(shù)值串連然后在網(wǎng)址傳遞數(shù)據(jù)的，所以我們的open方法可以直接這樣寫：

xhr.open('get','1.get.php?username=沐晴age=21',true); 

后臺(tái)代碼不變

?php
header('content-type:text/html;charset="utf-8"'); //設(shè)置編碼格式，以及文檔類型
error_reporting(0);
$username = $_GET['username'];//獲取get請(qǐng)求方式的數(shù)據(jù)
$age = $_GET['age'];
echo "你的名字：{$username}，年齡：{$age}"; //輸出內(nèi)容

現(xiàn)在點(diǎn)擊肯定會(huì)彈出你的名字沐晴，年齡21 了。

這個(gè)時(shí)候呢，瀏覽器會(huì)有一個(gè)緩存，如果下次訪問(wèn)相同的網(wǎng)址，就會(huì)從緩存里取。

比如我現(xiàn)在想彈出，歡迎你，你的名字沐晴，年齡21，

echo "歡迎，你的名字：{$username}，年齡：{$age}"; //輸出內(nèi)容 

雖然后臺(tái)代碼變了，但是GET請(qǐng)求訪問(wèn)網(wǎng)址依然是 1.get.php?username=沐晴age=21，所以后臺(tái)會(huì)去瀏覽器緩存找，結(jié)果彈出的還是原來(lái)的。大家可以自行測(cè)試。

所以，這個(gè)時(shí)候我們需要解決緩存問(wèn)題。既然訪問(wèn)網(wǎng)址不變的話會(huì)去找緩存，那么我們讓網(wǎng)址一直變不就好了。所以我們可以在后面加個(gè)一直變化的變量，比如系統(tǒng)事件，或者加一個(gè)隨機(jī)數(shù)都行，像下面這樣：

xhr.open('get','1.get.php?username=沐晴age=21'+new.Date.getTime(),true); 

這樣就不會(huì)存在緩存問(wèn)題了。有些人會(huì)這樣寫,會(huì)在后面給它起個(gè)名字t，這個(gè)時(shí)候如果后臺(tái)也有個(gè)變量叫t，可能就會(huì)出問(wèn)題了，所以不是很推薦。

xhr.open('get','1.get.php?username=沐晴age=21t='+new.Date.getTime(),true); 

post 請(qǐng)求

1 上節(jié)課我們知道，在表單里面?zhèn)鹘y(tǒng)方式POST請(qǐng)求的內(nèi)容是放在請(qǐng)求頭里的，那么Ajax是放在哪里的呢？

post 數(shù)據(jù)放在send里面作為參數(shù)傳遞。

2 還有一點(diǎn)是，我們上次我們知道表單里面的第三個(gè)參數(shù)：enctype: 提交的數(shù)據(jù)格式，默認(rèn)是application/x-www-form-urlencoded，但是在Ajax中，你不寫就沒(méi)有，沒(méi)有默認(rèn)值，所以我們需要在請(qǐng)求頭里面指定提交的數(shù)據(jù)格式，不然瀏覽器不知道用哪種格式解析。

所以post請(qǐng)求需要設(shè)置下面這兩句

xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send('username=沐晴age=21'); 

無(wú)緩存問(wèn)題，因?yàn)閱螁问峭?wù)器提交數(shù)據(jù)，提交數(shù)據(jù)是不會(huì)被緩存的，獲取數(shù)據(jù)才會(huì)被緩存。這就是web的機(jī)制。

前面講的都是請(qǐng)求數(shù)據(jù)，現(xiàn)在來(lái)看一下后端接收請(qǐng)求，然后響應(yīng)給我們的內(nèi)容。

先看看后端對(duì)數(shù)據(jù)的處理：后端的數(shù)據(jù)類型也是很多的，我們不能直接把這樣的數(shù)據(jù)給前端吧，所以后端也需要做一定的處理，它有個(gè)方法 json_encode 可以根據(jù)數(shù)據(jù)類型不同，然后輸出不同格式?？聪旅娴睦踝?br />

?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$arr1 = array('le','mo'); // 索引類型的數(shù)據(jù)
$arr2 = array('username'=>'le','age'=>32); // 2 對(duì)應(yīng)關(guān)系的數(shù)據(jù)
echo json_encode($arr1); // ["le","mo"] 索引類型 輸出為數(shù)組格式
echo json_encode($arr2); // {"username":"le","age":32} 對(duì)應(yīng)關(guān)系的數(shù)據(jù) 輸出為json格式 

雖然后端輸出的內(nèi)容格式上是數(shù)組和json但是我之前提到過(guò) alert( xhr.responseText );//這里彈出的可都是字符串類型，所以盡管格式上看著是json和數(shù)組，但實(shí)際的數(shù)據(jù)類型還是字符串。

所以我們前端要對(duì)這些字符串進(jìn)行轉(zhuǎn)換。這個(gè)時(shí)候就用到了兩個(gè)方法

1 stringify() : 把json對(duì)象轉(zhuǎn)化成字符串 轉(zhuǎn)換后的字符串是嚴(yán)格的json格式

2 parse() : 把字符串轉(zhuǎn)成對(duì)象，可以把后端返回的字符串 轉(zhuǎn)成JSON格式，對(duì)于json,只能轉(zhuǎn)換嚴(yán)格json格式的字符串，字符串的鍵 比較用雙引號(hào)括起來(lái) 像這樣 {"username":"le","age":32}

下面來(lái)看個(gè)實(shí)際的案例：

需求：點(diǎn)擊頁(yè)面按鈕，實(shí)現(xiàn)頁(yè)面不刷新，在下面顯示新聞列表 看注釋應(yīng)該能看懂

!DOCTYPE HTML>
html>
head>
meta charset=utf-8">
title>無(wú)標(biāo)題文檔/title>
!--script src="jquery.js">/script>-->
script>
window.onload = function() {
var oBtn = document.getElementById('btn'); 
oBtn.onclick = function() {
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} 
xhr.open('get','getNews.php',true);
xhr.send();
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
//alert( xhr.responseText ); 后端傳來(lái)的格式是一個(gè)數(shù)組里面很多條json 自己可以測(cè)試下
var data = JSON.parse( xhr.responseText ); // 將后臺(tái)獲取的內(nèi)容轉(zhuǎn)為json類型 每一個(gè)json里面有兩個(gè)鍵：title和date
var oUl = document.getElementById('ul1'); //獲取顯示新聞列表的節(jié)點(diǎn)
var html = '';
for (var i=0; idata.length; i++) { // 循環(huán)所有的json數(shù)據(jù)，并把每一條添加到列表中
html += 'li>a href="">'+data[i].title+'/a> [span>'+data[i].date+'/span>]/li>';
}
oUl.innerHTML = html; //把內(nèi)容放在頁(yè)面里
} else {
alert('出錯(cuò)了,Err：' + xhr.status);
}
}
}
}
}
/script>
/head>
body>
input type="button" value="按鈕" id="btn" />
ul id="ul1">/ul>
/body>
/html> 
?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$news = array(
array('title'=>'女總理默克爾滑雪時(shí)摔倒 骨盆斷裂','date'=>'2014-1-6'),
array('title'=>'駐英外交官撰文互稱對(duì)方國(guó)家為"伏地魔"','date'=>'2014-1-6'),
array('title'=>'安倍:望與中國(guó)領(lǐng)導(dǎo)人會(huì)面 中方:你關(guān)閉了大門','date'=>'2014-1-6'),
array('title'=>'揭秘臺(tái)灣駐港間諜網(wǎng)運(yùn)作 湖北宜昌副市長(zhǎng)被查','date'=>'2014-1-6'),
array('title'=>'：嫦娥三號(hào)是貨真價(jià)實(shí)的中國(guó)創(chuàng)造','date'=>'2014-1-6'),
);
echo json_encode($news); 

好了今天的Ajax就嘮到這，希望大家有所收獲，如果有錯(cuò)誤的希望大家指正，看到好多人看頭像進(jìn)來(lái)的，倫家真是不知道說(shuō)什么，還是希望大家能理性多提點(diǎn)意見(jiàn)拉拉，下次會(huì)講下對(duì)于Ajax的封裝，以及一些實(shí)際應(yīng)用。

以上所述是小編給大家介紹的Ajax基礎(chǔ)詳解教程(二)的全部敘述，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！