原生js的ajax請求

2022-08-28 02:00:12 字數 1577 閱讀 4591

什麼是ajax

傳統方法的缺點:

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

xmlhttprequest 物件

五步使用法:

1.建立xmlhttprequest物件

2.使用open方法設定和伺服器的互動資訊

3.設定傳送的資料,開始和伺服器端互動

4.註冊事件

5.更新介面

下面給大家列出get請求和post請求的例子

get請求:

// 步驟一:建立非同步物件

//  步驟二:設定請求的url引數,引數一是請求的型別,引數二是請求的url,可以帶引數,動態的傳遞引數starname到服務端

ajax.open('get','getstar.php?starname='+name)

//  步驟三:傳送請求

ajax.send()

//  步驟四:註冊事件  onreadystatechange 狀態改變就會呼叫

ajax.onreadystaterchange = function(){

if(ajax.readystate==4 && ajax.status==200){

//  步驟五:如果能夠進到這個判斷 說明 資料完美的回來了,並且請求的頁面是存在的

console.log(ajax.responsetext)    // 輸入相應的內容

post請求:

//  步驟一:建立非同步物件

//  步驟二:設定請求的型別及url

//   post請求一定要新增請求頭才行,不然會報錯

xhr.open('post','02.post.php')

//  步驟三:傳送請求

xhr.send('name=fox&age=18')

//  步驟四:註冊事件  onreadystatechange 狀態改變就會呼叫

xhr.onreadystatechange = function(){

//  步驟五:如果能夠進到這個判斷 說明 資料完美的回來了,並且請求的頁面是存在的

if(xhr.readystate==4&&xhr.status==200){

console.log(xhr.responsetext)

js原生ajax請求

建立向後台伺服器的乙個請求 確定傳送的方式方法 傳送請求 確定後台載入完畢 獲取到請求返回的資料 ajax 能夠處理那些型別檔案 文型別檔案 如 html txt js css json xml ajax,需要配合js 的基本事件以及dom操作共同使用。ajax負責的是獲取資料,但是將獲取到的資料放...

原生js的ajax請求

針對get方法 針對post方法 注意 1.setrequestheader 把指定首部設定為所提供的值。在設定任何首部之前必須先呼叫open 設定header並和請求一起傳送 post 方法一定要 2.post請求一定要新增請求頭才行不然會報錯 3.open method url asyncfla...

原生js的ajax請求

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