Ajax的簡單基礎

2021-08-07 21:28:23 字數 1687 閱讀 5821

ajax 是一種用於建立快速動態網頁的技術。

通過在後台與伺服器進行少量資料交換,ajax 可以使網頁實現非同步更新。

部分進行更新。

同步請求:返回的是整張頁面,會重新整理整個頁面,他是序列的過程,只能同時做一件事。

非同步請求:返回的是字串(頁面的部分資訊),不會重新整理整個頁面,不會阻塞當前主線程。

ajax通過核心物件xmlhttprequest在後台發起子執行緒,該子執行緒負責此次的請求,會請求伺服器,伺服器會返回乙個字串,該字串會封裝在xmlhttprequest裡

的responsetext屬性中,然後請求返回客戶端,可通過

xhr.responsetext

獲取伺服器返回的字串,然後通過

dom技術修改

dom樹。由於是子執行緒在發起請求,所以不會阻塞當前顯示頁面的主線程,即非同步請求。由於返回的是字串且是通過

dom技術在修改

dom樹,所以不會重新整理整張頁面,即區域性重新整理,這就是我們所說的

ajax

非同步請求,區域性重新整理。

應用場景:需要請求伺服器,但只需要更新區域性頁面資訊時。

1、建立核心物件

xhr(

不同瀏覽器建立此物件的方式不同)

// ie6, ie5 瀏覽器執行**

2、初始化

xh---->

目的:告知

xhr以什麼方式傳送,傳送到什麼位置且攜帶什麼引數。

get方式:

xhr.open(「get」,url?傳遞引數);

post方式:

xhr.open(「post」,url);,

若需要傳遞引數則需指定引數格式

3、傳送非同步請求

get方式:

xhr.send();

post方式:若無引數

xhr.send();

若需要傳遞引數,則xhr.send(「需要傳遞給伺服器的引數」);

注:從請求發出到請求返回,xhr.readystate的屬性(標識

xhr的請求狀態)會經歷以下幾個階段的變化:

=0,表示初始化但並沒有傳送非同步請求

=1,表示已傳送非同步請求

=2,表示已傳送完畢

=3,表示開始返回

=4,表示返回完畢

4、設定監聽,通過

xhr.onreadystatechange屬性

注:xhr.status為協議碼,表示請求的狀態(例:

404,500

),當其為

200時,表示請求成功

xhr.onreadystatechange = function(){

if(xhr.readystate==4 && xhr.status==200){//返回完整,請求成功

var res = xhr.responsetext;//獲取返回值

//拿到返回值後可對

dom操作,區域性重新整理頁面

**:

還有jquery對ajax的 封裝:

演示:

中國秦國

Ajax的簡單應用

6 a 建立乙個ajax物件 b 鏈結到伺服器 open 方法,檔名,非同步傳輸 oajax.open get a.txt true c 傳送請求 oajax.send d 接收返回值 oajax.onreadystatechange function else 7 同步 多件事兒一起 事情一件一件...

簡單的ajax封裝

ajax傳送post請求返回 json 資料 function requestjson params ajax傳送post請求返回 string字串 function requeststring params ajax傳送post請求 function sendpost params ajax傳送g...

AJAX的簡單介紹

options 檢測有哪些方法可以用 get 獲取服務資訊 post 修改與更新,新增伺服器資訊 put 新增 delete 刪除 head 只返回頭資訊 trace 顯示頭資訊,用來測試 客戶端發起http請求 簡歷tcp鏈結 客戶端 瀏覽器 傳送請求資訊 狀態行 請求頭 空行 請求體 伺服器的響...