在上篇文章給大家介紹了Ajax基礎詳解教程(一)，講到Ajax中open方法的第三個參數異步和同步的問題，今天呢，就來繼續往下嘮，先接著上回的代碼
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); //設置請求信息
xhr.send();//提交請求
//等待服務器返回內容
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) { //如果內容響應成功，并解析完成
alert( xhr.responseText ); //彈出內容
}
}
}
下面我們就講到 ，xhr.send()；這一句呢才是真正請求數據的，open方法只是設置了一些請求參數。
現在呢請求遞交了，就等服務器回應了，這個時候Ajax的一個屬性就要登場了，那就是 responseText ，ajax請求返回的內容都放在了這里面，而且不管你請求的內容是什么，這里存放的都是是字符串類型。
當然我們上文也提到了，要想用異步請求呢，這里需要條件判斷才知道服務端對請求的內容是否響應完畢，這個時候另一個屬性就要登場了，readyState，他代表著Ajax請求過程的不同的狀態，參數如下：
0 （初始化）還沒有調用open()方法
1 （載入）已調用send()方法，正在發送請求
2 （載入完成）send()方法完成，已收到全部響應內容
3 （解析）正在解析響應內容（因為收到的內容 并不是人能看懂的內容，所以需要解析）
4 （完成）響應內容解析完成，可以在客戶端調用了
由上我們可以得到，在狀態2的時候已經回應了請求的內容了，但是這個內容我們人看不懂撒，機器才懂，所以就有3，幫我們解析這個內容，然后解析完成就變成4了，這個時候的內容，咱們前端就可以用了。
狀態是有了，可咱們怎么能知道啥時候是啥狀態呢，這個時候我們就要用到一個監控狀態的事件了onreadystatechange事件，當狀態值改變的時候觸發會觸發這個事件，所以當狀態為4的時候我們再彈出內容。
上面的代碼基本已經了解了原理，不過當然不是最完善的，這個時候，我們雖然監控到了狀態，響應了內容，但是內容不一定就是對的呀，比如可能內容出錯了，可能我們請求了一個不存在的頁面，這個時候readyState是無法判斷錯誤的，我們需要知道內容是否正常，這個時候另一個屬性 status屬性就登場了，它代表的不是Ajax狀態，而是服務器(請求資源)的狀態， http狀態碼。狀態碼有很多，其中比較出名的就是200，成功狀態碼，和404 Not Found.其他的大家私下自行查閱。這里可以看到。
所以我們的代碼要做進一步的改進
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); //設置請求信息
xhr.send();//提交請求
//等待服務器返回內容
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if(xhr.status == 200) {//如果響應成功，并且服務器相應內容正確
alert( xhr.responseText );//彈出內容
}else{alert('出錯了' + xhr.status); //否則告知出錯并彈出錯誤原因
}
}
}
Ajax的大概流程就是這樣的。當然還存在一些細節方面的問題需要注意的，繼續往下看把。
工作當中 向后端傳遞數據存在的問題：
GET請求：
1 緩存問題：后臺更改了 因網址未變 所以會去緩存提取內容 而不是后臺
來看個栗子：假如我們要點擊按鈕彈出名字和年齡，因為GET請求是通過數值串連然后在網址傳遞數據的，所以我們的open方法可以直接這樣寫：
xhr.open('get','1.get.php?username=沐晴age=21',true);
后臺代碼不變
?php
header('content-type:text/html;charset="utf-8"'); //設置編碼格式，以及文檔類型
error_reporting(0);
$username = $_GET['username'];//獲取get請求方式的數據
$age = $_GET['age'];
echo "你的名字：{$username}，年齡：{$age}"; //輸出內容
現在點擊肯定會彈出你的名字沐晴，年齡21 了。
這個時候呢，瀏覽器會有一個緩存，如果下次訪問相同的網址，就會從緩存里取。
比如我現在想彈出，歡迎你，你的名字沐晴，年齡21，
echo "歡迎，你的名字：{$username}，年齡：{$age}"; //輸出內容
雖然后臺代碼變了，但是GET請求訪問網址依然是 1.get.php?username=沐晴age=21，所以后臺會去瀏覽器緩存找，結果彈出的還是原來的。大家可以自行測試。
所以，這個時候我們需要解決緩存問題。既然訪問網址不變的話會去找緩存，那么我們讓網址一直變不就好了。所以我們可以在后面加個一直變化的變量，比如系統事件，或者加一個隨機數都行，像下面這樣：
xhr.open('get','1.get.php?username=沐晴age=21'+new.Date.getTime(),true);
這樣就不會存在緩存問題了。有些人會這樣寫,會在后面給它起個名字t，這個時候如果后臺也有個變量叫t，可能就會出問題了，所以不是很推薦。
xhr.open('get','1.get.php?username=沐晴age=21t='+new.Date.getTime(),true);
post 請求
1 上節課我們知道，在表單里面傳統方式POST請求的內容是放在請求頭里的，那么Ajax是放在哪里的呢？
post 數據放在send里面作為參數傳遞。
2 還有一點是，我們上次我們知道表單里面的第三個參數：enctype: 提交的數據格式，默認是application/x-www-form-urlencoded，但是在Ajax中，你不寫就沒有，沒有默認值，所以我們需要在請求頭里面指定提交的數據格式，不然瀏覽器不知道用哪種格式解析。
所以post請求需要設置下面這兩句
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send('username=沐晴age=21');
無緩存問題，因為單單是往服務器提交數據，提交數據是不會被緩存的，獲取數據才會被緩存。這就是web的機制。
前面講的都是請求數據，現在來看一下后端接收請求，然后響應給我們的內容。
先看看后端對數據的處理：后端的數據類型也是很多的，我們不能直接把這樣的數據給前端吧，所以后端也需要做一定的處理，它有個方法 json_encode 可以根據數據類型不同，然后輸出不同格式?？聪旅娴睦踝?br />
?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
$arr1 = array('le','mo'); // 索引類型的數據
$arr2 = array('username'=>'le','age'=>32); // 2 對應關系的數據
echo json_encode($arr1); // ["le","mo"] 索引類型 輸出為數組格式
echo json_encode($arr2); // {"username":"le","age":32} 對應關系的數據 輸出為json格式
雖然后端輸出的內容格式上是數組和json但是我之前提到過 alert( xhr.responseText );//這里彈出的可都是字符串類型，所以盡管格式上看著是json和數組，但實際的數據類型還是字符串。
所以我們前端要對這些字符串進行轉換。這個時候就用到了兩個方法
1 stringify() : 把json對象轉化成字符串 轉換后的字符串是嚴格的json格式
2 parse() : 把字符串轉成對象，可以把后端返回的字符串 轉成JSON格式，對于json,只能轉換嚴格json格式的字符串，字符串的鍵 比較用雙引號括起來 像這樣 {"username":"le","age":32}
下面來看個實際的案例：
需求：點擊頁面按鈕，實現頁面不刷新，在下面顯示新聞列表 看注釋應該能看懂
!DOCTYPE HTML>
html>
head>
meta charset=utf-8">
title>無標題文檔/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 ); 后端傳來的格式是一個數組里面很多條json 自己可以測試下
var data = JSON.parse( xhr.responseText ); // 將后臺獲取的內容轉為json類型 每一個json里面有兩個鍵：title和date
var oUl = document.getElementById('ul1'); //獲取顯示新聞列表的節點
var html = '';
for (var i=0; idata.length; i++) { // 循環所有的json數據，并把每一條添加到列表中
html += 'li>a href="">'+data[i].title+'/a> [span>'+data[i].date+'/span>]/li>';
}
oUl.innerHTML = html; //把內容放在頁面里
} else {
alert('出錯了,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'=>'女總理默克爾滑雪時摔倒 骨盆斷裂','date'=>'2014-1-6'),
array('title'=>'駐英外交官撰文互稱對方國家為"伏地魔"','date'=>'2014-1-6'),
array('title'=>'安倍:望與中國領導人會面 中方:你關閉了大門','date'=>'2014-1-6'),
array('title'=>'揭秘臺灣駐港間諜網運作 湖北宜昌副市長被查','date'=>'2014-1-6'),
array('title'=>'：嫦娥三號是貨真價實的中國創造','date'=>'2014-1-6'),
);
echo json_encode($news);
好了今天的Ajax就嘮到這，希望大家有所收獲，如果有錯誤的希望大家指正，看到好多人看頭像進來的，倫家真是不知道說什么，還是希望大家能理性多提點意見拉拉，下次會講下對于Ajax的封裝，以及一些實際應用。
以上所述是小編給大家介紹的Ajax基礎詳解教程(二)的全部敘述，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
您可能感興趣的文章:- 一個AJAX自動完成功能的js封裝源碼[支持中文]
- 一個封裝的Ajax類
- JavaScript 封裝Ajax傳遞的數據代碼
- 自己動手封裝的 ajax
- ajax的工作原理以及異步請求的封裝介紹
- 對Jquery中的ajax再封裝,簡化操作示例
- 原生JS封裝Ajax插件(同域、jsonp跨域)
- jQuery Ajax 全局調用封裝實例代碼詳解
- Ajax基礎詳解教程(一)
- 原生JS封裝ajax 傳json，str，excel文件上傳提交表單(推薦)
- Ajax基礎教程之封裝(三)
