原生js ajax 封裝

2021-10-07 01:38:15 字數 1229 閱讀 5286

首先我們先了解ajax的get和post請求分別是怎樣請求資料的

get請求

) //建立ajax例項

/*開啟需要請求的位址,可以有三個引數

參1:請求方式

參3:是否非同步,可選,預設非同步

)//向後端傳送的資料,get方式用不到

ajx.onreadystatechange =()

=>

}}post請求

) //建立ajax例項

// /*開啟需要請求的位址,可以有三個引數

// 參1:請求方式

// 參3:是否非同步,可選,預設非同步

)//設定請求頭

ajx.send(

'name=zhangsan'

)//向後端傳送的資料,get方式用不到

ajx.onreadystatechange =()

=>

}}上面的請求方式,比較麻煩,**冗餘,那麼我們把它封裝成get、post請求都可以使用的方法,方便使用

ajax(

},a=

>

)

根據上面的呼叫方法進行封裝

function ajax(obj, fn)}if

(obj.type ==

'get'

)else

if(obj.type ==

'post'

) ajx.onreadystatechange =()

=>}}

}

封裝完成

原生JS Ajax請求

傳統的web互動是使用者觸發乙個http請求伺服器,然後伺服器收到之後,在做出響應到使用者,並且返回乙個新的頁面,每當伺服器處理客戶端提交的請求時,客戶都只能空閒等待,並且哪怕只是一次很小的互動 只需從伺服器端得到很簡單的乙個資料,都要返回乙個完整的html頁,而使用者每次都要浪費時間和頻寬去重新讀...

原生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...