ajax的簡單介紹,和通過原生的ajax方法獲取或傳遞數據

Ajax概述

1.什麼是同步,什麼是異步

同步現象:客戶端發送請求到服務器端,當服務器返回響應之前,客戶端都處於等待卡死狀態,此時你不能進行網頁的其他操作

異步現象:客戶端發送請求到服務器端,無論服務器是否返回響應,客戶端都可以隨意做其他事情,不會被卡死

Ajax的運行原理

頁面發起請求,會將請求發送給瀏覽器內核中的Ajax引擎,Ajax引擎會提交請求到服務器端,在這段時間裡,客戶端可以任意進行任意操作,直到服務器端將數據返回給Ajax引擎後,會觸發你設置的事件,從而執行自定義的js邏輯代碼完成某種頁面功能。

ajax的簡單介紹,和通過原生的ajax方法獲取或傳遞數據

簡單來說以前我們訪問服務器,必須整個頁面的方式去訪問,然後整個頁面跳轉刷新,但是當ajax的方式時,可以進行局部操作,局部點擊一個按鈕出動執行ajax訪問服務器,而整體頁面不會刷新,你此時還可以操作頁面的其它功能

js原生的Ajax技術

js原生的Ajax其實就是圍繞瀏覽器內內置的Ajax引擎對象進行操作的,要使用js原生的Ajax完成異步操作,有如下幾個步驟:

1)創建Ajax引擎對象

2)為Ajax引擎對象綁定監聽(監聽服務器已將數據響應給引擎)

3)綁定提交地址

4)發送請求

5)接受響應數據

ajax的簡單介紹,和通過原生的ajax方法獲取或傳遞數據

ajax的簡單介紹,和通過原生的ajax方法獲取或傳遞數據

這個大概執行的步驟是,第三部為我們要訪問的url,url訪問成功之後,會運行回掉函數,執行第5步,我們在這個回掉函數內,可以獲取服務器所傳給客戶端的數據,直接xmlHttp.responseText()

ajax的簡單介紹,和通過原生的ajax方法獲取或傳遞數據

寫數據,在ajax的第5步可以接受數數據

這樣的話alert(res)彈不出內容,原因就是ajax訪問數據的時候,xmlhttpRequest存在多個狀態碼,有些狀態碼獲取不到數據,我們應該判斷在請求完成的時候,獲取數據

ajax的簡單介紹,和通過原生的ajax方法獲取或傳遞數據

ajax的簡單介紹,和通過原生的ajax方法獲取或傳遞數據

判斷兩個一個4,一個200,兩個都滿足的話,訪問完成,此時可以獲取數據了,可以彈出zhangsan

ajax的簡單介紹,和通過原生的ajax方法獲取或傳遞數據

服務器可以寫數據,我們也可以傳遞數據,在鏈接後面get提交,服務器正常獲取,沒有區別

ajax的簡單介紹,和通過原生的ajax方法獲取或傳遞數據

如果是post提交(send的方式提交數據)在發送請求之前設置一個頭

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");以上都是js原生的ajax,開發中基本不用,我們更多使用的是jquery封裝的ajax,但他的底層設計就是上面的內容,需要了解


分享到:


相關文章: