原生JS Ajax請求

2021-09-10 09:37:32 字數 1402 閱讀 2774

傳統的web互動是使用者觸發乙個http請求伺服器,然後伺服器收到之後,在做出響應到使用者,並且返回乙個新的頁面,每當伺服器處理客戶端提交的請求時,客戶都只能空閒等待,並且哪怕只是一次很小的互動、只需從伺服器端得到很簡單的乙個資料,都要返回乙個完整的html頁,而使用者每次都要浪費時間和頻寬去重新讀取整個頁面。這個做法浪費了許多頻寬,由於每次應用的互動都需要向伺服器傳送請求,應用的響應時間就依賴於伺服器的響應時間。這導致了使用者介面的響應比本地應用慢得多。

符號意義

abort()

停止當前請求

getallresponseheaders()

把http請求的所有響應首部作為鍵/值對返回

getresponseheader(「header」)

返回指定首部的串值

open(「method」,「url」,[asyncflag],[「username」],[「password」])

建立對伺服器的呼叫。method引數可以是get、post或put。url引數可以是相對url或絕對url。這個方法還包括3個可選的引數,是否非同步,使用者名稱,密碼

send(content)

向伺服器傳送請求

setrequestheader(「header」, 「value」)

把指定首部設定為所提供的值。在設定任何首部之前必須先呼叫open()。設定header並和請求一起傳送 ('post』方法一定要 )

window.

onload

=function()

method

("./data/data.txt"

,null

,"post"

,showdata)

;function

showdata

(data)}}

//為了方便使用將get或者post請求方式封裝為乙個方法 直接呼叫

function

method

(url,data,method,success)

else

ajax.

open

(method,url)

; ajax.

send()

;}else

else

} ajax.

onreadystatechange

=function()

}}}

補充

1.post 請求:加密,安全,可以用於傳送請求, 用send傳值。

2.get 請求:沒有加密,資料量大,可用於讀取資料 傳值:路徑+?+屬性=值。

3.加「?」時,預設為get傳值。

4.async 值為false(同步)/ true(非同步(同時載入))。

5.網頁出現404:網頁丟失。

6.網頁出現500:伺服器報錯。

原生js ajax 封裝

首先我們先了解ajax的get和post請求分別是怎樣請求資料的 get請求 建立ajax例項 開啟需要請求的位址,可以有三個引數 參1 請求方式 參3 是否非同步,可選,預設非同步 向後端傳送的資料,get方式用不到 ajx.onreadystatechange post請求 建立ajax例項 開...

原生jsAJAX簡介

建立乙個請求物件 由此ajax請求物件已經建立完成,我們可以看一下列印結果 由此可見,該物件中有很多屬性和方法,接下來我們就會用到其中的一些屬性和方法。2.呼叫open方法 該步驟的作用是設定請求方式和請求路徑。該open方法有兩個引數 引數1 請求的方式,常見的有get和post兩種請求方式 引數...

原生js ajax分頁元件

定義分頁元件dom pagination class pagination div 定義分頁元件類及例項方法 分頁元件類 function pagination ref 給例項物件新增公共屬性和方法 pagination.prototype else li.innerhtml item this.u...