史上最全的Ajax基礎詳解

同步請求和異步請求

先解釋一下同步和異步的概念：

同步是指：發送方發出數據後，等接收方發回響應之後才發下一個數據包的通信方式。

異步是指：發送方發出數據後，不等接收方發回響應，接着發送下個數據包的通信方式。

同步請求:

客戶端請求(等待)->服務端處理->響應->頁面載入 （缺乏對象:XMLhttpRequest）
這時候若是有錯誤，只能再次發送請求，再次等待

異步請求：

好比當你填寫郵箱地址的時候，頁面當時就把郵箱地址發送到了服務器（也就是頁面發送了一個請求），服務器作處理和響應，獲得你的郵箱地址填寫重複了，把響應結果發給頁面，在這個過程當中你仍然能夠填寫其餘內容，這時候服務器會提示你有重複的郵箱地址，在頁面上的表現只是郵箱地址旁別加了一行字或者把整個文本框標紅，並無從新刷你的頁面，全部的填寫錯誤會實時的顯示出來，你也會實時的更正。這個過程當中，你會有整個頁面的刷新，也不會有整個頁面的提交和等待，最後提交，一切都會搞定的

總結：頁面上的操做和服務器端的操做互相之間不會形成阻塞

2、http是計算機經過網絡進行通訊的規則

1 - 做用:客戶端向服務端發送請求信息和服務

*客戶端:本身的計算機的瀏覽器(web瀏覽器)

*服務端:服務器,一臺高性能的計算機,做爲存儲,處理網絡上的數據,信息(web服務器)
服務器指一個管理資源併爲用戶提供服務的計算機軟件，一般分爲文件服務器、數據庫服務器和應用程序服務器。運行以上軟件的計算機或計算機系統也被稱爲服務器。

2 - 特色：是一種無狀態的協議(不創建持久的鏈接,服務端不保留鏈接的信息)

3 . 一個完整的HTTP請求過程的七個步驟:

創建TCP鏈接
web瀏覽器向web服務器發送請求命令
web瀏覽器發送請求頭信息
web服務器應答
web服務器發送應答頭信息
web服務器向瀏覽器發送數據
web服務器關閉TCP鏈接

4 - HTTP請求的四部分組成:

1.HTTP請求的方法或動做,好比GET仍是POST 2.正在請求的URL,總得知道請求的地址是什麼 3.請求頭,包含一些客戶端環境信息,身份驗證信息等 4.請求體,也就是請求正文,請求正文中能夠包含客戶提交的查詢字符串信息,表單信息等等;

5 - HTTP請求方法

*GET:通常用於信息獲取,用get請求-->查詢或獲取的操做 使用URL傳遞參數 對所發送信息的數量有限制,通常在2000個字 *POST: 通常用於修改服務器上的數據.好比:新建,修改,刪除,發送表單數據 對所發送信息的數量無限制

6 - HTTP響應通常由三部分組成:

1.一個數字和文字組成的狀態碼,用來顯示請求是成功仍是失敗 2.響應頭:響應頭也和請求頭同樣包含許多有用的信息,例如 服務器類型,日期時間,內容類型和長度等 3.響應體,也就是響應正文

7 - HTTP狀態碼

100:信息類,表示web瀏覽器請求,正在進一步的處理中 200:成功,表示用戶請求被正確接收正在進一步的處理中 200 OK 300:表示請求沒有成功,客戶端必須採起進一步的動做 400:客戶端錯誤,表示客戶端提交的請求有錯誤 例如:404 NOT Found,意味着 請求中所引用的文檔不存在 500:服務器錯誤 表示服務器不能完成對請求的處理,如500

---

Ajax基礎

---

1、什麼是Ajax

AJAX即「Asynchronous Javascript And XML」（ 異步 JavaScript和XML），
AJAX不是一種新的編程語言，而是一種用於建立更好更快以及交互性更強的 Web 應用程序的技術。
它是一套綜合了多項技術的瀏覽器端網頁開發技術。
這些技術包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.

2、Ajax原理

運用HTML和css來實現頁面,表達信息

經過瀏覽器的XmlHttpRequest(Ajax引擎)對象

來向服務器(發送異步請求)並(接收服務器)的響應數據，

而後用javascript來操做DOM，實現動態局部刷新。

3、Ajax實現過程

😆

一般是

第一步:Javascript監聽瀏覽器網頁事件(點擊,提交,更改等) 第二步:由javascript建立Ajax引擎對象 第三步:經過Ajax引擎對象發出請求 第四步:Ajax引擎等待而且接受服務器的響應內容 第五步:javascript再從 *Ajax引擎對象* 中獲取響應內容, 而且經過dom改變網頁界面顯示效果

1.建立Ajax引擎對象

就是XMLHtttpRequest對象,全部現代瀏覽器均支持XMLHttpRequest對象

(IE5 和 IE6 使用 ActiveXObject)它同時也是一個Javascript對象.
Ajax引擎(XMLHttpRequest)

兼容處理

var xhr = null; if (window.XMLHttpRequest) { //全部現代瀏覽器(IE7+.Firefox.Chrome.Safari以及opera) xhr = new XMLHttpRequest; }else{ //老版本的Internet Explorer使用ActiveX對象 xhr = new ActiveXObject("Microsoft.XMLHttp"); }

2.配置請求對象的信息

xhr.open('GET/POST','url地址',['是否異步']);

注意：若是使用post請求,就必定要設置請求頭

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gb2312");

3.發送請求

xhr.send([post請求參數字符串]);
發送請求分爲兩種狀況:
1.監控用戶的事件(onclick,onchange等),經過ajax發送請求
2.監控瀏覽器的事件(onload),經過ajax發送請求.

4.監聽Ajax引擎對象的改變(是否正確作出了響應)

xmlHttpRequest.onreadystatechange = function(){ if (xmlHttpRequest.readyState== 4 && xmlHttpRequest==200) { //xmlHttpRequest.responseText //xmlHttpRequest.responseText } }

4.1 - 詳解onreadystatechange

onreadystatechange屬性是一個方法,
監控到響應內容的返回,
根據響應內容使用javascript改變當前頁面的部分html代碼,從而達到不刷新改變局部html代碼.
當Ajax引擎的狀態發生改變時都會執行onreadystatechange屬性對應的方法

>>其餘方法：
    abort:取消當前請求 getAllResponseHeaders:獲取響應的全部http頭 getResponseHeader:從響應信息中獲取指定的http頭 open(方式get/post，url地址，同步異步): 建立一個新的http請求，打開請求，並指定此請求的方法、URL以及驗證信息(用戶名/密碼) send():發送請求到http服務器並接收回應 setRequestHeader:單獨指定請求的某個http頭，header()設置http頭協議信息 >>其餘屬性： onreadystatechange:指定當readyState屬性改變時的事件處理句柄。 readyState:返回當前請求的狀態，ajax行進過程當中不一樣狀態 responseBody:將回應信息正文以unsigned byte數組形式返回. responseStream:以Ado Stream對象的形式返回響應信息。 responseText:將響應信息做爲字符串返回.只讀 responseXML:將響應信息格式化爲Xml Document對象並返回，只讀 status:返回當前請求的http狀態碼. 200 ok 304 緩存； 404 not found; 403 沒有權限 501 服務器級別錯誤 statusText:返回當前請求的響應行狀態文本， ok not found forbidden

4.2 - 詳解Ajax引擎的狀態屬性 readyState(0 1 2 3 4)

*0.請求未初始化 *1.服務器鏈接已創建 *2.請求已接收 *3.請求處理中 *4.請求已完成,而且響應已就緒

當Ajax引擎的狀態屬性爲readyState爲4時,說明服務器的響應已經發送給Ajax請求了.

可是響應的狀態嗎爲200時:說明響應的內容是正確的,這時纔會根據相應內容對當前頁面的html處理

總結：

基本示例：
var xhr = new XMLHttpRequest; xhr.open('GET/POST','url地址',['是否異步']); xhr.send([post請求參數字符串]); xhr.onreadystatechange = function(){ if (xmlHttpRequest.readyState== 4 && xmlHttpRequest==200) { //作一些事情 //xhr.responseText } }

4、爲何使用Ajax？

優勢:

使用Ajax的最大優勢，就是能在不更新整個頁面的前提下維護數據。
這使得Web應用程序更爲迅捷地響應用戶動做，並避免了在網絡上發送那些沒有改變的html代碼信息。

1.減輕服務器負擔，按須要得到數據。 2.無刷新更新頁面，減小用戶的實際和心理的等待時間。 3.更好的用戶體驗。 4.減輕寬帶的負擔。 5.主流瀏覽器支持

缺點:

1.AJAX的程序必須測試針對各個瀏覽器的兼容性。 2.AJAX更新頁面內容的時候並無刷新整個頁面，所以，網頁的後退功能是失效的；需提醒用戶 3.對搜索引擎支持很差。