原生Ajax傳送get post請求每一步

2022-05-21 02:01:13 字數 2820 閱讀 2585

傳送ajax的請求的核心物件是xmlhttprequest,因此我們需要了解該物件的相關屬性和方法

由於xmlhttprequest不相容ie6及以下的瀏覽器,因此在ie6及以下的瀏覽器不能使用xmlhttprequest建立 xhr物件,使用activexobject('microsoft.xmlhttp')代替。但是我寫好之後測試了一波,ie5好像支援 xmlhttprequest物件,ie6沒測,因此技術不斷更新,現在看到的不一定是對的。還需要自己動手測試以下。

//或者使用 try catch 這裡與上面的 if 語句 效果等同

trycatch(e)

type:請求的方式,可以是以下這些值: get、post、delete、options、head、put、trace、connect,用的最多的是 get、post請求。

url: 請求路徑和引數。路徑和引數以?為分割線例如 :http://localhost:3000?uname="車神-黃杰&age=23"

boolean:操作方式,true(預設值) --->非同步傳送請求 false ---> 同步傳送請求。

get請求:最好傳入null,有些瀏覽器約定好了,在傳送get請求時不傳入null會報錯。

post請求:傳入向伺服器傳送的資料。

此時資料由open方法傳入,資料拼接在第二個引數請求路徑的後面 以?為分隔符。

在ie瀏覽器中,請求引數存在中文會出現亂碼 此時需要對請求引數進行編碼 使用encodeuri(parme)解決相容性。

encodeuri() 可把字串作為 uri 進行編碼 但是對於一些ascll的字母或者數字不會進行編碼, 一些特殊的符號也不會進行編碼 例如_ . ! ~ * ' ( ) 等

例如encodeuri('宿舍') 此時結果為 %e5%ae%bf%e8%88%8d 。

var parme = 'username=' + "車神-黃杰" + '&paw='+ 123

//在ie瀏覽器會出現亂碼

var parme = 'username=' + "車神-黃杰" + '&paw='+ 123

//呼叫open方法

//設定content-type

//發生資料

xhr.send(parme)

繫結 onreadystatechange事件

readystate 為 4說明收到資料

status 為 200 表示資料完整

xhr.onreadystatechange = function () }}

主要的事件onreadystatechange,屬性readystate、status,請看圖

一、圖二即可

getajax()

function getajax() else

//第二步 準備傳送 呼叫opent方法 (有三個引數) 拼接資料

//第三步 傳送 呼叫send方法

xhr.send(null)//get請求 為null

//第四步處理請求 繫結事件onreadystatechange

xhr.onreadystatechange = function () }}

}

postajax()

function postajax() else

//第二步 準備傳送 呼叫opent方法 (有三個引數) 拼接資料

//第三步 傳送 呼叫send方法

//設定content-type

xhr.send(parme)//get請求 為null

//第四步處理請求 繫結事件onreadystatechange

原生JS傳送GET POST請求

主要分三步 第一步 建立需要的物件,這裡主要用到的是xmlhttprequest,注意需要考慮早期的ie 第二步 連線和傳送 第三步 接收 第一步 建立所需的物件 第二步 開啟連線 將請求引數寫在url中 ps ptest.php?name test nameone testone 第三步 傳送請求...

原生js傳送Ajax請求

1.建立乙個 xhr 物件 2.設定請求的方式和路徑 xhr.open get time 3.傳送請求 xhr.send null 4.註冊事件 xhr.onload function 注意 如果是傳送post方式的請求,需要在open和send中間設定請求頭,send中新增要傳遞的引數 有格式要求...

原生ajax傳送資料,以及不用的方法傳送

4步 1.例項化xhr物件 2.呼叫open方法準備ajax請求 引數1 請求方式 get post delete put 引數2 請求的伺服器端的位址 引數3 true 非同步 預設 false 同步 xhr.open get getdata 3.呼叫send方法傳送ajax請求 xhr.send...