史上最全的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.對搜索引擎支持不好。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM