Ajax 技術一，Ajax技術_PHP教程

Ajax 技術一，Ajax技術

一、Ajax概述

1、曆史起源

1998年，微軟公司Outlook Web Access研發小組在當時的IE瀏覽器中整合了一種技術，可以在用戶端無重新整理的前提下向伺服器端發送Http請求，這門技術稱之為"XMLHTTP"。

 

2005年，Google公司在自家的多款產品（Gmail郵箱、Google Suggest搜尋建議、Google地圖）中應用了Ajax技術，從此Ajax火的一塌糊塗…

2、什麼是Ajax技術

• Asynchronous ：非同步
• JavaScript ：Javascript技術
• And ：和
• XML ：可延伸標記語言 (XML)，主要用於資料的傳輸與儲存

 

所謂的Ajax技術就是非同步Javascript和XML，由於XML主要用於資料的傳輸與儲存，由此可知：Ajax的核心就是非同步Javascript。

3、Web技術

用戶端語言：

• Html
• Css
• Javascript

服務端語言：

• ASP(ASP.NET)
• JSP
• PHP

由於Ajax是非同步Javascript，所以我們可以確定：Ajax也是運行於用戶端瀏覽器的。

4、Ajax工作模式

1）同步請求：

同步請求在網速比較慢的情況下，其體驗度是非常不理想的，因為給使用者的感覺整個請求就是不連續的過程。

2）非同步請求：

由可知，當使用者發送請求時，系統首先把請求發送Ajax對象，Ajax對象在對請求進行發送，然後伺服器端對其請求進行處理，但是在處理還沒有完成的過程中，其就會返回一部分資料給用戶端，所以對於使用者而言，整個請求是一個連續的過程，體驗度非常好。

5、Ajax應用情境

① 表單驗證（即時驗證使用者名稱是否唯一）

② 百度下拉搜尋

③ 無重新整理分頁

④ WebAPP手機+PHP背景程式（手機APP）

6、快速入門

demo01_rumen.html

demo01.php

運行結果：

二、Ajax對象

1、為什麼需要Ajax對象

記住：使用Ajax技術有一個前提，必須要建立一個Ajax對象。

2、如何建立Ajax對象

基於IE核心瀏覽器（IE8以下的IE瀏覽器、各種瀏覽器的相容模式）

var Ajax對象 = new ActiveXObject('Microsoft.XMLHTTP');

 

基於W3C核心瀏覽器（Firefox、Google瀏覽器、各種瀏覽器的極速模式）

var Ajax對象 = new XMLHttpRequest();

3、解決Ajax對象的相容性問題

① 建立一個public.js檔案，作為核心程式碼程式庫

② 定義一個$函數，用於擷取指定id的dom對象

③ 定義一個公用函數，如createXhr()，用於建立Ajax對象

4、Ajax對象中的屬性和方法

常用方法

• open(method,url) ：初始化Ajax對象（佈建要求類型與請求地址）
• setRequestHeader(header,value) ：佈建要求頭

參數說明：

header：要求標頭

value：值

• send(content) ：發送Ajax請求

參數說明：

content：在請求空白行傳遞的參數，如果是get請求，此值為null

常用屬性

• onreadystatechange ：當Ajax狀態代碼發生改變時所觸發的回呼函數
• readyState ：Ajax狀態代碼

0：表示對象已建立，但未初始化，調用了createXhr方法，但是未調用open方法

1：表示對象已初始化，但未發送，調用了open方法，但是未調用send方法

2：已調用send方法進行請求

3：正在接收資料（接收到一部分）

4：接收完成

• status ：響應狀態代碼，200接收完成，404未找到頁面
• statusText（瞭解） ：響應狀態文本
• reponseText ：響應結果
• responseXML ：響應結果

如果伺服器端返回字串，則使用xhr.responseText進行接收

如果伺服器端返回XML格式的資料，則使用xhr.responseXML進行接收

三、Ajax中的get請求

1、Ajax口訣：Ajax中get請求五步走

① 建立Ajax對象

② 設定回呼函數

③ 初始化Ajax對象

④ 發送Ajax請求

⑤ 判斷與執行

2、使用Ajax技術發送get請求

demo04.php

3、使用Ajax中的get請求進行傳值操作

demo05.php

4、幾個小問題

1）問題：我們在使用Ajax時發現，我們在伺服器端都是通過echo語句來返回資料的，這個地方可不可以通過return語句代替呢？

答：雖然echo語句和return語句都有返回的含義，但是兩者返回的位置是不同的，return語句是返回資料給伺服器端，而echo輸出主要是返回輸出資料到用戶端（瀏覽器）。所以在伺服器端只能使用echo語句而不能使用return語句

 

2）問題：在Ajax發送請求時，如果請求的頁面不存在會出現什麼結果？

答：如果當我們請求的伺服器端頁面不存在，其Ajax也會返回如下結果：

但是在實際項目開發中，如果出現以上彈窗對使用者的體驗並不好，所以必須要禁止這種行為，

我們可以通過判斷伺服器端的響應狀態代碼來避免以上情況的產生：

以上代碼也可以進一步簡化為如下形式：

 

3）問題：在實際項目開發中，以上的判斷語句xhr.readyState==4與xhr.status==200位置是否可以調換？

答：不可以，因為在實際項目開發中，一定是先判斷Ajax狀態代碼，當其為4時才代表完全接收到伺服器端返回的資料，而status代表的是在readyState等於4的基礎上判斷伺服器端的返回狀態代碼，所以兩者之間的順序是不可以調換的。

 

4）問題：Ajax在開發中如何進行調試呢？

① 如果是Ajax語法錯誤，我們可以直接通過IE的狀態列或Firefox中的Firebug外掛程式中的控制台直接捕獲。

② 伺服器端錯誤，如果在開發時，發現返回結果異常，我們可以通過httpwatch或W3C瀏覽器的網路面板進行調試。

httpwatch：

Firebug：

Google：

③ 如果在開發中遇到邏輯錯誤，如何處理

5、實際應用：使用Ajax驗證使用者名稱是否唯一

demo06.php

說明：在實際應用案例中，我們可以通過Ajax+PHP完成使用者名稱是否唯一的驗證，但是運行時發現，以上案例在IE瀏覽器下會產生緩衝問題，導致請求結果異常，實際項目開發中，如何解決這個問題呢？

四、解決Ajax中的緩衝問題

1、什麼是IE緩衝

當我們在IE瀏覽器下第一次向某個url地址發送get請求時，系統會自動將請求的資源檔進行緩衝，並存放於用戶端瀏覽器中，我們把這個檔案就稱之為"IE緩衝"。

2、IE緩衝作用

微軟公司在自家的IE瀏覽器中使用緩衝技術，是為了讓使用者可以快速的擷取伺服器端的響應資料。

實現過程：當IE瀏覽器對請求的資源檔緩衝後，當下一次向同一url發送請求時，系統會自自動調用快取檔案。但是其在實際應用中也存在一個缺點：如果伺服器端資料有更新，那麼我們無法即時的擷取最新資料。

3、解決Ajax技術中get請求的緩衝問題

1）使用隨機數解決緩衝問題

運行結果：

說明：雖然我們可以使用隨機數來人為變更要求的url地址，讓每次請求的url都不一致。但是隨機數無法保證每次產生的隨機數都是唯一的，也可能出現重複的情況。另外，每次請求時都會產生快取檔案，所以隨機數會在用戶端產生大量的快取檔案。

2）使用時間戳解決緩衝問題（重點）

在實際開發中，我們知道時間戳記是永遠都不會重複的，所以可以使用此方法來解決緩衝問題。

運行結果：

說明：我們雖然可以使用時間戳解決緩衝問題，但是其也會在用戶端產生大量的快取檔案。

3）使用檔案的最後修改時間來解決緩衝問題（重要）

緩衝核心機理：

如果想解決緩衝問題，我們可以人為改變If-Modified-Since其值，讓其每次校檢時都與伺服器的資源檔不一致即可解決緩衝問題。

運行結果：

說明：以上程式雖然可以解決緩衝問題，那麼其是不是也要產生大量的快取檔案呢？

答：不會，因為我們每次請求的url地址都是一致的，所以其只會產生1個快取檔案，當第二次請求時，系統只會更新快取檔案而已，而不會重建。

4）使用禁止緩衝功能來解決Ajax的緩衝問題

可以在伺服器端頁面添加以下菜單，這樣就可以告訴瀏覽器不要緩衝當前頁面，從而解決緩衝問題：

header函數主要功能：告訴瀏覽器執行某些操作，以上代碼代表告訴瀏覽器不要緩衝當前頁面，每次請求時都需要重新擷取最新資料，從而從根本上禁用緩衝。

運行結果：

以上程式從根本上禁用了緩衝，終極解決方案。

五、Ajax中的post請求

1、get請求與post請求的區別

① 傳參方式不同

get請求在傳參時是把參數追加在url的尾部

post請求在傳參時是把參數追加在請求空白行位置

② 安全性不同

post請求安全性要略高於get請求

③ 傳參時參數大小不同

get請求傳參時其值最大為2kb，而post請求理論上沒有大小限制，但是在實際項目開發中，主要受到php.ini檔案的影響，一般情況下最大值為8M或2M

④ 要求標頭資訊不同

get請求：

post請求：

相對比而言，post請求比get請求多了一個要求標頭資訊：

Content-type:application/x-www-form-urlencoded

2、Ajax中post請求六步走

第一步：建立Ajax對象

第二步：設定回呼函數

第三步：初始化Ajax對象

第四步：佈建要求頭資訊（設定Content-type）

第五步：發送Ajax請求

第六步：判斷與執行

demo08.php

3、實際應用：使用Ajax+PHP實現無重新整理登陸功能

demo09.php

六、Ajax中的xml資料

1、什麼是XML

所謂的XML就是可延伸標記語言 (XML)，主要實現大批量資料的傳輸與儲存

2、XML執行原理圖

PHP可以實現對XML的解析操作，一共提供了兩種解決方案：

PHP DOM模型（實現增刪改操作）

PHP SimpleXML模型（實現查詢操作）

 

1）PHP DOM模型（非標準DOM模型）

① 開闢記憶體空間

② 載入xml檔案到記憶體形成DOM樹結構

【非標準DOM模型】

【標準DOM模型】

Javascript中的DOM模型就是標準的DOM模型，在實際應用中，標準DOM模型和非標準DOM模型主要區別就在於：

非標準DOM模型：找點à直接通過nodeValue屬性輸出其值

標準DOM模型：找點à找其子節點à通過nodeValue屬性輸出文本節點值

3、使用Ajax+XML實現大批量資料的解析

例：使用Ajax+XML返回兩個數的四則運算結果

要使用到的知識：

childNodes：擷取當前元素的所有子項目，返回資料

demo10.php

http://www.bkjia.com/PHPjc/1117677.htmlwww.bkjia.comtruehttp://www.bkjia.com/PHPjc/1117677.htmlTechArticleAjax 技術一，Ajax技術 一、Ajax概述 1、曆史起源 1998年，微軟公司Outlook Web Access研發小組在當時的IE瀏覽器中整合了一種技術，可以在用戶端...

