http填坑2&Ajax基礎詳解
這篇文章是網上看到的一片博文，比較幹練的總結了AJAX的基礎東西和相關的http的知識，適合AJAX入門。
同步請求和非同步請求
先解釋一下同步和非同步的概念：
同步是指：傳送方發出資料後，等接收方發回響應以後才發下一個數據包的通訊方式。
非同步是指：傳送方發出資料後，不等接收方發回響應，接著傳送下個數據包的通訊方式。
同步請求:
客戶端請求(等待)->服務端處理->響應->頁面載入 （缺少物件:XMLhttpRequest）
這時候如果有錯誤，只能再次傳送請求，再次等待
非同步請求：
比如當你填寫郵箱地址的時候，頁面當時就把郵箱地址傳送到了伺服器（也就是頁面傳送了一個請求），伺服器做處理和響應，得到你的郵箱地址填寫重複了，把響應結果發給頁面，在這個過程中你仍然可以填寫其他內容，這時候伺服器會提示你有重複的郵箱地址，在頁面上的表現只是郵箱地址旁別加了一行字或者把整個文字框標紅，並沒有重新刷你的頁面，所有的填寫錯誤會實時的顯示出來，你也會實時的更正。這個過程中，你會有整個頁面的重新整理，也不會有整個頁面的提交和等待，最後提交，一切都會搞定的
總結：頁面上的操作和伺服器端的操作互相之間不會造成阻塞
二、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基礎
一、什麼是Ajax
AJAX即“Asynchronous Javascript And XML”（ 非同步 JavaScript和XML），
AJAX不是一種新的程式語言，而是一種用於建立更好更快以及互動性更強的 Web 應用程式的技術。
它是一套綜合了多項技術的瀏覽器端網頁開發技術。
這些技術包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.
二、Ajax原理
運用HTML和css來實現頁面,表達資訊
通過瀏覽器的XmlHttpRequest(Ajax引擎)物件
來向伺服器(傳送非同步請求)並(接收伺服器)的響應資料，
然後用javascript來操作DOM，實現動態區域性重新整理。
三、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 -
} -
}
四、為什麼使用Ajax？
優點:
使用Ajax的最大優點，就是能在不更新整個頁面的前提下維護資料。
這使得Web應用程式更為迅捷地響應使用者動作，並避免了在網路上傳送那些沒有改變的html程式碼資訊。
-
1.減輕伺服器負擔，按需要獲得資料。 -
2.無重新整理更新頁面，減少使用者的實際和心理的等待時間。 -
3.更好的使用者體驗。 -
4.減輕寬頻的負擔。 -
5.主流瀏覽器支援
缺點:
-
1.AJAX的程式必須測試針對各個瀏覽器的相容性。 -
2.AJAX更新頁面內容的時候並沒有重新整理整個頁面，因此，網頁的後退功能是失效的；需提醒使用者 -
3.對搜尋引擎支援不好。