Ajax基礎詳解教程二

var obtn = document.getelementbyid('btn');

obtn.onclick = function()else

xhr.open('get','1.txt',true); //設定請求資訊

xhr.send();//提交請求

//等待伺服器返回內容

xhr.onreadystatechange = function()

}}下面我們就講到，xhr.send()；這一句呢才是真正請求資料的，open方法只是設定了一些請求引數。

現在呢請求遞交了，就等伺服器www.cppcns.com回應了，這個時候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()else

xhr.open('get','1.txt',true); //設定請求資訊

xhr.send();//提交請求

//等待伺服器返回內容

xhr.onreadystatechange = function() else

}}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 "你的名字：，年齡："; //輸出內容

現在點選肯定會彈出你的名字沐晴，年齡21 了。

這個時候呢，瀏覽器會有乙個快取，如果下次訪問相同的**，就會從快取裡取。

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

echo "歡迎，你的名字：，年齡："; //輸出內容

雖然後台**變了，但是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=程式設計客棧21&t='+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的機制。

前面講的都是請求資料hkwcn，現在來看一下後端接收請求，然後響應給我們的內容。

先看看後端對資料的處理：後端的資料型別也是很多的，我們不能直接把這樣的資料給前端吧，所以後端也需要做一定的處理，它有個方法 json_encode 可以根據資料型別不同，然後輸出不同格式。看下面的栗子

<?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); // 對應關係的資料輸出為json格式

雖然後端輸出的內容格式上是陣列和json但是我之前提到過 alert( xhr.responsetext );//這裡彈出的可都是字串型別，所以儘管格式上看著是json和陣列，但實際的資料型別還是字串。

所以我們前端要對這些字串進行轉換。這個時候就用到了兩個方法

1 stringify() : 把json物件轉化成字串轉換後的字串是嚴格的json格式

2 parse() : 把字串轉成物件，可以把後端返回的字串轉成json格式，對於json,只能轉換嚴格json格式的字串，字串的鍵比較用雙引號括起來像這樣

下面來看個實際的案例：

需求：點選頁面按鈕，實現頁面不重新整理，在下面顯示新聞列表看注釋應該能看懂

無標題文件

<?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基礎詳解教程二

Ajax基礎詳解2

Ajax全面基礎學習（二）

VUE2 X全教程基礎詳解（二）

Ajax基礎詳解教程 二

Ajax基礎詳解2

Ajax全面基礎學習（二）

VUE2 X全教程 基礎詳解（二）

相關推薦

Ajax基礎詳解教程二

VUE2 X全教程基礎詳解（二）