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

2022-06-12 01:42:06 字數 1815 閱讀 5197

4步:

//1. 例項化xhr物件

//2. 呼叫open方法準備ajax請求

//引數1: 請求方式 (get、post、delete、put)

//引數2: 請求的伺服器端的位址

//引數3: true(非同步、預設)、false(同步)

xhr.open('get', '/getdata');

//3. 呼叫send方法傳送ajax請求

xhr.send();

//4. 呼叫onload事件,配合responsetext來接收伺服器端返回的資料

// xhr.responsetext: 以字串形式來接收伺服器端返回的結果

// 伺服器端返回的資料有兩種可能:

// 1) 普通字串(hello world \ i am xiaoming)

// 2) json字串('')

// json字串都會使用 json.parse 轉回成物件形式

xhr.onload = function ()

get引數要拼接在url位址的後面,以?進行分割

//引數2的位置用來拼接get引數, 以 ? 作為分隔符

// ?之前: 請求的url位址

// ?之後: 查詢引數 key1=value1&key2=value2&...

xhr.open('get', '/getdata?id=1&name=zs&age=20&...');

xhr.send();

xhr.onload = function ()post傳參有三種方式: key=value&key=value&... formdata json字串

//1. key=value&key=value&...

xhr.open('post', '/postdata');

//將傳送到伺服器端的資料寫成乙個字串

var str = 'id=1&name=zs&age=20&...'

xhr.send(str);

xhr.onload = function ()

//2. 傳送formdata型別的資料

//1) 直接獲取整個post表單的資料

var fm = document.queryselector('form');

var fd = new formdata(fm)

var fd = new formdata();

//傳送ajax請求時,如果傳送到伺服器端的資料為formdata時,不需要設定請求頭,需要將fd作為引數傳入send

xhr.open('post', '/postdata');

xhr.send(fd);

xhr.onload = function ()

//3. 傳送到伺服器端的資料是json字串

var jsonstr = json.stringify(); //''

xhr.open('post', '/postdata');

xhr.send(jsonstr);

xhr.onload = function ()

axios 請求資料,以及和ajax的區別

相同點 axios 和 ajax 都是用於請求資料渲染頁面 不同點 1 ajax 實現了網頁的區域性資料重新整理 axios實現了對ajax的封裝,使用了promise模式,使用then鏈,來處理js非同步程式設計 在vue專案中,使用axios來獲取本地資料 上面8個圖示文字,儲存在本地資料中,用...

原生ajax的封裝寫法以及總結

1.原生 ajax get 請求 2.原生 ajax post 請求 3.封裝 ajax 請求步驟 1 建立xhr 2 監聽xhr.onreadystatechange事件 ajax狀態發生變化的事件 3 判斷ajax請求的狀態 4 設定請求方式和url 5 傳送請求 使用xhr物件傳送get方式請...

資料基礎 資料以及資料集的操作

資料和資料集 元素 物件 容器資料元素 算數運算 代數運算 邏輯運算 位移運算增 刪 改 查 初始化 遍歷 排序 iterator 資料型別轉換 包含 常見keys 刪除 remove del pop clear delete drop truncate 改 set 查 take get endsw...