原生js實現Ajax請求

2021-08-07 20:03:14 字數 1865 閱讀 7923

原生的ajax請求離不開xhr物件,即xmlhttprequest物件。所有現代瀏覽器都內建有這個物件。

建立整個物件:

var xhr = new xmlhttprequest();
這裡有個版本的差異,ie5和ie6使用activex物件。不同的瀏覽器使用不同的物件。

if(window.xmlhttprequest)else向伺服器傳送請求

如果需要將請求傳送到伺服器,我們使用xmlhttprequest物件的open方法和send方法。

xmlhttp.send();open方法規定請求的型別,url以及非同步處理請求。

那到底是使用get還是使用post

get比post要快,也更簡單,並且在大部分情況下都能用。

但是在某些情況下,post也有一定的好處。

無法使用快取檔案(更新伺服器上的檔案或者資料庫)

向伺服器傳送大量的資料(post沒有資料量限制)

傳送包含未知字元的使用者輸入的時候,post比get更穩定也更可靠

注意:有些時候get請求得到的快取的結果,為了避免這個情況,有必要向url新增資訊。

xmlhttp.send();通過get方法傳送資訊,需要向url新增資訊

xmlhttp.send();需要像html表單那樣post資料,請使用setrequestheader()新增http頭,然後在send方法中規定希望傳送的資料。

xmlhttp.send("fname=bill&lname=gates");雖然xhr主要用來從伺服器獲取資料,但它同樣能用於把資料傳回伺服器。資料可以用get或者post的方式傳回來,包括任意數量的http頭資訊,這給你很大的靈活性,當你要傳回的資料超出瀏覽器的最大url尺寸 限制時xhr特別有用。這種情況下,你可以使用post方法回傳資料。

req.send(params.join('&'));伺服器的響應

如果需要獲得來自伺服器的響應,請使用xmlhttprequest物件的responsetext或者是respon***ml屬性。

responsetext:獲得字串形式的響應資料

respon***ml:獲得xml形式的響應資料

分別對其進行解析。

原生js實現ajax非同步請求

返回xmlhttp的相容寫法 xmlhttp.open post ajax recelve true get post url 是否非同步 post方式 對於django像form表單一樣,會觸發403,跨站請求的warn xmlhttp.send name daxue 路由url url r aj...

使用原生JS實現Ajax請求

第一步 獲得xmlhttprequest物件 第二步 設定狀態監聽函式 ajax.onreadystatechange function 第三步 open乙個鏈結 ajax.open get h51701.json false true非同步請求,false同步 第四步 send傳送乙個請求。可以傳...

js原生ajax請求

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